Can someone post a few links to some good tutorials on making pure CSS dropdowns, cause I'm reading some and they aren't working lol.
You're suggesting that fat bloated pile of crap, THEN have the balls to call it 'very little code'?!? Mind you, that's probably my reaction since I've seen no pages that use it which were worth a damn. Dreamweaver's "MM_", MooTools, Jquery, YUI, pick a crap framework, they're all rubbish - MOST of it for stuff that should be handled in the CSS or markup in the first damned place.
You're very passionate about valid code, and no crap in the code. Yes, I have balls. Down below, and many footballs in the garden.
LMAO - you beat me to it. Jquery is a load of rubbish. Learn how code real JS. Use suckerfish, its the purist HTML/CSS menu around. Due to IE6 being as useful as tits on a bull, it just simply won't work without JS or a htc hack.
No, no it isn't. It too is a bit heavier than need be because it involves stuffing classes into the CSS, which gets sent to everybody even when it isn't needed. Which is why I prefer to just write a flat HTML/CSS menu for modern browsers, then throw peterned's csshover2.htc at it for IE 6/earlier. Even though it uses a behavior file and a * html hack, I consider it more pure than suckerfish because in every modern browser, even IE7, we are just feeding it a standard CSS2 based menu. The hacks/scripting is JUST for IE6 without adding extra classes to the menu itself. That's really what bothers me about suckerfish is that you have to code in those .sfhover classes, which seem wasteful to me (even if csshover2.htc is a bit heavy - it does let you :hover and :focus on anything in IE) Quick simple demo tossed together: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Menu Test </title> <style type="text/css"> * { margin:0; padding:0; } * html body { behavior:url(csshover2.htc); } h1 { text-align:center; margin:0.5em 0; } #mainMenu { list-style:none; /* next two declarations is so we can wrap our floats */ float:left; width:100%; font:normal 14px/16px sans-serif; background:#CCC; } #mainMenu li { position:relative; float:left; } #mainMenu a { float:left; padding:8px 12px; color:#000; text-decoration:none; border-right:1px solid #FFF; } #mainMenu li:active a, #mainMenu li:focus a, #mainMenu li:hover a { color:#FFF; background:#888; outline:none; } #mainMenu li ul { list-style:none; position:absolute; top:32px; left:-999em; width:168px; border:2px solid #888; } #mainMenu li:active ul, #mainMenu li:focus ul, #mainMenu li:hover ul { left:0; display:block; /* IE won't re-render the position change without this */ } #mainMenu ul a { width:148px; padding:4px 10px; color:#000 !important; background:#EEE !important; border:0; } #mainMenu ul a:active, #mainMenu ul a:focus, #mainMenu ul a:hover { background:#DDD !important; } </style> </head><body> <h1>Menu Test</h1> <ul id="mainMenu"> <li><a href="#">Home</a></li> <li><a href="#">Search</a></li> <li> <a href="#">Admin</a> <ul> <li><a href="#">Features and Options</a></li> <li><a href="#">Packages</a></li> <li><a href="#">Error Log</a></li> <li><a href="#">Permissions</a></li> </ul> </li> <li> <a href="#">Messages</a> <ul> <li><a href="#">Read my Messages</a></li> <li><a href="#">Send a Message</a></li> </ul> </li> <li><a href="#">Logout</a></li> </ul> </body></html> Code (markup): Just add csshover2.htc from: http://www.xs4all.nl/~peterned/csshover.html and it's good to go.
It's far lighter than the .htc version. Both the JS and classes could be fed to IE6 only using a conditional comment which would achieve the same thing. I don't do it as I don't like conditional comments... there isn't really an ideal solution in my eyes, a couple hacks and a bit of JS are as close as its going to get for a while though. For those wondering how it works, it does the same thing as suckerfish JS except dynamically adds the classes, rather than having them in the stylesheet:
I think the deathshadows example is great. Reduced code, works great. So when IE6 is "gone" hope soon (still 33% using it). No need to modify the HTML markup, just throw away the JS ... And I like the way deathshadow's clean easy light code.
Because fat bloated javascripts reliant on dated and bad programming techniques, JS for stuff CSS should be handling, and usually stolen from people without credit given is SUCH a good way to start a nube out in programming. ... sorry 'bout that. DynamicDrive was one of the first websites I found a decade ago, and much like Frontpage/composer/dreamweaver it taught me bad habits it took almost six years to kick, despite every bone in my body realizing their code was rubbish from day one - I just didn't know enough javascript at the time to do anything about it. Their recent stuff is even worse and has caused more problems for developers than it's solved.