Skip to content

Instantly share code, notes, and snippets.

@s-hiroshi s-hiroshi/README.md
Last active Apr 27, 2018

Embed
What would you like to do?
jQuery > snippet > dropdown

Condition

gte IE 8 and firefox, chrome, safari, opera latest version

Usage

<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>

memo

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 */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.