An exclusive gaming industry community targeted
to, and designed for Professionals, Businesses
and Students in the sectors and industries
of Gaming, New Media and the Web, all closely
related with it's Business and Industry.
A Rich content driven service including articles,
contributed discussion, news, reviews, networking, downloads,
and debate.
We strive to cater for cultural influencers,
technology decision makers, early adopters and business leaders in the gaming industry.
A medium to share your or contribute your ideas,
experiences, questions and point of view or network
with other colleagues here at iVirtua Community.
After playing with some javascriptmenus today, I decided to see if I could pull off a drop down menuwithout any javascript. I’ve seen it done before, so I thought I’d giveit a shot. It actually ended up being pretty simple, so I thought I’dshare the how-to.
There has been an uploaded a demo of this. If you take a look at the source, the basic elements of the menu are ul and li tags.
Thefirst thing to do is differentiate the parent menu items from the menuitems that only appear after you hover over the parent item. I did thiswith classes.
You’ll see the parent item is marked with top, while the rest are marked item. Now I can get to hiding .item and letting .top continue to show. So I’ll add this to the style sheet.
#menu ul .item{display:none;}
And when I hover over the top of the unordered list, I want all list items with class item to appear again. Here’s what I’ll add to the style sheet.
Code:
#menu ul:hover .item{display:block;}
You could choose to use display:block or display:inline. The last important piece is the position of the menu.
Code:
#menu{position:absolute;}
I wouldn’t say this is necessary, but if you’d like the drop down to appear on top of the content below, it is. Otherwise, your
CSS
menu will just displace everything underneath it.
You can dig through more of the source from the demo if you’d like to see the styling of the menu. Most important of all, this is all web standards compliant, and keeps the
HTML
of the page beautiful. I’ve tested it successfully in Camino 1.5.1,Firefox 2.0.0.9, and Safari 3.0.3. If you’d like test it anywhere andsee how it fairs, go for it.