Add Submenu items – dropdown

[nhirajeta]

Hello all!

I have a client who has a lot of items in her menu:

shopshinelife.com

The theme we chose looks great on desktop, however 75% of her customers are on mobile, and the nav doesn’t perform well.

I limited the number of items currently in the mobile nav because #1 it’s hard to scroll (page content wants to scroll as well) and #2 the sub menu items are prelisted. I’d love to get them to dropdown when pressed, I just need some help with that code.

Thanks!
Nicco

[mhodges44]

I know that this doesn’t help you with your current problem, but one thing I noticed is that if you have the side panel navigation open and then scale your browser back to full size, the overlay and the room for the side panel do not go away. This is an easy one, but something else to potentially address.

[Chris Coyier]

Looks like the list item that has the submenu has a class menu-item-has-childrenso you could write like…

.menu-item-has-children .sub-menu {
  /* hide this by default somehow maybe like this: */
  height: 0;
  overflow: hidden;
}

Then you’ll have to write some JavaScript to deal with opening it, something like…

$(".menu-item-has-children").on("click", function() {
  $(this).toggleClass("open-sub-menu");
});

in which this CSS would do the opening

.menu-item-has-children.open-sub-menu .sub-menu {
  height: auto;
}

There is lots more fancy things you could do, but that’ll get you started.

[nhirajeta]

mhodges44 yes I’ve discovered this, but it doesn’t help her 150+ customers a night.

Thanks Chris, the css i understand, but where to i add the js? I don’t need this to be fancy, just working on mobile.

Thanks!

[Author]

Posts