I am sure there are many designers and developers who like to implement the Multi-level, Multi-Column, Multi-Menus, Light Weight, and the most Browser Compatible Menu or Navigation with pure CSS and without using any javascript.
What is this Multi-Menus? :)
Don’t worry its not a new term – you can implement Multiple Menus by using the same CSS by just having different class names for changing the colors and the height of the other menus.
I am one among them, who searched a lot to get the proper and pure CSS multi-level, multi-column, and multiple menus – but failed to get the proper menu and thought why not explore a little with my little CSS knowledge I have. So started exploring the best way to implement a menu with only CSS. And here is the result of it, this menu works well in all the latest browsers.
Tested and works perfectly in the following latest browsers – Firefox, Google Chrome, Safari, Opera, Internet Explorer and among the most, it works excellent with IE 6 :). Few call it is with IE 6 Hack, but its not – this method is by using Conditional Comments.
The best features of this menu is:
- Pure CSS (Only CSS)
- Multi-Level
- Multi-Column
- Multiple Menus in Single Page :)
- HTML List based
- Supports all the latest browsers
- Supports IE6 with Conditional Comments
- Browser Compatible
- Light Weight
- and the most is Flexibility – Can be work for 3 or more level – just need small tweaks in CSS :)
Let me Explain how I made it compatible to IE 6, but I am not gonna paste the whole CSS code over here, as some are scared to see the huge code, its not a huge code though, just see the result folks :) and don’t forget to spread it if you like it, because this will be helpful for many of your friends out there.
If you check the View Source of the Demo, you observe some comments like:
<!–[if lte IE 6]> and ending with <![endif]–>
Some call it an IE 6 Hack, it’s by using the Conditional Comments, you can get a complete overview of the Conditional Comments at MSDN – Internet Explorer Developer Center
And the Conditional Comment types I have used in this example are Downlevel-Hidden
<!–[if lte IE 6]><![endif]–>
and Downlevel-Revealed
<![if gt IE 6]><![endif]>
You might be thinking what is this lte and gt?
Those are Operators which can be used to create conditional expressions. You can check the available Operators at MSDN – Internet Explorer Developer Center, observe the table which describes the list of operators that can be used to create conditional expressions. Check the examples on the same page for getting an idea of the same.
The Operators I have used are:
lte = The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt = The greater-than operator. Returns true if the first argument is greater than the second argument.
That’s it Check the Demo, Download and Explore yourself :)
And now this gonna be a part of our WittySparks CSS Framework
Kindly share your ideas to improve it more….
Before people use to say Digg It – now its fashion to say Tweet It :) – But I say Spread iT and show some love :)
Thank you so much! I was looking for something like this since I first saw a “Mega Menu” article in SitePoint Magazine.
great tutorial. thanks
Hey, that’s a great menu, thanks.
i’m only new to CSS and just downloaded, and wondering is there any chance this can be made pop up?
no puedo bajarlo.. :(
Thanks for the advice. Great tutorial.
Any chance of developing this for Joomla?
thank you mae, in this momento this is very useful for me :)
wow! man you rock,
Well done this will come in handy for a few future projects
Loved the post.
I am taking the liberty of adding a reference to your article on my CSS aggregator site. Do let me know if you are ok with this.
@netbaazigar – Thanks and sure please go-ahead and add it to your CSS aggregator.
Great Job!!
I have one problem. It sucks when I use it for right side menu. It flows out of the visible area.
Is there any solution for this?
@WebCreations – would be great if you can share the link where you are trying to implement this – would try our best to solve this…..
This is an awesome solution. Especially with IE 6 support (why people still use it is puzzling). I’m wondering if you have a way to manually wrap columns instead of relying on automatic wrapping.
Hai, this is cool css code, but, have some bugs, how about my text have a long wording, the text are on a top another menus.. can this fix..
This is a great menu and it helped me a lot for designing my site .
love this — but in HTML5 DOCTYPE,the BBedit syntax checker doesn’t like the Downlevel-revealed Conditional Comments (which parse fine in XHTML strict). The error is ” Unexpected SGML declaration; check for misspelled DOCTYPE or malformed comment.” probably not a problem… but maybe in some browsers?
this is great. I am looking for this. Thanks a lot
My life dream to become a css designer.. it’s been so many years already, I think oneday it will happen this, if I still keep the faith, of course.
excelent menu! thank you very much
Nice functionality, but needs to be responsive.