jQuery仿google导航栏"更多" 菜单
html代码:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="gmenu.js"></script>
</head>
<body>
<div class="top_nav_left">
<ul>
<li>
<a class="s">More<span class="arrow"></span></a>
<ul id="s">
<li><a href="#">Plugins and jQuery Examples</a></li>
<li><a href="#">Prototype Examples</a></li>
<li><a href="#">Mootools Examples</a></li>
<li><a href="#">Javascript Examples</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
css代码:
body{
padding:0;
margin:0;
}
.top_nav_left{
font: 13px/27px Arial,sans-serif;
color:#FFFFFF;
height:30px;
background: black;
}
.top_nav_left a:hover{
background-color:#4C4C4C;
color:#FFFFFF;
}
.top_nav_left a{
text-decoration: none;
padding: 6px 8px 7px;
color:white;
outline:none;
cursor: pointer;
}
.top_nav_left ul{
list-style: none;
margin:0;
padding:0 0 0 10px;
}
.top_nav_left ul li{
padding:0;
float:left;
}
.top_nav_left ul li ul li{
padding:0;
float:none;
margin: 0 0 0 0px;
width:100%;
}
.top_nav_left ul li ul{
position: absolute;
border: 1px solid #C3D1EC;
box-shadow: 0 1px 5px #CCCCCC;
margin-top: -1px;
display:none;
padding: 0px 16px 0px 0;
}
.top_nav_left .active ul{
display:block !important;
}
.top_nav_left .active a{
background-color: white;
border: 1px solid #C3D1EC;
border-bottom: 0;
box-shadow: 0 -1px 5px #CCCCCC;
display: block;
height: 29px;
padding: 0 8px 0 8px;
position:relative;
z-index: 1;
color:#3366CC;
}
.top_nav_left .active a:hover{
background-color:white;
}
.top_nav_left .active ul a:hover{
background-color:#e4ebf8;
}
.top_nav_left .active ul a{
border: 0 !important;
box-shadow: 0 0 0 #CCCCCC;
border:0;
width: 100%;
}
.top_nav_left .arrow {
border-color: white transparent transparent;
border-style: solid dashed dashed;
margin-left: 5px;
position: relative;
top: 10px;
}
js代码
(function($) {
$.fn.fixedMenu = function() {
return this.each(function() {
var menu = $(this);
menu.find('ul li > a').bind('click', function() {
if (menu.find('li:first').hasClass('active')) {
menu.find('li:first').removeClass('active');
}
else {
menu.find('li:first').addClass('active');
}
})
});
}
})(jQuery);
var obj=document.getElementById('s');
function hide(){
obj.style.display='none';
}
function show(){
obj.style.display='block'
}
$('document').ready(function(){
$('.top_nav_left').fixedMenu();
$(':not(body)').click(function(e){
if(!$(e.target).is('div.top_nav_left *')){
var menu = $('.top_nav_left');
menu.find('li:first').removeClass('active');
}
return false;
})
});
效果图:
