Since many years a GUI-standard are the menu-bars of applications with menus popping up, if you click or hover an entry in the menu-bar. Some websites implement this feature too, but they are using Javascript, as far as I can see. For different reasons Javascript can be a problem, so the question: Is this possible to implement without Javascript, only using HTML and CSS?
Add a comment
|
5 Answers
I've done something like this before, and it's a trick pulled off by placing the menu items in anchor tags, with submenus in hidden divs INSIDE those anchor tags. The CSS trick is to make the inner div appear during the a:hover event.
It looks something like:
<style>
A DIV { display: none; }
A:hover DIV { display: block; }
</style>
<a href="blah.htm">
Top Level Menu Text
<div><ul>
<li><a href="sub1.htm">Sub Item 1</a></li>
<li><a href="sub2.htm">Sub Item 2</a></li>
<li><a href="sub3.htm">Sub Item 3</a></li>
</ul></div>
</a>
Your mileage may vary...
EDIT: Internet Explorer 6 and lower do NOT support the :hover pseudo-class on other elements besides A. In more 'modern' browsers, it is accepted to be able to use this trick with LI, TD, DIV, SPAN, and most any tag.
2 Comments
Mnementh
Thank you for this great help and even mentioning the IE6. As I use Linux, I wouldn't even test for IE6. Or should I break the site for IE6 on purpose, to keep people motivated to switch to a modern browser? ;-)
Jeff Fritz
In my experience, it is best to avoid breaking any browser when you are designing a web application for mass consumption
Best known technique is the suckerfish menus. Searching for that will result in a lot of interesting menu's. It only needs javascript in IE6 and lower.
Comments
Consider using the CSS methods as a backup for when JavaScript is unavailable. JavaScript can* provide a better user experience for drop-down menus because you can add some delay factors to stop menus immediately disappearing if the mouse briefly leaves their hover area. Pure-CSS menus can sometimes be a bit finicky to use, especially if the hover targets are small.
*: of course, not all menu scripts actually bother to do this...
Comments
You can use the pseudoclass :hover to get an hover effect.
a:link {
color: blue;
}
a:hover {
color: red;
}
I can give a more extensive example but not right now (need to get the kids to the dentist).
2 Comments
Sean Hanley
Wait wait... let me get this story straight. You had a children's dentist appointment imminent, the kids in coats for that late October autumn chill, and, with keys in hand, decided "Wait, I better check Stack Overflow before we go... there might be a CSS question I could answer!" This amuses me...
Shog9
@Yadyn: i know, it's ridiculous. ...What ever happened to sending kids out without coats to toughen 'em up...?
There's also Eric Meyer's original article on pure CSS menus.
There are bound to be much more robust and modern takes out there now mentioned by others, but I thought I'd mention it for posterity. :)
