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:

dropdown

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

Advertisements

~ by fdyska on February 18, 2013.

2 Responses to “Improving Navigation Bars: Drop Down Lists”

  1. I found this very helpful as we are moving forward in class and are required to add more projects to our webpage. I was thinking of a way to organize my webpage so that it was easy to navigate but found that I ended up adding more and more to my nav bar. This suggestion is great and the detail of the post was easy to follow and I will quickly be able to duplicate this process on my own website!

  2. Really awesome, and will definitely be utilized. I like it because it is something that a lot of websites use, and is a good way to clean up your website as we start to add more and more links. The code, while a little long, is extremely helpful because it provides everything you need, to do what is shown. Maybe use more 2nd person to make it more engaging, but otherwise awesome and my favorite of the week.

    -Tyler

Comments are closed.

 
%d bloggers like this: