Drop Down Menu?

HI

I dont think this is possible, but wanted to get an expert option, Is it possible to make interacting menus, for example a user hovers their mouse cursor over a button and a list of options appear (similar to flash menu)??? using CSS?

 

www.webddm.com

Not CSS-only but it comes close (Javascript+CSS).

 

Very much so. Take a look at the site below;
w w w .cssplay.co.uk/menus/dd_valid.html (remove spaces)

Uhhh... Do not use Javascript for a menu. You'll lose users who dont have Java enabled in their browser.

 

seoconsultants.com/css/menus/horizontal/

 

Or the final CSSplay version;

w w w .cssplay.co.uk/menus/final_drop.html

 

Thanks for all replies guys, got to go, due to im up at 4.30am to go to Lodon for a web design award, will check links out when I get back.

 

You have to have some JS code because freaking IE doesn't recognize the :hover on a list item. If it weren't for that life would be perfect!

Not too bad though, the JS is SUPER light weight. So you can do some cool things.

Here's part of a tutorial I wrote for my site using pure CSS drop down menus (with a tiny bit of js for IE)

http://davidcdalton.com/pages/articles/dropdownexample/menutest.php

 

No you don't. The last link I posted works perfectly in IE v5 (haven't tested higher) and Firefox 2.0.

Here it is again;
http://www.cssplay.co.uk/menus/final_drop.html


Update:
The site actually says this;

This works in IE5.5, IE6, hopefully IE7 (confirmation anyone?), Firefox, Opera, Netscape 8 and Mac Firefox 1.5 and Safari though not Mac IE5.x.

 

http://www.htmldog.com/articles/suckerfish/dropdowns

 

Well it might work but OMFG did you see the condition comment use and the code it has to dump into IE? Like this from his source:

<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>

			<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
			<li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
			<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

Code (markup):

Sorry folks but it will be a COLD day in hell when I resort to using tables to make drop downs work! YESH! what a freaking mess!

 

Yeah i looked at the source of the CSS Play menus. I'm all set with that.

 

Java is not Javascript. The amount of people who have Javascript disabled is less than 1%.

WebDDM is used on thousands of commercial sites and it doesn't impact quality of site (except in a positive way). Please don't give advice like this without knowing what's going on.

 

And where do you get your stats from? Are you also ignoring the users of mobile devices and people who use screen readers? That's where the 5-10% comes from, if you haven't noticed. In fact, it could even be higher for those users.

Let me give you a real world example. My cell phone does not understand CSS or JavaScript at all. It'll gladly display every last array, function, style rule, and variable as plain text. If you were to use JavaScript for your menu, how would you expect me to navigate your site? Are you going to discriminate against me just because I happened to be away from my computer for an hour or two?

 

Dan, don't forget corporate users. I know of several MSFT houses whose IT depts set security on IE to disable ActiveX, which also kills javascript for literally thousands of desk- and laptops in each company.

Any web page that depends on anything other than html, whether css, javascript or Flash, for basic functionality is a poorly designed page.

cheers,

gary

 

That it does. I was just thinking of myself for once (and rightly so).

 

In which case, it's no longer "do not use Javascript menus" it's "use only very very basic HTML". He asked if there were CSS-only menus that could do really fancy things: No.

He didn't ask for fancy + cell phone support + corporate intranet.

And why would you use a phone on the net and expect it to support most sites?

 

Define fancy then. You want it to clean up after you and wash the dishes while you're away? Because if you do, then CSS and simple HTML can easily be used to create a dynamic menu that can not only compete with "the best of them" but curb-stomp them too.

 

No, it doesn't mean that at all. It means that the site should be composed of content with html markup that is semantic, well structured and well formed. The bare content + html should be fully functional by itself. The css should be a progressive enhancement linked from an external source and not intermingled with the html markup. The same is true of the javascript.

Any user agent (UA, or browser) will render to its capabilities, i.e. if it knows css, it will apply the style rules and if it knows javascript, it will load and run the javascript. If it knows neither, it will display just fine without them. It's called Best Practice. Good developers exercise best practice, poor developers don't.

Best practice demands orthogonality among structure, presentation and behavior for usability and accessibility, and for ease of maintenance and debugging. Even the server side stuff follows this practice. Data storage and retrieval (DBMS) are separate from the business logic (PHP or other programming language), and the page building (html/template) is not mixed with the logic.

Dan should expect to pick up any html aware UA and view any html page. It is only the poorly designed sites that will cause problems.

Guess what? It's as easy or easier to develop a good page as it is a poor one. You just have to know your business; and that business is web development.

cheers,

gary

 

He asked for something interactive and "similar to Flash menus". CSS doesn't come close. Javascript can do amazing things and WebDDM has a lot of the interactive/fancy graphical effects.

 

Also, I'm not condoning only using Javscript. It's a fallacy to say that Javascript menus cannot be backward-compatible and WebDDM has been designed around this.