Let's build a process to create collapsable mobile sub-menus

Community
1

Hello SiteJetters !
I am not a developper, but rather a jack-of-all trade in digital marketing.
That means : my css and javascript skills are limited.

I have checked some of the SiteJetters’ published websites (at occasion when you publish it in your public replies in the forum).

What I see : websites are great, but still…
On some of them, sub-menu items appear opened by default on mobile.

Which, we will all agree : is quite ugly and not convenient when you have dozen of items in your navigation menu !

Today, that is a BIG issue to me. Because, I feel reluctant to create a website with SJ when I know that my client will have many, many pages… and many menu entries !
Because I don’t know how to produce a proper menu with closed menu items, on mobile, in SJ.

So here is my proposal : could we work together, here, to publish a simple steb-by-step guide to manually create a nice menu on mobile ? Ideally, we should be able to make people click on main category to open the sub-menu, and click back to close the submenu. And as a bonus : a way to chose the opened state icon, and the closed state icon.

The way I see it :

  1. Add xyz class to your submenu item
  2. Add the following css snippet
  3. Add the following javascript snippet

Here is an example of what it could look like (the example is with the divi builder in WP, but the logic could be the same).

What do you think about it ? I am willing to help the best I can…

4 Likes
2

Hi @Thomas_Dandel,

maybe you are interested in this feature request, feel free to have a look and leave a +1.

1 Like
3

Eheh, thanks for the advice !
But I have already done that a few months ago ;).

3 Likes
4

Ive been getting many clients who are looking for the same thing. Although I don´t think it is on the list for features anytime soon. I made something kind of like what you want using an overlay instead of a menu preset. I know it probably isn’t great for Search Engine standards but it is what the hotel wanted.

It is only for the DE version - Romantik Hotel Scheelehof in Stralsund

I made it using accordion in an overlay with an attribute of target=“_parent” added to the html of the links so that the submenu will stay on the current page.
I think it is easier than using a bunch of custom CSS/Javascript libraries for my colleagues to more easily change things when I’m not there.

3 Likes
5

Hey @Jeff_Liknes - I went from desktop to mobile view and saw this in tablet mode - maybe you like to send us a ticket about this? Try it out yourself first, please?

image
image881×734 143 KB