jquery一个简单的菜单小插件

刚学会封装插件，先来封装一个小的菜单插件

html部分

   <ul class="zong">

        <li class="yiji">

            <a href="#">公司信息</a>

            <ul class="fji">

                <li>itme 1</li>

                <li>itme 1</li>

                <li>itme 1</li>

                <li>itme 1</li>

            </ul>

        </li>

        <li class="yiji">

            <a href="#">公司简介</a>

            <ul class="fji">

                <li>itme 1</li>

                <li>itme 2</li>

                <li>itme3</li>

                <li>itme 4</li>

            </ul>

        </li>

        <li class="yiji">

            <a href="#">公司发展</a>

            <ul class="fji">

                <li>itme 1</li>

                <li>itme 2</li>

                <li>itme3</li>

                <li>itme 4</li>

            </ul>

        </li>

        <li class="yiji">

            <a href="#">公司发展</a>

        </li>

    </ul>

css 部分

   .zong>li{

            float: left;

            margin: 20px 10px auto auto;

            background-color: powderblue;

            width: 120px;

            text-align: center;

            height: 30px;

            line-height: 30px;

        }

        ul{

            margin:;

            padding:;

            list-style: none;

        }

        a{ text-decoration: none;color: #000000}

        .zong>li>ul>li{ background-color: #ccc;}

        .zong>li>ul>li:hover{

            margin: 1px;

            -webkit-transition:all 0.3s;

        }

        .fji{

            display: none;

        }

js部分除了要引入的jquery文件之外引入自定义的menu.js

menu.js

$.fn.extend({

    yidong:function(){

       $(this).on({

           "mouseenter":function(){

           $(this).find("ul").css("display","block"); },

            "mouseleave": function () {

                $(this).find("ul").css("display","none");

            }

       });

    }

});

使用方式,在页面中直接调用yidong()方法

 $(".yiji").yidong();

巴特西

jquery一个简单的菜单小插件

最新文章

热门文章