zoukankan      html  css  js  c++  java
  • 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>
    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()方法

     $(".yiji").yidong();
  • 相关阅读:
    Know more about RAC statistics and wait event
    再谈指针
    Manageing Undo Data
    SQL基础内容
    JavaScript高级程序设计(3版)笔记分享( ES5特性)
    HTML5布局篇( 总结 )
    温习 SQL 01(Z)
    Makefile
    SQLPLUS工具简介
    链接相关 & 预处理
  • 原文地址:https://www.cnblogs.com/dangou/p/5354529.html
Copyright © 2011-2022 走看看