Intermediate Web Design Tutorial
To create an animated navigation bar we first need to make the buttons that will be used for the site navigation. We will do this by using unordered lists (ul) and list items (li). For this tutorial we will assume that you have a basic webpage already created with a header, navbar section, main content section, and footer.
Create the navigation button items as a list in your HTML. We will use three buttons for this example and call them "Home", "About Us", and "Contact Us". We will also create links for the first two menu items, "Home" and "About Us". The HTML code will look something like this:
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li>Contact Us
Note that the last list section (/li) is not closed because it will nest the next section of the drop down menu.
Add the next list which will be the submenus. This submenu will activate once the mouse hovers over the "Contact Us" navigation button. It will contain another unordered list which will contain the menu items "Email" and "Phone". We will also add another DIV section for formatting the drop-down buttons. That HTML will look something like this:
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li>Contact Us
<ul id="mycontact">
<li>Email</li>
<li>Phone
Again note that the last list section after "Phone" is not closed because it will nest the next the third section of the drop down menu.
Create the third layer of submenus which will activate when the mouse hovers over the "Phone" button. The completed HTML Section will look something like this:
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li>Contact Us
<ul id="mycontact">
<li>Email</li>
<li>Phone
<ul id="myphone">
<li>CEO</li>
<li>CFO</li>
</ul>
</ul>
</ul>
Notice that the list is completely closed after the "CFO" entry because there are no more sub-menus to nest. This completes the end of the nested portion of the navigation list.