index.html
<!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>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jquery.nav.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<ul class="list">
<li>导航列表
<ul class="nav">
<li>导航列表1</li>
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
</ul>
</li>
<li>导航列表
<ul class="nav">
<li>导航列表2</li>
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
</ul>
</li>
<li>导航列表
<ul class="nav">
<li>导航列表3</li>
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
</ul>
</li>
<li>导航列表
<ul class="nav">
<li>导航列表4</li>
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
</ul>
</li>
<li>导航列表
<ul class="nav">
<li>导航列表5</li>
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
</ul>
</li>
</ul>
<br /><br/>
<ul class="list">
<li>导航列表
<ul class="nav">
<li>导航列表1</li>
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
</ul>
</li>
<li>导航列表
<ul class="nav">
<li>导航列表2</li>
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
<li>导航列表</li>
</ul>
</li>
</ul>
</body>
</html>
?
style.css
/* CSS Document */
.list{
list-style:none;
padding:0;
font-size:13px;
color:#fff;
width:500px;
margin:50px auto;
}
.list li{
float:left;
width:100px;
height:30px;
line-height:30px;
text-align:center;
cursor:pointer;
background:#333;
}
?
demo.js
$(function(){
/*
$(‘.nav‘).css({
‘list-style‘:‘none‘,
‘margin‘:0,
‘padding‘:0,
‘display‘:‘none‘
});
$(‘.nav‘).parent().hover(function(){
$(this).find(‘.nav‘).slideDown(‘normal‘);
},function(){
$(this).find(‘.nav‘).stop().slideUp(‘normal‘);
});
*/
$(‘.list‘).eq(0).nav(‘orange‘);
$(‘.list‘).eq(1).nav(‘red‘);
});
?
jquery.nav.js
// JavaScript Document
;(function($){
$.fn.extend({
‘nav‘:function(color){
$(this).find(‘.nav‘).css({
‘list-style‘:‘none‘,
‘margin‘:0,
‘padding‘:0,
‘display‘:‘none‘,
‘color‘:color
});
$(this).find(‘.nav‘).parent().hover(function(){
$(this).find(‘.nav‘).slideDown(‘normal‘);
},function(){
$(this).find(‘.nav‘).stop().slideUp(‘normal‘);
});
return this;
}
});
})(jQuery);
?
效果图：
?
?
?
?
原文：http://onestopweb.iteye.com/blog/2228290