以下是 可调整导航大小的jQuery特效特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Resizing navigation menu with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Self-resizing navigation menu with jQuery" />
<meta name="keywords" content="jquery, fancy, navigation, menu" />
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
<link rel="stylesheet" href="css/menu1.css" type="text/css" charset="utf-8"/>
</head>
<body>
<div class="content">
<h3>Home</h3>
<div class="codropsmenu1" id="menu">
<ul>
<li><a href="" class="first"><span>Home</span></a></li>
<li><a href=""><span>About</span></a></li>
<li><a href=""><span>Portfolio</span></a></li>
<li><a href=""><span>Contact</span></a></li>
<li><a href=""><span>Support</span></a></li>
<li><a href="" class="last"><span>Login</span></a></li>
</ul>
</div>
<div class="descr">
<p>The item width of this navigation gets calculated automatically, all you need to
provide is the width of the surrounding container. </p>
<p>The container has a padding of 3px, so when inserting a width, consider the 6 additional pixels
from the sides.</p>
<p>The absolute height of the menu is 36px (30px + 3px padding from top and bottom).</p>
</div>
<h3>Click to change the width:</h3>
<p id="buttons">
<input type="button" value="400"/>
<input type="button" value="500"/>
<input type="button" value="600"/>
<input type="button" value="700"/>
<input type="button" value="800"/>
<input type="button" value="900"/>
</p>
<p class="back"><a href="#">Back to Codrops</a></p>
</div>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
changeWidth(500);
$('#buttons input').click(function(){
changeWidth($(this).val());
});
function changeWidth(menuWidth){
var menuItems = $('#menu li').size();
var itemWidth = (menuWidth/menuItems)-2;
$('#menu').css({'width': menuWidth +'px'});
$('#menu a').css({'width': itemWidth +'px'});
}
});
</script>
</body>
</html>
CSS代码(menu1.css):
.codropsmenu1{padding:3px;height:30px;background-color:#282828;}
.codropsmenu1 ul{list-style:none;margin:0px;padding:0px;}
.codropsmenu1 ul li{display:inline;position:relative;}
.codropsmenu1 ul li a{float:left;height:28px;line-height:30px;text-align:center;text-decoration:none;display:block;background-color:#282828;font-size:12px;color:#DDDFDF;text-shadow:0 1px 0 #000000;border-right:1px solid #000;border-left:1px solid #404040;border-top:1px solid #282828;border-bottom:1px solid #282828;outline:none;cursor:pointer;overflow:hidden;}
.codropsmenu1 ul li a.last{border-right:1px solid #282828;}
.codropsmenu1 ul li a.first{border-left:1px solid #282828;}
.codropsmenu1 ul li a:hover,.codropsmenu1 ul li a.selected{background-color:#404040;border-top:1px solid #111;border-bottom:1px solid #111;color:#fff;}
CSS代码(style.css):
body{margin:0px;padding:0px;font-family:Arial;background-color:#E4E4FF;}
.content{width:1000px;margin:30px auto;padding:20px;}
.descr{margin:30px auto;border:3px solid #222;padding:20px;-moz-border-radius:20px;-webkit-border-radius:20px;-khtml-border-radius:20px;background-color:#fff;}
input[type=button]{display:inline-block;padding:5px 5px 6px;color:#fff;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);text-shadow:0 -1px 1px rgba(0,0,0,0.25);border-bottom:1px solid rgba(0,0,0,0.25);position:relative;cursor:pointer;float:left;font-size:18px;line-height:18px;font-weight:bold;margin-left:20px;background-color:#000;font-weight:normal;border:2px solid #fff;outline:none;}
input[type=button]:hover{background-color:#404040;}
input[type=button]:active{margin-top:2px;}
.back{position:absolute;top:10px;right:10px;}
.back a{font-weight:bold;color:#000;text-decoration:none;}
.back a:hover{color:#fff;}
分享到QQ
分享到微博
微信扫一扫
