SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    dropdown menus w/o JavaScript -- what is best approach?

    what is best approach for css-only dropdown menus w/o JavaScript?

    thank you..

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    Assuming you can learn from example...
    http://www.pmob.co.uk/temp/dropdown-fullwidth2.htm

    B
    asically do (pseudo)

    ul
    li
    ul li /li /ul
    /li
    /ul

    Then set the inner ul to absolute position, left:0; top:whatever, margin-left:-999em; and on ul li:hover, set the inner <ul> to margin-left:0;

    That example should help you.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Paul's is okay but too old: it sux0rz for keyboard users.

    The menu on this web site: www.motorrijschoolemo.nl has Javascript to improve the keyboarder (and shakey-mouser) experience, but without JS it does still work, even with keyboard (without Javascript it does not work in IE6, and it does not work on touchscreen phones... however both cases are fixed by having the top-level links actually go to page who then contain the same links as the dropdown menu... which makes the menu pretty much entirely accessible from a device standpoint. The colour contrast and small font size, though, may knock it off the "AAA Accessible" tower).

    I've built one that is a mega-menu (so the child who appears on :hover is a div, not a submenu... so multiple submenus can be children in this div) but I haven't completely finished testing it everywhere: stommepoes.nl/Daniel/polywood.html (also hasn't been changed from the client's original text!! Eventually will be turned into Slipsum.com or something).

    Dropdowns in general kinda suck donkey balls though. I try to avoid them, unless I need to show off to other front-end developers who like shiny and might hire me.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,119
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    It doesn't really answer your question, but I wouldn't be aiming to avoid js to begin with.
    Using javascript for dropdowns is the best approach I've seen.

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    I would look to avoid Javascript to begin with.

    Always add with Javascript, never start with it. Progressive enhancement ftw! =p

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,823
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    The standard method for menus are nested list. As far a drop downs , that depends on what kind of drop down you want.

    The following example is a 3 level menu, drop down->fly-out. Pure CSS. For IE7+, and generally acessible, I think....


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
    	<head>
    		<title></title>
    		<style type="text/css">
    		ul a {display:block; padding:10px;}
    			li {float: left; list-style: none; }
    			li li{float:  none; position: relative }
    			ul {background: pink; overflow: hidden; padding:0}
    			li ul, li:hover ul ul  {background: orange; position: absolute;  top:100%; left:-9999em; overflow: visible   }
    			div {position: relative}
    			li:hover ul{left:auto; color:red; }
    			li:hover  {background: orange}
    			li li:hover  {background: pink}
    			li  li:hover  ul{left:100%; top:0;  color:red;    background: tan; z-index: 10; width:100%}
    
    
    		</style>
    	</head>
    	<body>
    	<div>
    <ul class="nav" >
    	<li><a href="#">item</a></li>
    	<li><a href="#">item</a></li>
    	<li><a href="#">item</a></li>
    	<li><a href="#">item longer sample item</a></li>
    	<li><a href="#">item</a>
    		<ul>
    			<li><a href="#">item</a></li>
    			<li><a href="#">item</a></li>
    			<li><a href="#">test</a>
    				<ul>
    					<li><a href="#">sub</a></li>
    					<li><a href="#">sub</a></li>
    					<li><a href="#">sub</a></li>
    					<li><a href="#">sub</a></li>
    					<li><a href="#">sub</a></li>
    				</ul>
    			</li>
    			<li><a href="#">item longer sample item</a></li>
    			<li><a href="#">item</a></li>
    		</ul>
    	</li>
    </ul></div>
    	</body>
    </html>

    It's basic.. but it should give you something to go from.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    Sorry Stomme, I didn't feel like coding up an example at the time so I figured Pauls site would be a good place to grab one.

    Surprisingly, that was the only simple nav example he had on his site, at least from what I saw o.O.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    This one is a better one:

    http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

    But you don't visually see the results of keyboard navigation. Jason has an example here that has better keyboard support:

    http://www.cutcodedown.com/codeExamp.../template.html
    (It's discussed in a thread here.)

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    The following example is a 3 level menu, drop down->fly-out. Pure CSS. For IE7+, and generally acessible, I think....
    Not working for me in IE7, I had mentioned to you once before about IE7 having problems with left:auto;

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Ray: I often don't bother IE with left anything... it seems much happier with playing with the margins (and leaving left at 0) anyways.

    Quote Originally Posted by dresden
    and generally acessible, I think...
    How many :focuses are in that code? None : )

    When you're used to keyboarding through web sites, you realise you're going to be relying a whole lot on the status bar at the bottom (usually) of your browser, and hope the URLs look sensible. There are CMSes out there who like to make every URL look like some kind of freaky salted hash, I think just to screw with those of us who use the addressbar for site navigation : (

    Quote Originally Posted by ralph
    Jason has an example here that has better keyboard support:
    I was trying out Crusty's for a potential answer for someone here on the forums, but the buggy behaviour of *all* versions of Firefox/Gecko made it a no-go. The submenu items remaining at the top are just way too confusing. Also I had a lot of trouble with variable-length top-level li's. It worked better with static widths as Crusty has it. So I've stuck to the old-fashioned ones for now, at least until Mozilla decides to fix this (it's likely an ambiguous thing that they don't consider a bug anyway).

    Quote Originally Posted by ryan
    Sorry Stomme, I didn't feel like coding up an example at the time so I figured Pauls site would be a good place to grab one.

    Surprisingly, that was the only simple nav example he had on his site, at least from what I saw o.O.
    I know, I've gone through Paul's site many times knowing he had some demo of something, but not being able to find it. : ) Paul should hire someone to go through his site, organise stuff into "old" and "current-best" sections and have them all linked on his main page.

    Quote Originally Posted by markbrown
    It doesn't really answer your question, but I wouldn't be aiming to avoid js to begin with.
    Using javascript for dropdowns is the best approach I've seen.
    Quote Originally Posted by samanime
    I would look to avoid Javascript to begin with.

    Always add with Javascript, never start with it. Progressive enhancement ftw! =p
    You're both right. The menu should *never* break because there are no scripts, but for goofy pretty behaviour like dropdowns, Javascript is still necessary to fill in the usability gaps left by CSS. Now eventually I suppose the easing-fading-blah CSS3 stuff will be able to take care of the onmouseoff delays (these assist in usability for anyone with poor mouse control... or just poor mice... or any of those assistive mouse replacements like chin cups...), but having the whole submenu appear for keyboarders... I've seen only with a very simple dropdown menu, but not (yet) with a nested set of submenus (Crusty's would come close if it weren't for Gecko).

    That simple dropdown menu, btw, can be seen at valuedstandards.com. The top right on a desktop-ish wide screen has a menu which cleverly uses :target to make the whole dropdown appear so long as the user has clicked on the "to the menu" link, which goes to #nav, the menu. Quite brilliant, but of course wasn't designed to be robust on "crappy" browsers. Also he has weird things like li:focus which won't work.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I know, I've gone through Paul's site many times knowing he had some demo of something, but not being able to find it. : ) Paul should hire someone to go through his site, organise stuff into "old" and "current-best" sections and have them all linked on his main page.
    Yes, I do need to sort that out - I started to tidy it up a few years ago but didn't get very far.

    You're both right. The menu should *never* break because there are no scripts, but for goofy pretty behaviour like dropdowns, Javascript is still necessary to fill in the usability gaps left by CSS.
    The superfish plug in for the suckerfish type menus adds in good keyboard support and you can tab nicely through the menus and set delays for the fade out to aid poor mouse control etc. Without js the menu is just the basic suckerfish and works in all but ie6.

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Too bad that version seems to require a large library (if the menu was all you were using it for, it's too big). On the other hand, if you want the intents then you'd need all that.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •