今天带来的是 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>

最后调用下