Post details: Drop-down menu without javascript

May 19, 2008 : Drop-down menu without javascript

Some time ago I was looking for a CSS-only (no javascript) cross-browser technique to make a drop-down expanding navigation menu. I found the GRC Menu that did this, but it had a lot of site-specific stuff in there. It was not something I could easily use as a starting point for my own sites.

So I hacked around with Steve's CSS and HTML and developed a minimal version. Here's the minimal version of GRC's script-free pure-css menu.

Technorati tags:

Comments, Pingbacks:

Comment from: Ryan K [Visitor]
http://xkcd.com/327/
Permalink 06/09/08 @ 02:07
Comment from: Deezer [Visitor] · http://www.mifairtax.org/
Why not just use YUI ?
Permalink 06/16/08 @ 12:54
Comment from: Dave Brondsema [Visitor] · http://brondsema.net/
Deezer, I've used this on a few sites' primary navigation menu, so I wanted to have a menu that worked for people even if they had javascript off, so they wouldn't miss out on anything.
Permalink 06/16/08 @ 14:04
Comment from: John Biggs [Visitor]
Thank you so much. I found the GRC example first but then I dreaded cleaning it up. You even have comments in the code!!! Thank you again. And thanks to the great people at GRC.
Permalink 06/24/08 @ 20:46
Comment from: John Biggs [Visitor] · http://www.photohispanagroup.com/Sample2/Welcome.html
Hi. I was wondering if you could help a little? I need to center it, and I spaced the menu items out better, but now it looks funny on IE6. Maybe I spaced it wrong?
Permalink 06/24/08 @ 22:46
Comment from: Dave Brondsema [Member] · http://brondsema.net/
@John, glad you could use this too. Sorry I don't really have the time to look in to your issue, though. CSS can be so difficult, I know! One suggestion though, would be to start stripping away as much of the HTML markup and GRC CSS declarations to try to come up with the simplest example that still has the problem. Then you'll probably have an easier time solving it. Good luck!
Permalink 06/24/08 @ 22:55
Comment from: Gedy [Visitor]
Hi,
Thanks so much for posting. I have one question. How come the IE7 one is not working. IE6, Firefox, Safari, etc. are working fine except IE7.

Help please?

Thanks,
Gedy
Permalink 01/09/09 @ 16:43
Comment from: Gedy [Visitor]
Oops - I know it would help if I put the URL huh? :-)

http://www.ihop.org/Publisher/Article.aspx?ID=1000042314
Permalink 01/09/09 @ 16:44
Comment from: Referrer spam [Visitor]
I came to this site from Google, but got a referrer spam message! I presume you don't want people visiting your site? haha
Permalink 03/06/11 @ 08:37

Leave a comment:

Your email address will not be displayed on this site.
Your URL will be displayed.
What is the 2-letter abbreviation for Michigan?
Allowed XHTML tags: <p, ul, ol, li, dl, dt, dd, address, blockquote, ins, del, span, bdo, br, em, strong, dfn, code, samp, kdb, var, cite, abbr, acronym, q, sub, sup, tt, i, b, big, small>
Options:
 
(Line breaks become <br />)
(Set cookies for name, email & url)

<  October 2014  >
Mon Tue Wed Thu Fri Sat Sun
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    

Categories


Archives

Misc

Syndicate this blog XML

powered by
b2evolution