Skip to content

Instantly share code, notes, and snippets.

@aisuii

aisuii/gist:1367424

Created November 15, 2011 15:58
Show Gist options
  • Save aisuii/1367424 to your computer and use it in GitHub Desktop.
Save aisuii/1367424 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<html>
<head>
<title>test dropdown</title>
<style type="text/css">
h1 {
padding: 5px 10px;
background: #efefef;
}
.click_area {
border: 1px solid #ccc;
padding: 5px;
cursor: pointer;
}
.menu {
width: 500px;
}
.menu-list {
width: 500px;
z-index: 9999;
position: absolute;
display: none;
list-style: none;
margin: 0;
padding: 0;
}
.menu-list li a {
padding: 5px 10px;
text-align: center;
display: block;
background: #efefef;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<h1>title</h1>
<div class="menu">
<div class="click_area">click here</div>
<ul class="menu-list">
<li><a href="http://www.google.co.jp">google</a></li>
<li><a href="http://www.google.co.jp">google</a></li>
<li><a href="http://www.google.co.jp">google</a></li>
<li><a href="http://www.google.co.jp">google</a></li>
<li><a href="http://www.google.co.jp">google</a></li>
</ul>
</div>
<p>ttexttexttexttexttexttexttexttexttexttextext</p>
<script type="text/javascript">
$('.click_area').click(function(){
var $visible = $('.menu-list:visible'),
$hidden = $('.menu-list:hidden');
$visible.hide();
$hidden.show();
})
$(document).click(function(e){
if( !$(e.target).parents().hasClass('menu') ) {
$('.menu-list:visible').hide();
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment