jquery一个简单的菜单小插件

最新推荐文章于 2025-12-20 12:23:55 发布

转载最新推荐文章于 2025-12-20 12:23:55 发布 · 65 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dangou/p/5354529.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML、CSS和jQuery封装菜单插件的方法，包括浮动一级菜单、二级菜单显示隐藏效果，以及如何通过自定义的menu.js实现鼠标悬停交互。

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

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>

View Code

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: 0;
            padding: 0;
            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()方法