今天带来的是 jquery的自定义导航插件,jquery因为方便使用学习率低 所以被广大前端小伙伴所喜欢

所以给大家带来一个插件的封装

大体就这样

<ul class="nav">

<li><a href="*">首页</a>

<ul class="list">

<li><a href="#">活动</a></li>

<li><a href="#">下载</a></li>

<li><a href="#">次数</a></li>

<li><a href="#">周边</a></li>

</ul>

</li>

<li><a href="*">财富热销</a>

<ul class="list">

<li><a href="#">活动</a></li>

<li><a href="#">下载</a></li>

<li><a href="#">次数</a></li>

<li><a href="#">周边</a></li>

</ul>

</li>

<li><a href="*">注册</a>

<ul class="list">

<li><a href="#">活动</a></li>

<li><a href="#">下载</a></li>

<li><a href="#">次数</a></li>

<li><a href="#">周边</a></li>

</ul>

</li>

<li><a href="*">登录</a>

<ul class="list">

<li><a href="#">活动</a></li>

<li><a href="#">下载</a></li>

<li><a href="#">次数</a></li>

<li><a href="#">周边</a></li>

</ul>

</li>

<li><a href="*">关于</a>

<ul class="list">

<li><a href="#">活动</a></li>

<li><a href="#">下载</a></li>

<li><a href="#">次数</a></li>

<li><a href="#">周边</a></li>

</ul>

</li>

</ul>

html结构很容易 ul>li>ul 外面一个大的ul里面li嵌套一组ul

下面看css样式

<style type="text/css">

*{ margin: 0;padding: 0; }

a{text-decoration:none;color: white;}

li{list-style: none;}

.nav{background: black;width: 500px;margin: 50px auto; }

.nav li{float: left;width: 20%; line-height: 30px;text-align: center;background: #333333;cursor: pointer;}

.list li{width: 100%;}

</style>

下面是jq的代码

;(function($){

$.extend({

'list':function(r){

$('.list').css({

'list-type':'none',

'display':'none',

});

$('.list').parent().hover(function(){//查找上一级的父元素

$(this).find('.list').slideDown('normal');//这个li的下一级 显示出来

},function(){

$(this).stop().find('.list').slideUp('normal');

})

}

})

})(jQuery);//全局

移动上去会有上滑下滑的效果

<script>

$(function(){

$.list();

});//全部

</script>

最后调用下