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 it’s not a new term – you can implement Multiple Menus by using the same CSS by just having different class names for changing the colours 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 it’s not – this method is by using Conditional Comments.
The best features of this menu are:
- 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 with IE 6, but I am not gonna paste the whole CSS code over here, as some are scared to see the huge code, it’s 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 :)
download
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 :)
