SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Stockholm
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop down without JavaScript

    I want this dropdown: http://freshdesignweb.com/demo/2012/...sponsive-menu/ to work without JavaScript enabled in your browser. What does not work without JavaScript is submenus do not want to be seen. I want to either be able to click on the "Portfolio" or "Blog" to see the submenus or that it just works without JavaScript.

  2. #2
    SitePoint Addict bronze trophy vectorialpx's Avatar
    Join Date
    Dec 2012
    Location
    Bucharest
    Posts
    247
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    You can have full-CSS menu but the browser must support the hover action for non-button elements.
    So, without Internet Exploder, life would be better

    Code:
    <style>
    	* { font:12px Arial; color:#333; margin:0; padding:0; }
    	.cssmenu { }
    	.cssmenu li { list-style:none; float:left; padding:3px 10px; background:#fc0; cursor:pointer; }
    	.cssmenu li a { text-decoration:none; color:#000 }
    	.cssmenu li ul { position:absolute; display:none; margin:1px 0 0 0; }
    	.cssmenu li ul li { display:block; float:none; }
    	.cssmenu li:hover ul { display:block; }
    </style>
    
    <ul class="cssmenu">
    	<li>This has a submenu
    		<ul>
    			<li><a href="#">button 1. 1.</a></li>
    			<li><a href="#">button 1. 2.</a></li>
    			<li><a href="#">button 1. 3.</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Some button</a></li>
    	<li>Another submenu
    		<ul>
    			<li><a href="#">button 1. 1.</a></li>
    			<li><a href="#">button 1. 2.</a></li>
    			<li><a href="#">button 1. 3.</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Another button</a></li>
    </ul>

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    One of the classic dropdowns is called Suckerfish, and a JS-enhanced version of it called Superfish is also very popular. With JS off, the superfish menu works just fine, falling back to the CSS-only Suckerfish menu. I recommend you take that for a spin.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2008
    Location
    UK
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://pmob.co.uk/ is definitely worth a look

  5. #5
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Stockholm
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vectorialpx View Post
    You can have full-CSS menu but the browser must support the hover action for non-button elements.
    So, without Internet Exploder, life would be better

    Code:
    <style>
    	* { font:12px Arial; color:#333; margin:0; padding:0; }
    	.cssmenu { }
    	.cssmenu li { list-style:none; float:left; padding:3px 10px; background:#fc0; cursor:pointer; }
    	.cssmenu li a { text-decoration:none; color:#000 }
    	.cssmenu li ul { position:absolute; display:none; margin:1px 0 0 0; }
    	.cssmenu li ul li { display:block; float:none; }
    	.cssmenu li:hover ul { display:block; }
    </style>
    
    <ul class="cssmenu">
    	<li>This has a submenu
    		<ul>
    			<li><a href="#">button 1. 1.</a></li>
    			<li><a href="#">button 1. 2.</a></li>
    			<li><a href="#">button 1. 3.</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Some button</a></li>
    	<li>Another submenu
    		<ul>
    			<li><a href="#">button 1. 1.</a></li>
    			<li><a href="#">button 1. 2.</a></li>
    			<li><a href="#">button 1. 3.</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Another button</a></li>
    </ul>
    I canīt get it work with:
    Code:
    .cssmenu li:hover ul { display:block; }
    Am I doing something wrong?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by lantiqo View Post
    I canīt get it work with:
    Code:
    .cssmenu li:hover ul { display:block; }
    Am I doing something wrong?
    Can you show us you full code? Post the full code you are using, or better still, a link to what you have.

    On the site treacle linked to, there is a nice, simple example here:

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

    BTW, whether you are using HTML5 or something different, the code is the same.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Addict bronze trophy vectorialpx's Avatar
    Join Date
    Dec 2012
    Location
    Bucharest
    Posts
    247
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    That was just a "test" code to prove that older versions of IE will not know about the ":hover"
    So, if you insist, just add all page-elements <doctype, html, head, body>:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<title>Menu</title>
    	<meta http-equiv="content-type" content="text/html;charset=utf-8">
    	<style>
    	* { font:12px Arial; color:#333; margin:0; padding:0; }
    	.cssmenu { }
    	.cssmenu li { list-style:none; float:left; padding:3px 10px; background:#fc0; cursor:pointer; }
    	.cssmenu li a { text-decoration:none; color:#000 }
    	.cssmenu li ul { position:absolute; display:none; margin:1px 0 0 0; }
    	.cssmenu li ul li { display:block; float:none; }
    	.cssmenu li:hover ul { display:block; }
    	</style>
    </head>
    <body>
    <ul class="cssmenu">
    	<li>This has a submenu
    		<ul>
    			<li><a href="#">button 1. 1.</a></li>
    			<li><a href="#">button 1. 2.</a></li>
    			<li><a href="#">button 1. 3.</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Some button</a></li>
    	<li>Another submenu
    		<ul>
    			<li><a href="#">button 1. 1.</a></li>
    			<li><a href="#">button 1. 2.</a></li>
    			<li><a href="#">button 1. 3.</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Another button</a></li>
    </ul>
    </body>
    </html>

  8. #8
    SitePoint Member
    Join Date
    Jun 2012
    Location
    Stockholm
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see superfish works fine with HTML5, anyway thanks!


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
  •