Horizontal drop-down menu using CSS3 - Part 1/2.
This tutorial will show you how to create a clean CSS navigation menu with a professional look.
The menu was created using only 1 image. The gradient, drop shadow and rounded corners are all done using CSS3.
We will take you through the new CSS3 properties we used to achieve the final product.
Remember though, these new properties are only supported by the latest versions of Google Chrome, Mozilla Firefox & Safari.
As far as I'm aware, at the date of writing this no other browser supports them. Hopefully in the near future other browsers will support the code too.
The end product:
Step 1 - Structure the menu.
The first step is to create the structure of the menu using HTML. We will use an unordered list, which will hold further lists to create the drop-down effect.
Below is the HTML list:
<div id="navBar1">
<ul>
<li class="headerList1"><a href="#"> Home</a></li>
<li class="headerList1"><span><a href="#"> Html</a></span>
<ul>
<li> <a href="#"> Basics </a></li>
<li> <a href="#"> Links </a></li>
<li> <a href="#"> Images </a></li>
<li> <a href="#"> Lists </a></li>
<li> <a href="#"> Forms</a></li>
</ul>
</li>
<li class="headerList1"><span><a href="#"> Photoshop</a></span>
<ul>
<li> <a href="#"> Basics </a></li>
<li> <a href="#"> Buttons </a></li>
<li> <a href="#"> Logos </a></li>
<li> <a href="#"> Web layouts </a></li>
</ul>
</li>
<li class="headerList1"><span><a href="#"> CSS</a></span>
<ul>
<li> <a href="#"> Basics </a></li>
<li> <a href="#"> Links </a></li>
<li> <a href="#"> Images </a></li>
<li> <a href="#"> Navigation </a></li>
<li> <a href="#"> Forms</a></li>
</ul>
</li>
<li><span><a href="#"> Javascript</a></span>
<ul>
<li> <a href="#"> Basics </a></li>
<li> <a href="#"> Operators </a></li>
<li> <a href="#"> Functions </a></li>
<li> <a href="#"> Loops </a></li>
<li> <a href="#"> Scripts</a></li>
</ul>
</li>
</ul>
</div>
Above you can see multiple unordered lists(ULs). The 'ULs' have been added inside a parent UL, and are actually nested within the <li> elements.
Using this technique we can create a drop-down menu, once we add a little CSS into the equation anyway!
As you can see above each list item has been assigned a class name of 'headerList1', with the exception of the final (Javascript) item.
This will be used to apply a border to the right-hand-side of each item, obviously the final item does not require a right-hand-side border (which is why it was not assigned to the class).
You can also see that the anchor inside each item is contained within a <span> element, with the exception of the first item.
This will be used to apply a border to the left-hand-side. This technique allows us to have 2 different coloured borders, giving a nice 'shiny' effect.
Popular pages