I’m on day 2 of my quest to get a full understanding of how to code a horizontal navigation menu with a drop down submenu. Again, this is no easy task to wrap your head around. Fortunately for me there are numerous incredible coders who freely share their code online, which has helped me out tremendously.
Before I jump into any code I want to first speak about how these menus work (again from the viewpoint of a newbie). The examples I have found online build menus based on one of two structures: 1) ordered lists or 2) divs. Although different means, each has the same basic underlying structure which I will explore in the following. For ease of understanding I’ll break the menu CSS structure into 3 parts:
Part 1 of 3: The (Sub)Menu Shell
‘The Sub-Menu-Shell’ is an empty space where you’ll display all your menu options.
The Code:
Remember it is an empty shell. The two main properties that have to be defined here are 1) ‘display: none’ and 2) ‘position: absolute.’ ‘Display: none’ sets the default view of the shell to be ‘none’ which eliminates it from being displayed on the page (until later overridden when it becomes a drop down). The second piece, ‘position: absolute’ is critically important because it allows the submenu to ‘float’ on top of the page’s content. Without it when the submenu displays it would rearrange your page’s content by pushing it all down.
Sample CSS Code:
.sub-menu-shell {display: none; position: absolute; background-color: #efefef; width: 200px;}
Part 2 of 3: The ‘Buttons’
Think about a normal website, its navigation menu might have options like ‘home’, ‘contact’, ‘about us’, etc. For lack of a better term I’ll call these menu options ‘buttons.’
The Code:
Theoretically buttons can be anything: div, img, p, span, li, etc. Mostly I’ve seen them as a <div> or as <li>. Since it is visible to the user this is where you may have a lot styling for the text’s color, size, background color, etc.
Sample CSS:
.menu-button {width: 200px; color: white;}
Or
.menu-button {width: 200px; color: white; position: relative;}
You can do a lot more with the styling: add borders, font size, background colors, etc., but for now I want to keep things as basic as possible. Whether or not you put the relative position code here depends on your HTML (will cover this later).
Part 3 of 3: The Container
The Sub-Menu-Shell and Button just don’t randomly float around, they are held together in a ‘container’ – a div or a nav. In the HTML the Sub-Menu-Shell’s code is underneath the code for the Button.
Sample CSS:
.container {width: 100%; background-color: black;}
Or
.container {width: 100%; background-color: black; position: relative;}
Whether or not you put the ‘position: relative’ property here depends on your HTML (will cover this later).
OK, that’s it. That is the barest of skeletons! You’ll still need 1 more segment of CSS, but that is best to be discussed later after we first cover your HTML options:
HTML (Version 1)
<div class=”container”>
<div class=”menu-button”>Visit Where?</div>
<div class=”sub-menu-shell”>
<a href=’#’>Los Angeles</a><br>
<a href=’#’>New York City</a><br>
<a href=’#’>Washington DC</a>
</div>
</div>
HTML (Version 2)
<div class=”container”>
<div class=”menu-button”>Visit Where?<div>
<div class=”sub-menu-shell”>
<a href=’#’>Los Angeles</a><br>
<a href=’#’>New York City</a><br>
<a href=’#’>Washington DC</a>
</div>
</div>
</div>
The difference is that in Version 2 the ‘Sub-Menu-Shell’ div is nested inside the ‘Menu Button’ div. Both versions will do the same thing – depending on where you place the ‘position: relative’ code.
If you select Version 1, the ‘position: relative’ property must go in the Container’s CSS. If you select Version 2, the ‘position: relative’ property should go in the Menu-Button’s CSS. Why? Remember in the Sub-Menu-Shell’s CSS there was ‘position: absolute’ property assigned, in this case you must also assign the ‘position: relative’ property to its parent div.
Sidebar: please read my post that explores the relationship between position relative and absolute!
Now there is one final piece of CSS that you must go back and add. The Sub-Menu-Shell is not displayed, and you need some code that will trigger it to show via the mouse pointer hovering over the text ‘Visit Where?’
CSS:
.menu-button:hover .sub-menu-shell {display: block;}
The code is almost self-explanatory, but let me reiterate what is happening above. When the mouse pointer hovers over the ‘Menu-Button’ class (the ‘Visit Where?’ text) the ‘Sub-Menu-Shell’ is triggered to display (which is a switch from the default of ‘display: none’) in ‘block’ format.
Click here to view the above sample.
Ordered List Version
Remember at the start I mentioned people build these menus via two methods: ordered lists and divs. The above example is based on divs, below I want to share how to do with an ordered list <ol>. Before I go any further I want to acknowledge I got a lot a help on this from Darren Kynaston’s code via this source.
CSS:
All the CSS is the same, but with one addition. I want to eliminate the bullets that come with an ordered list by default, to do so I added this to the CSS:
ul {list-style:none;}
HTML:
In the HTML I removed all the divs (except the container div) and replaced them with <ul> and <li> for the ordered list:
<div class=”container”>
<ul>
<li class=”menu-button”>Visit Where?
<ul class=”sub-menu-shell”>
<li><a href=’#’>Los Angeles</a></li>
<li><a href=’#’>New York City</a></li>
<li><a href=’#’>Washington DC</a></li>
</ul>
</li>
</div>
You can see the a full example here.
Boom! There you have it! The ordered list version of the drop down menu. Both of these examples are very, very simple, there is still a lot of styling that needs to be added. However, I hope that if you are a newbie like me that this step by step skeleton construction is helpful. Writing these step out was a huge, giant help for me! It has done a lot to demystify the code for drop down menus. I hope to follow up this post shortly with a post about styling your menu.