以下是 jQuery下拉滑动切换导航条特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html >
<head>
<meta charset="gb2312">
<title>jQuery下拉滑动切换导航条</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>jQuery下拉滑动切换导航条</h1>
<nav>
<ul class="dropdown">
<li class="drop"><a href="#">Home</a>
<ul class="sub_menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
<li><a href="#">Consectetur </a></li>
<li><a href="#">Duis</a></li>
<li><a href="#">Sed</a></li>
<li><a href="#">Natus</a></li>
<li><a href="#">Excepteur</a></li>
<li><a href="#">Voluptas</a></li>
<li><a href="#">Voluptate</a></li>
<li><a href="#">Malorum</a></li>
<li><a href="#">Bonorum</a></li>
<li><a href="#">Nemo</a></li>
<li><a href="#">Quisquam</a></li>
<li><a href="#">Adipisci </a></li>
<li><a href="#">Excepteur</a></li>
<li><a href="#">Consectetur </a></li>
<li><a href="#">Duis</a></li>
<li><a href="#">Voluptate</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
</ul>
</li>
<li class="drop"><a href="#">Ipsum</a>
<ul class="sub_menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
<li><a href="#">Consectetur </a></li>
<li><a href="#">Duis</a></li>
<li><a href="#">Sed</a></li>
<li><a href="#">Natus</a></li>
<li><a href="#">Excepteur</a></li>
<li><a href="#">Voluptas</a></li>
<li><a href="#">Voluptate</a></li>
<li><a href="#">Malorum</a></li>
<li><a href="#">Bonorum</a></li>
<li><a href="#">Nemo</a></li>
<li><a href="#">Quisquam</a></li>
</ul>
</li>
<li class="drop"><a href="#">jQuery特效</a>
<ul class="sub_menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
<li><a href="#">Consectetur </a></li>
</ul>
</li>
<li><a href="#">CSS3代码</a>
</li>
</ul>
</nav>
<script src='js/jquery-1.8.3.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
JS代码(index.js):
/*** Credits to http://css-tricks.com/long-dropdowns-solution/**/
var maxHeight = 400;
$(function(){
$(".dropdown > li").hover(function(){
var $container = $(this),$list = $container.find("ul"),$anchor = $container.find("a"),height = $list.height() * 1.1,// make sure there is enough room at the bottom multiplier = height / maxHeight;
// needs to move faster if list is taller // need to save height here so it can revert on mouseout $container.data("origHeight",$container.height());
// so it can retain it's rollover color all the while the dropdown is open $anchor.addClass("hover");
// make sure dropdown appears directly below parent list item $list .show() .css({
paddingTop:$container.data("origHeight")}
);
// don't do any animation if list shorter than max if (multiplier > 1){
$container .css({
height:maxHeight,overflow:"hidden"}
) .mousemove(function(e){
var offset = $container.offset();
var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
if (relativeY > $container.data("origHeight")){
$list.css("top",-relativeY + $container.data("origHeight"));
}
;
}
);
}
}
,function(){
var $el = $(this);
// put things back to normal $el .height($(this).data("origHeight")) .find("ul") .css({
top:0}
) .hide() .end() .find("a") .removeClass("hover");
}
);
}
);
CSS代码(style.css):
body{margin:0px;padding:0px;background:#e74c3c;font-family:'Lato',sans-serif;}
h1{margin:2em 0px;padding:0px;color:#fff;text-align:center;font-weight:100;font-size:50px;}
nav{width:750px;margin:1em auto;}
ul{margin:0px;padding:0px;list-style:none;}
ul.dropdown{position:relative;width:100%;}
ul.dropdown li{font-weight:bold;float:left;width:180px;position:relative;background:#ecf0f1;}
ul.dropdown a:hover{color:#000;}
ul.dropdown li a{display:block;padding:20px 8px;color:#34495e;position:relative;z-index:2000;text-align:center;text-decoration:none;font-weight:300;}
ul.dropdown li a:hover,ul.dropdown li a.hover{background:#3498db;position:relative;color:#fff;}
ul.dropdown ul{display:none;position:absolute;top:0;left:0;width:180px;z-index:1000;}
ul.dropdown ul li{font-weight:normal;background:#f6f6f6;color:#000;border-bottom:1px solid #ccc;}
ul.dropdown ul li a{display:block;color:#34495e !important;background:#eee !important;}
ul.dropdown ul li a:hover{display:block;background:#3498db !important;color:#fff !important;}
.drop > a{position:relative;}
.drop > a:after{content:"";position:absolute;right:10px;top:40%;border-left:5px solid transparent;border-top:5px solid #333;border-right:5px solid transparent;z-index:999;}
.drop > a:hover:after{content:"";border-left:5px solid transparent;border-top:5px solid #fff;border-right:5px solid transparent;}
分享到QQ
分享到微博
微信扫一扫
