User Control Panel
Search iVirtua
Advanced/Tag Search...
Search Users...
What is iVirtua Exclusive Community?
  • 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.
Guest's Communication
Live Chat
Teamspeak (VOIP) Audio Conference
Private Messages
Check your Private Messages
Themes
Choose an iVirtua Community theme to reflect your interests...
Business Theme
India/Arabic Theme

Gaming Theme
iVirtua Recommends
Fly Emirates Advertising
Pure CSS Drop Down Menu - No javascript
Digg This Digg Topic Tag it on del.icio.us Tag topic on On del.icio.us Technorati Search Technorati Search Post to Slashdot Post to Slashdot
You are currently in Programming, Web and Software Design/Development
Post new topic Reply to topic
Thu Dec 13, 2007 4:37 pm Reply and quote this post
PixelSpread wrote:
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.
    
Code:
<div id="menu"&gt;<ul id="item1"&gt;<li class="top"&gt;menu item</li&gt;<li class="item"&gt;<a href="#"&gt;menu item 1</a&gt;</li&gt;<li class="item"&gt;<a href="#"&gt;menu item 2</a&gt;</li&gt;<li class="item"&gt;<a href="#"&gt;menu item 3</a&gt;</li&gt;</ul&gt;</div&gt;

    
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.

Contributed by Editorial Team, Executive Management Team
372659 iVirtua Loyalty Points • View ProfileSend Private MessageBack to Top

Related Articles
Post new topic   Reply to topic


Page 1 of 1

iVirtua Latest
Latest Discussion

Discuss...
Latest Articles and Reviews

Latest Downloads
Subscribe to the iVirtua Community RSS Feed
Use RSS and get automatically notified of new content and contributions on the iVirtua Community.


Tag Cloud
access amd announced applications author based beta building business card case company content cool core course cpu create data deal dec demo design desktop developers development digital download drive email feature features file files firefox flash free future gaming google graphics hardware help industry information intel internet iphone ipod jan launch linux lol love mac market media memory million mobile money movie music net nintendo nov nvidia oct office official online patch performance playing power price product program ps3 pst publish ram release released report rss sales screen search security sep server show size software sony source speed support technology thu tue update video vista war web website wii windows work working works xbox 360 2006 2007 2008

© 2006 - 2008 iVirtua Community (UK), Part of iVirtua Media Group, London (UK). Tel: 020 8144 7222

Terms of Service and Community RulesAdvertise or Affiliate with iVirtuaRSSPress Information and Media CoverageiVirtua Version 4PrivacyContact