gte IE 8 and firefox, chrome, safari, opera latest version
<link rel="stylesheet" href="style.css" media="all">
<script src="jquery.js"></script>
<script src="dorpdown.js"></script>
<script>
jQuery(function($) {
$('#nav').dropdown();
});
</script>
<body>
<ul id="nav">
<li>
<ul class="sub-nav"><li>menu1-1</li></ul>
</li>
</ul>
</body>
nested ul element style require min_width property
| /** | |
| * simple drop down navigation jQuery plugin | |
| * | |
| * {@code | |
| * <ul id="nav"> | |
| * <li>item1 | |
| * <ul class="sub-nav"> | |
| * <li>item1-1</li> | |
| * <li>item1-2</li> | |
| * </ul> | |
| * </li> | |
| * <li>item2</li> | |
| * </ul> | |
| * } | |
| * | |
| * {@code | |
| * $('#nav').dropdown(); | |
| * } | |
| * | |
| * script set position property. | |
| * But postion property has to set by to style sheet as a general. | |
| */ | |
| jQuery.fn.dropdown = function() { | |
| var target = $(this.selector); | |
| // pc | |
| if ($(window).width() >= 768) { | |
| // this reference is HTMLUlElement | |
| $('li', target).hover(function() { | |
| // this reference is HTMLLiElement | |
| $(this).css('position', 'relative'); | |
| var parent = $(this).parent(); | |
| var style = { | |
| position: 'absolute' | |
| }; | |
| if (false === parent.hasClass('sub-nav')) { | |
| style.top = $(this).outerHeight() + 'px'; | |
| style.left = 0; | |
| } else { | |
| style.top = 0; | |
| style.left = parent.width() + 'px'; | |
| } | |
| $(this).children('ul').css(style); | |
| $(this).children('ul:not(:animated)').slideDown("fast"); | |
| }, function(){ | |
| // this is HTMLLiElement | |
| $("ul",this).slideUp("fast"); | |
| }); | |
| } | |
| }; |
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>DropDown Menu</title> | |
| <meta name="description" content="DropDown sample"> | |
| <meta name="keywords" content="dorpdown"> | |
| <link rel="stylesheet" href="style.css" media="all"> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
| <script src="dropdown.js"></script> | |
| <script> | |
| jQuery(function($) { | |
| $('#nav').dropdown(); | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <ul id="nav" class="clearfix"> | |
| <li><a href="#">menu1</a> | |
| <ul class="sub-nav"> | |
| <li><a href="#">menu1-1</a></li> | |
| <li><a href="#">menu1-2</a></li> | |
| <li><a href="#">menu1-3</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">menu2</a> </li> | |
| <li><a href="#">menu3</a> | |
| <ul class="sub-nav"> | |
| <li><a href="#">menu3-1</a></li> | |
| <li><a href="#">menu3-2</a> | |
| <ul class="sub-nav"> | |
| <li><a href="#">menu3-2-1 sample menu</a></li> | |
| <li><a href="#">menu3-2-2</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">menu3-3</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </body> | |
| </html> |
| @charset "utf-8"; | |
| * { | |
| margin:0; | |
| padding:0; | |
| list-style-type:none; | |
| } | |
| #nav li{ | |
| float:left; | |
| position:relative; | |
| padding: .8em 2em; | |
| background: #F0F0EE; | |
| } | |
| #nav li:hover{ | |
| background: #EEEEEE; | |
| } | |
| #nav li a{ | |
| display: block; | |
| min-width: 160px; /* not leave */ | |
| text-decoration:none; | |
| } | |
| .sub-nav { | |
| display: none; | |
| position: absolute; | |
| min-width: 160px; /* not leave */ | |
| } | |
| .sub-nav li{ | |
| float: none; /* work well when this property is not. But write to make sure */ | |
| background: #DDD; | |
| } | |
| /* ------------------------------------------------------------------- | |
| clearfix | |
| ------------------------------------------------------------------- */ | |
| .clearfix:after { | |
| content: "."; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden; | |
| } | |
| .clearfix { | |
| display: inline-table; | |
| min-height: 1%; | |
| } | |
| /* Hides from -mac \*/ | |
| * html .clearfix {height: 1%;} | |
| .clearfix {display: block;} | |
| /* End hide from -mac */ |