HTML Tutorial – Pure CSS Navigation Menu
Designing a rich looking navigation is not the herculean task it seems to be. Here’s another easy tutorial which will help you design a navigation bar from scratch using just CSS and no images.
Alright, here we go…
The final product
This is what your nav bar will look like at the end of the tutorial. You only need a basic knowledge of CSS to pull this off, so no worries.
The solution
Menus driven purely by CSS have always been the ideal solution when it comes to navigation. However, we all know that we have been forced to use simplistic designs or images because of limited CSS and browser capabilities sometime or the other. You’ll be happy to know that with the advent of CSS3, it is easier than ever to create flexible, and simple yet creditably good looking navigation menus.
Please note that this will work only on modern browsers, but it does have a fall-back for IE and other older browsers.
The markup
Let’s start with the html markup for the navigation. We’ll keep it very simple and straightforward here.
Step 1 – The basic CSS
Now, let’s style the navigation with the basic parameters.
ul.cssTabs {
background: #848383;
border:solid 1px #606060;
padding: 0 75px;
width: 405px;
margin:20px;
font-size:12px;
font-weight:bold;
}
ul.cssTabs > li {
background:#989898;
color:#3a3a3a;
border:solid 1px #606060;
border-bottom:0;
display: inline-block;
margin: 10px 1px -1px;
padding: 8px 20px;
}
ul.cssTabs > li.active {
background:#ededed;
}
Done? Great! It should look like this now:
This should be pretty self-explanatory. This is also what the fall-back will look like.
Step 2 – Gradients, box-shadows and rounded corners
We now get down to the main business of using CSS3 capabilities. Add the following code to the ul.cssTabs class:
background:-moz-linear-gradient(0% 100% 90deg,#737373, #9a9a9a); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9a9a9a), to(#737373)); box-shadow: inset 0 1px 0 0 #dfdfdf; -moz-box-shadow: inset 0 1px 0 0 #dfdfdf; -webkit-box-shadow: inset 0 1px 0 0 #dfdfdf; border-radius: 8px 8px; -moz-border-radius: 8px 8px; -webkit-border-radius: 8px 8px;
If you are not sure how this works, check out my earlier tutorial which explains this in detail.
Step 3 – Styling the list items
Using the techniques described above, we add these styles to the list items (ul.cssTabs > li):
background:-moz-linear-gradient(0% 100% 90deg,#9a9a9a, #888888); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#888888), to(#9a9a9a)); box-shadow: inset 0 1px 0 0 #dfdfdf; -moz-box-shadow: inset 0 1px 0 0 #dfdfdf; -webkit-box-shadow: inset 0 1px 0 0 #dfdfdf; text-shadow: 1px 1px 0 #d3d3d3;
As you can see, the text shadow is added to highlight the text.
The final step – Active list
And finally, let’s add a different style to the active list item (ul.cssTabs > li.active).
background:-moz-linear-gradient(0% 100% 90deg,#f0f0f0, #d1d1d1) !important; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d1d1), to(#f0f0f0)) !important; box-shadow: inset 0 1px 0 0 #fff; -moz-box-shadow: inset 0 1px 0 0 #fff; -webkit-box-shadow: inset 0 1px 0 0 #fff; text-shadow: none;
you may also like:
Leave a Reply
