Improving Navigation Bars: Drop Down Lists

Eventually my Navigation Bar got to the point where it had too many buttons for just one line.  In order to prevent myself from having to add a second line of buttons, I decided to look into implementing some sort of drop down list. Basically, was looking to design something like this:

When the mouse cursors over Blog Posts, a drop down list of the blog posts will be displayed. This particularly can help prevent clutter, while adding more links to the Navigation Bar.

The first step in this process will be to create the content list structure in the html. This can be accomplished mainly through the use of the <ul> and <li> tags.  For this particular structure, this was the html code that was used:

<ul id=”coolMenu”>
<li>
<A href=”index.html”>
<img src=”homeButton.jpg” border =”1″ >
</a>
</li>
<li>
<A href=”pictures.html”>
<img src=”Pictures.jpg” border =”1″ >
</a>
</li>
<li>
<A href=”proposal.html”>
<img src=”proposal.jpg” border =”1″ >
</a>
</li>
<li>
<a href=”#”>
<img src=”blogposts.jpg” border =”1″ >
</a>
<ul>
<li>
<a href=”#”>
<img src=”blogpost1.jpg” border =”1″ >
</a>
</li>
<li>
<a href=”#”>
<img src=”blogpost2.jpg” border =”1″ >
</a>
</li>
<li>
<a href=”#”>
<img src=”blogpost3.jpg” border =”1″ >
</a>
</li>
<li>
<a href=”#”>
<img src=”blogpost4.jpg” border =”1″ >
</a>
</li>
</ul>
</li>
<li>
<a href=”#”>
<img src=”studentSites.jpg” border =”1″ >
</a>
</li>
<li>
<a href=”#”>
<img src=”pitthome.jpg” border =”1″ >
</a>
</li>

</ul>

In order to break up the code a little bit, the coding for the sub menu is highlighted. The <ul> tag is used to begin a sub list for list item (list item is denoted by <li>

Up to this point the html code will provide you with a vertical list of the links. In order to rearrange the layout of the links and to implement the action of a drop down menu on scrolling over, a css page will also need to be added.  Here is an overview of what the css coding will look like. Remember that this css script must also be called in the html file.

#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: left;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
height: 4em;
line-height: 2em;
padding: 0 0em;
text-decoration: none;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 160px;
}
#coolMenu li:hover ul {
display: block;
}

Remember that this css script must also be called in the html file in order for it to be applied to your html file. Here with this css style sheet, you will be able to adjust the padding of each sub item, the length of the entire bar, the layout of the items, as well as the mouse over action to display the sub-block.  There is a lot of room to tweak the specs to this design, but this is what you would need to do in order to implement drop down menus on a Navigation bar.

-Frank Dyska

About these ads

Source : digicompdiy[dot]wordpress[dot]com