Kevin Powell - Community•2y ago

One and two level CSS menu

I've been tasked with making a more swish looking menu for a quite old web app at work. One of the things I've tried is using https://codepen.io/kevinpowell/pen/apxoJX as a starting point. What I am trying to do is have a sometimes multi tiered menu. Imagine a menu structure: Foo -> Foo 1, Foo 2, Foo 3; Bar -> Bar 1, Bar 2, Bar 3; Baz -> Baz 1 -> Baz 1A, Baz 2A, Baz 3A, Baz 2 -> Baz 2A, Baz 2B, etc. Foo, Bar, Baz is set up as a horizontal menu, Baz1, Baz2 is a horizontal menu, everything else is vertical. I have got it to bring up the "second level" stuff, whether that is the vertical menu or the horizontal submenu. However, the third level menu does not want to appear. I'm probably missing something quite simple, but I'm at that point of not knowing what I don't know. Any thoughts?

Kevin

CodePen

Mega menu

...

6 Replies

PaulOP•2y ago

Think I've worked some of it out - my HTML was a bit messed up from all the poking and prodding. The second menu and the vertical menu share a class, so the show/hide affects them both. I'll give that some poking - just putting the problem into words and breaking it down into simplest pieces helped

Wouter Schaap•2y ago

@paul8543 did you manage to get to the desired result already?

PaulOP•2y ago

I got something close - the padding is causing some weird behaviour, and there is some overlap happening between some menus. I'll stick the proof of concept up on codepen in the morning

PaulOP•2y ago

https://codepen.io/Paul-HE/pen/PoxRgPe

Paul HE

CodePen

PoxRgPe

...

Wouter Schaap•2y ago

@paul8543 Probably has to do with the fact that the deepest level is positioned absolute, but the parent has a position: relative set.

<div class="menu-sub">
  <ul class="menu-horizontal">
    <li>
      <div class="menu-submenu"></div>
    </li>
  </ul>
</div>

<div class="menu-sub">
  <ul class="menu-horizontal">
    <li>
      <div class="menu-submenu"></div>
    </li>
  </ul>
</div>

You position .menu-submenu absolute, but have set position:relative on .menu-horizontal. At this moment the padding for the second layer of menu is set on .menu-sub. So the behaviour you're getting is actually quite logical. .menu-submenu is currently positioned relative to .menu-horizontal. Removing position:relative from .menu-horizontal would position .menu-submenu relative to .menu-sub and probably solve your styling issue.

PaulOP•2y ago

Whole day of meetings yesterday, so didn't get much chance to play around. Ended up with some other funky behaviour, getting menus appearing all over the place. Might suggest to them that if they want this UI/UX refresh done sooner, they get someone that is more skilled to do it!

Gaming

Programming

One and two level CSS menu