jQueryダイナミックナビゲーションプラグイン、上下左右切替可能
7889 ワード
jqueryダイナミックナビゲーションプラグインは、上下左右に切り替えることができ、html構造とスタイルと動作が完全に分離され、通常のナビゲーションのように追加のラベルを追加する必要はありません.注意:ulラベルには必ずclassスタイルnavを付けてください.このスタイルは、背景画像を追加して高さや幅を変えるなど、実際の状況に応じて変更できます.もし.navスタイルが既存のスタイルと競合している場合は、他の名前に変更してください.
http://www.codefans.net/jscss/code/2960.shtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
<!--
body, td, th {
font-size: 14px;
background-color:#FFF
}
h1{border-bottom:1px solid #999; margin:50px 60px;}
/* ， */
* {
margin:0;
padding:0
}
.nav {
width:980px;
height:30px;
left:50%;
margin-left:-490px;
list-style:none;
position:relative;
}
.nav li {
display:inline-block;
margin:0 3px;
position:relative;
overflow:hidden;
height:30px; /* a */
float:left;
}
.nav li span {
display:inline-block;
overflow:hidden
}
.nav li a {
text-decoration:none;
outline:none;
color:#666;
display:inline-block;
padding:0 10px;
text-align:center;
background-color: #E1E1E1;
font-weight:bold;
height:30px;
line-height:30px;
}
/* */
.nav li a.over {
background-color:#666;
color:#FFF
}
-->
</style>
<script type=text/javascript src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.dynamicNav=function(options){
//
var defaults = {
direction:"up", // ， 4 up 、down 、left 、right
duration:100 // ("slow", "normal", or "fast") ( ：1000)
};
//
var opts = $.extend(defaults, options);
this.each(function(){
var navList=$(this).find("li"),
navLink=navList.find("a");
// a span
navList.wrapInner("<span></span>");
var span=navLink.parent();
//
if(opts.direction=="up" || opts.direction=="down"){
var v=true;
}
// span a
if(opts.direction=="right" || opts.direction=="down"){
var restSpan=true;
}
navLink.each(function(){
// a
var w=$(this).outerWidth(),
p=$(this).parent();
// a
$(this).clone().appendTo(p).addClass("over");
//
if(v){
p.css("width",w);
}else{
p.css("width",2*w).parent().css("width",w);
}
});
// ， span a
if(restSpan){
span.each(function(){
if(opts.direction=="right"){
$(this).css({"margin-left":-$(this).outerWidth()/2});
}
if(opts.direction=="down"){
$(this).css({"margin-top" : -$(this).outerHeight()/2});
}
$(this)
.find('a')
.last()
.removeClass("over")
.prev()
.addClass("over");
});
}
//
function over(o){
o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.duration);
}
//
function out(o){
o.animate(v?{"margin-top":0}:{"margin-left": 0}, opts.duration);
}
//
span.hover(function(){
restSpan ? out($(this)) : over($(this));
},function(){
restSpan ? over($(this)) : out($(this));
});
});
};
})(jQuery);
$(function(){
//
$("#nav1").dynamicNav({
direction:"left", // ， 4 up 、down 、left 、right
duration:300 // ("slow", "normal", or "fast") ( ：1000)
});
//
$("#nav2").dynamicNav({
direction:"right",
duration:200
});
//
$("#nav3").dynamicNav({
direction:"up",
duration:100
});
//
$("#nav4").dynamicNav({
direction:"down",
duration:400
});
});
</script>
</head>
<body>
<h1> （ 300 ）</h1>
<ul class="nav" id="nav1">
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> / </a></li>
<li><a href="#"> </a></li>
</ul>
<h1> （ 200 ）</h1>
<ul class="nav" id="nav2">
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> / </a></li>
<li><a href="#"> </a></li>
</ul>
<h1> （ 100 ）</h1>
<ul class="nav" id="nav3">
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> / </a></li>
<li><a href="#"> </a></li>
</ul>
<h1> （ 400 ）</h1>
<ul class="nav" id="nav4">
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> / </a></li>
<li><a href="#"> </a></li>
</ul>
</body>
</html>
http://www.codefans.net/jscss/code/2960.shtml