Vertical nav bar with submenus

HTML & CSS
1

Hello everyone!

I am working on an existing project that is no longer maintained and want to remake the nav bar from a horisontal menu to a vertical. I am totally new to html and CSS since a couple of weeks now, so I’m learning new stuff every day.

So what I have to begin with is a menu.hbs with the top level menu items, and a couple of submenu-of-something.hbs with the submenu items for those top level items. If I was to make a new menu from scratch I would have just put all of the menu items in the same file. Admittedly there are quite a few though. What is the advantage to putting them in different ones?

I’m trying to make a side bar that extends the whole page height on the left side with sub menus spawning right underneath the item clicked. I don’t know how to do the positioning with this setup, the submenus just pop up below the entire top menu. I’m also not sure how I would do if I wanted a submenu of a submenu. Create a new layer of files or just add them to the existing one?

Here is the menu:

<nav id="fixed" class="bar">
    <ul class="menu">
	<li id="top" class="menu__item"><a href="/">Start</a></li>
	<li id="top" class="menu__item"><a href="/colors.html">Colors</a></li>
	<li id="top" class="menu__item"><a href="/buttons.html">Buttons</a></li>
	<li id="top" class="menu__item"><a href="/images.html">Images</a></li>
    </ul>
</nav>

And here is one of the submenus:

<nav id="fluid" class="bar">
    <ul class="menu menu--sub">
	<li class="menu__item"><a href="/images-logotype.html">Logotype</a></li>
	<li class="menu__item"><a href="/images-photos.html">Photos</a></li>	
    </ul>
</nav>
2

Hi,

Your question seems to be more a question about css basics rather than a problem with a menu as such.:slight_smile: It would help if you created a working demo (codepen or similar) that shows the html and css that you are using so that we can nudge you in the right direction.

If I understand correctly you are trying to make a vertical menu that has sub menus appearing below the trigger item and if so the best way to do this is to use a nested menu approach and then just hide and show the menu as required.

Here’s a rough codepen demo showing one approach.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.