In Part 2 I built a skeleton drop down menu just to illustrate the basic principles. In the following I want to fill out that skeleton and build an entire navigation bar. Remember, we are starting with here which is a drop down menu built with divs (not with an ordered list).
Part A: Dummy Text
First lets add some content below our current drop down menu. This text will help prove our navigation bar and drop down menus are working correctly, as in not moving the content down on page but instead just floating over it. It should be something simple like this:
<div style=”width:100%; margin-top:10px; border:1px solid black;”>
Jason Learns Code.
</div>
You can view it here.
Part B: Add Options to Navigation Bar
This is supposed to be a horizontal navigation bar, with each option having its own drop down menu. Right now we only have one option (Visit Where?), so to expand it I want to add two more options: “Shapes” and “Colors.”
Remember the principle from Part 2: the drop down menu’s contents are held in a ‘container’ div (or nav). For simplicity’s sake I want to avoid divs inside divs inside divs – so lets just use that same ‘container’ div to hold all of our additional navigation options, like this:
HTML:
<div class=”container”>
<All the code for the ‘Visit Where?’ dropdown>
<Copy of the Visit Where Code? dropdown code>
<Copy of the Visit Where Code? dropdown code>
</div>
Once I copied the code over I can replace the second ‘Visit Where?’ title text with ‘Shapes’ and the third with ‘Colors.’ Click here to see what it looks like now.
Part C: Align Horizontal
In the above example all our menu options are in a column, and the drop downs look jumbled when displayed. To arrange them in a horizontal row we need to add the property ‘display: inline-block.’ That will get the menu options to align side by side (please read here for details on inline-block). I need to add that code to the menu-button class, like so:
CSS:
.menu-button {width: 200px; color: white; position: relative; display: inline-block;}
You can see here that now the menu lines up horizontally.
Part D: Background Colors
Our menu option ‘buttons’ don’t have any background color. Let’s make the background color purple and have it change to gray with the mouse pointer hovers over it. This is all done in the CSS:
CSS:
.menu-button {width: 200px; color: white; position: relative; display: inline-block; background-color:purple;}
.menu-button:hover { background-color:gray;}
View the progress here.
Part E: More Navigation Styling
Now lets add some more styling to the text in the navigation menu. Let’s assign a font family and a center alignment – again this is all to the .menu-button class in the CSS.
CSS:
.menu-button {width: 200px; color: white; position: relative; display: inline-block; background-color: purple; font-family: arial; text-align: center;}
View it here.
I don’t like how ‘tight’ around the text the navigation bar is. I would like add some padding to the top and to the bottom of the text. Normally I would add padding to the menu-button CSS like so:
CSS:
.menu-button {width: 200px; color: white; position: relative; display: inline-block; background-color: purple; font-family: arial; text-align: center; padding: 5px 0 5px 0;}
However, look here to see how that alters the drop down menu’s positioning. That’s not good, to avoid this alignment/positioning issue I decided to replace padding with ‘line-height’ instead, like so:
CSS:
.menu-button {width: 200px; color: white; position: relative; display: inline-block; background-color: purple; font-family: arial; text-align: center; line-height:190%;}
View it here. Line-height was able to accomplish the same thing as padding would do.
Part F: Drop Down Menu Styling
So now with the navigation menu looking good, lets move on to the drop down menu. Since they are all hyperlinks they are currently displaying the default hyperlink settings which is blue font and underline. Lets get rid of that and change the font color to black. To do so I’ll have to create a new CSS class and assign it to all the hyperlinks*.
CSS:
.sub-menu-links {text-decoration: none; color: black;}
HTML:
<div class=”menu-button”>Visit Where?
<div class=”sub-menu-shell”>
<a href=’#’ class=”sub-menu-links”>Los Angeles</a><br>
<a href=’#’ class=”sub-menu-links”>New York City</a><br>
<a href=’#’ class=”sub-menu-links”>Washington DC</a>
</div>
</div>
OK, we’re getting close. View the progress here.
Part G: Drop Down Menu Background/Test Color Change
Now we need to make the background color and the text change color via hover. I want to change the background color to black and the font color to white, to do so I’ll have to add a new line of code to the CSS.
CSS:
.sub-menu-links:hover {background-color: black; color: white;}
View it here. You’ll see that something is wrong here, yes the background and text colors change on hover, but it’s just the span of the text, not the entire width of the drop down! We need to add some additional code to the CSS in the ‘sub-menu-links’ class.
CSS:
.sub-menu-links {text-decoration: none; color: black; display: block; width: 100%;}
Now the links are in ‘blocks’ that expand the entire width of the drop down menu, view it here (note I also removed the <br> elements between the hyperlinks, they’re no longer needed once the display: block was added).
Part H: Miscellaneous Additions
The menu is pretty much done, but there are a few more miscellaneous additions I would like to make. To the menu button I would like to add a pointer as well as change the text color to black via hover, like so:
CSS:
.menu-button:hover {background-color:gray; color:black; cursor: pointer;}
I would also like add a bottom black border to the drop down menu, again via the sub-menu-links CSS:
CSS:
.sub-menu-links {text-decoration: none; color: black; display: block; width: 100%; border-bottom: 1px solid black;}
There is always more features you could add, but I think this is a good final version. You can view it here.
Gap Issue
I’m sure you have noticed the persistent gap between the menu options (purple buttons). We haven’t added any padding or margins to the CSS, so where is that space coming from? I researched the issue and was able to find some interesting information on it via CSS Tricks.
After reading I followed the advice and just eliminated some of the spacing in my HTML code. Once I did so I was able to eliminate the space between the menu options, see it here.
*You don’t have to create a whole new class, you could just assign the new properties to the a element in CSS, but you could run into problems if you have other hyperlinks in your code.