Nowadays, css menus are becoming more and more popular, which is not surprising. Small size, fast speed, ease to create. In today’s tutorial I will tell you how to create a stylish navigation menu using not only CSS, but also jQuery library. It can help us enhance the default behavior. If you are ready – we can start.
Here are samples and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download the example files and lets start coding !
Step 1. HTML
As usual, we start with the HTML.
This is our main page code.
index.html
<script src="js/jquery.min.js"></script> <script src="js/main.js"></script> <link rel="stylesheet" href="templates/css/main.css" type="text/css" /> <div class="examples"> <div id="menu"> <ul class="level1"> <li class="level1-li"><a class="level1-a" href="#url">Home</a></li> <li class="level1-li"><a class="level1-a drop" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level2"> <li><a href="#url">Email</a></li> <li><a href="#url">Telephone</a></li> <li><a href="#url">Online Form</a></li> <li><a href="#url">Snail Mail Address</a><b></b></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="level1-li"><a class="level1-a drop" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level2"> <li><a href="#url">Ski Hire Facilities</a></li> <li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level3"> <li><a href="#url">Beginners Slopes</a></li> <li><a href="#url">Intermediate Slopes</a></li> <li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level4"> <li><a href="#url">Local</a></li> <li><a href="#url">Nearby</a></li> <li><a href="#url">With instructor</a></li> <li><a href="#url">Snow boarding</a><b></b></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#url">Expert</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#url">Night Life</a></li> <li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level3"> <li><a href="#url">Snow Hotel</a></li> <li><a href="#url">The Snowman</a></li> <li><a href="#url">Ice Cavern</a></li> <li><a href="#url">Ski Inn</a><b></b></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level3"> <li><a href="#url">From Airport</a></li> <li><a href="#url">In Resort</a></li> <li><a href="#url">Multiple Resorts</a><b></b></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="level1-li"><a class="level1-a drop" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level2"> <li><a href="#url">Where to go</a></li> <li><a href="#url">What to do</a></li> <li><a href="#url">Places of interest</a></li> <li><a href="#url">National parks & Museums</a><b></b></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="level1-li left"><a class="level1-a drop" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level2"> <li><a href="#url">Money Exchange</a></li> <li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level3"> <li><a href="#url">Lift Passes</a></li> <li><a href="#url">Insurance</a></li> <li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level4"> <li><a href="#url">Boots</a></li> <li><a href="#url">Skis</a></li> <li><a href="#url">Ski Wear</a></li> <li><a href="#url">Goggles</a><b></b></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#url">Ski Schools</a></li> <li><a href="#url">Snow Report</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level3"> <li><a href="#url">Austrian</a></li> <li><a href="#url">German</a></li> <li><a href="#url">French</a></li> <li><a href="#url">English</a><b></b></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#url">Short Breaks</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li> </ul> </div> <div style="clear:both"></div> </div>
Step 2. CSS
Here are used CSS styles.
templates/css/main.css
Quite all css code is belong to css menu. I don`t including this into article. It always available in download package
Step 3. JS
Here are necessary JS file to our project.
js/main.js
$(document).ready(function(){ $('#menu li').hover(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(400); // effect 1 // $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400); // effect 2 },function(){ $(this).find('ul:first').css({visibility: "hidden"}); }); });
You can play with effects – try to use fadeIn and slideDown. Both looks fine.
js/jquery.min.js
This is just jQuery library. No need to give full code of that file here. It always available in download package
Step 4. Images
Also we need several images for our demo (these images for menu):
Live Demo
Conclusion
Today I have told you how you can make any css menus more attractive and user friendly. You can use this material as is in your startups. Good
I will use this in my project. I like it the way you put the step by step process.
this doesn’t work in IE8. Total failure
2 TP
Why? I checked demo in IE7 and IE8 just now – all fine, recheck please
Still does not work in IE8, Windows 7
Why don`t work? Just tested in IE9/8 and 7. All work as should – without problem. Make sure that you have (in ie dev toolbar) not compatibility mode, but IE8 or even 7
Hi Admin,
The tutorial work perfectly fimr in chrome and firefox.
However the hover thingy is somehow not working on internet explorer 8.
Appreciate if you can let me know the fix.
regards,
Jijo
it’s not working in IE 8..
Totally Dead..
it’s working perfectly in IE 6,7 but not in IE8..
can u give the solution for that?
how to resolve it
Hi sundar,
Can you please tell me how exactly it don’t work in IE8?
Its difficult to test it in IE8 without actual IE8. I have only IE9 with IEDevToolbar (which can be switched to different modes – IE7/8/9).
Anything is perfect for each mode there. Do you have any JS error or what? Wrong alignment?
Very nice menu. Thanks for tutorial
Hi
Don’t work with IE8 on windows XP but work fine on chrome and firefox.
Nor error on js , i think it will must fix on CSS.
thanks fot this tutorial
Hello,
It should work in IE7 and higher