簡単なドロップダウンメニュー
5303 ワード
簡単なjqueryドロップダウンコンポーネントが見つからないか、互換性が悪いか、スタイルのカスタマイズが複雑ではありません.いっそ自分で時間をかけて作った.
IE 8、Chrome、Firefoxでテストしても問題なく、hoverとclickモードをサポートします.
IE 8、Chrome、Firefoxでテストしても問題なく、hoverとclickモードをサポートします.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>menu demo</title>
<script type="text/javascript" src="../../jquery.min.js"></script>
</head>
<style>
.my-menu {
display: inline-block;
}
.my-menu:hover {
background-color: #EEE;
}
.menu-anchor {
font-size: 14px;
padding: 5px;
cursor: pointer;
}
.menu-arrow-down {
width: 0;
height: 0;
margin-left: 3px;
display: inline-block;
vertical-align: middle;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #999;
}
.menu-content {
position: relative;
display: none;
}
.menu-inner-content {
position: absolute;
background-color: white;
top: 0px;
left: 0px;
z-index: 10000;
border: 1px solid #EEE;
border-radius: 4px;
box-shadow: 0px 6px 12px #EEE;
}
.menu-inner-content ul {
list-style: none;
margin: 0px;
padding: 0px;
min-width: 100px;
}
.menu-inner-content ul li a {
padding: 4px 8px;
line-height: 25px;
text-decoration: none;
display: block;
color: #333;
}
.menu-inner-content ul li a:hover {
background-color: #EFEFEF;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//hover mode
$('.my-menu').mouseover(function(event) {
var content = $(this).find('.menu-content');
content.show();
}).mouseout(function(event) {
var content = $(this).find('.menu-content');
content.hide();
});
//click mode
/*
$('.my-menu').click(function(event) {
var self = $(this);
var anchor = self.find('.menu-anchor');
var content = self.find('.menu-content');
var source = event.target;
if (content.is(":visible") && !$.contains(content.get(0), source)) {
content.hide();
return;
}
content.show();
var handler = function(event) {
var source = event.target;
if (!$.contains(self.get(0), source)) {
content.hide();
$(document).unbind('click', handler);
}
};
$(document).bind('click', handler);
});*/
});
</script>
<body>
<div class="my-menu">
<div class="menu-anchor">
<span>my space</span>
<span class="menu-arrow-down"></span>
</div>
<div class="menu-content-wrapper">
<div class="menu-content">
<div class="menu-inner-content">
<ul>
<li><a href="#">menu item1</a>
</li>
<li><a href="#">menu item1</a>
</li>
<li><a href="#">menu item1</a>
</li>
<li><a href="#">menu item1</a>
</li>
<li><a href="#">menu item1</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="my-menu">
<div class="menu-anchor">
<span>sign up</span>
<span class="menu-arrow-down"></span>
</div>
<div class="menu-content-wrapper">
<div class="menu-content">
<div class="menu-inner-content">
<div style="padding:10px">
user name: <input type="text" />
password: <input type="text" />
<input type="button" value="register"/></div>
</div>
</div>
</div>
</div>
</body>
</html>