网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 使用jquery 简单实现下拉菜单
范文
    Jquery 是一个轻量的框架，个人认为非常好用，今天就写一个非常简单的例子，实现下拉菜单功能；
    首先肯定要在页面引用jquery.js 版本不限 ；
    接下来把=====================html贴出来：
    代码如下:
    <div class=”header_menu”>
    <ul>
    <li class=”menuli” id=”xtgl_menu”>系统管理</li>
    <li class=”menuli” id=”ggsq_menu”>干管所勤</li>
    <li class=”menuli” id=”bhz_menu”>保护站</li>
    <li class=”menuli” id=”mcjy_menu”>木材检验</li>
    <li class=”menuli” id=”slgh_menu”>森林管护</li>
    </ul>
    </div>
    <div class=”display movediv” id=”slgh_menu_div”>
    <ul>
    <li class=”redli”>出勤管理</li>
    <li class=”redli”>巡视管理</li>
    <li class=”redli”>现场取证</li>
    <li class=”redli”>问题处置</li>
    </ul>
    </div>
    <div class=”display movediv” id=”mcjy_menu_div”>
    <ul>
    <li class=”redli”>位置监测</li>
    <li class=”redli”>检验管理</li>
    </ul>
    </div>
    <div class=”display movediv” id=”bhz_menu_div”>
    <ul>
    <li class=”redli”>出勤管理</li>
    <li class=”redli”>监管信息</li>
    </ul>
    </div>
    <div class=”display movediv” id=”ggsq_menu_div”>
    <ul>
    <li class=”redli”>出勤管理</li>
    <li class=”redli”>监管信息</li>
    </ul>
    </div>
    <div class=”display movediv” id=”xtgl_menu_div”>
    <ul>
    <li class=”redli”>权限管理</li>
    <li class=”redli”>设备管理</li>
    </ul>
    </div>
    ===========================css样式：
    代码如下:
    /**头部菜单**/
    .header_menu{
    float:right;
    width: 50%;
    height: 100%;
    cursor: pointer;
    }
    .header_menu ul{
    list-style: none;
    height: 100%;
    }
    .header_menu ul li{
    float: right;
    width: 20%;
    color:white;
    font-size:14px;
    padding-top: 55px;
    font-weight: bold;
    }
    .display{
    display: none;
    }
    .display ul{
    list-style: none;
    width: 100px;
    }
    .display ul li{
    padding-top:10px;
    padding-bottom: 5px;
    padding-left:5px;
    cursor: pointer;
    font-size: 14px;
    }
    .movediv{
    position: fixed;
    left: 0px;
    top:0px;
    font-size: 14px;
    white;
    border:1px solid white;
    }
    .redcolor{
    #a0c9e6;
    }
    =======================js脚本
    代码如下:
    $(function() {
    // 菜单绑定事件
    initMenuListener();
    // 下拉菜单绑定事件
    initSubMenuHover();
    // 下拉菜单颜色改变
    initSubMenuLiHover();
    });
    /**
    * 头部菜单绑定滑过事件
    */
    function initMenuListener() {
    $(“.menuli”).hover(function() {
    var hideDivId = $(this).attr(“id”) + “_div”;
    // 得到菜单的位置
    var left = $(this).offset().left;
    var top = $(this).offset().top;
    var height = $(this).outerHeight();//outerHeight是获取高度，包括内边距，height是也是获取高度，不过只包括文本高度
    $(“#” + hideDivId).show();
    $(“#” + hideDivId).css(“left”, left);
    $(“#” + hideDivId).css(“top”, top + height);
    }, function() {
    // 将原来的菜单隐藏
    $(“.display”).hide();
    });
    }
    /**
    * 下拉菜单绑定事件
    */
    function initSubMenuHover() {
    $(“.display”).hover(function() {
    $(this).show();
    }, function() {
    $(this).hide();
    });
    }
    /**
    * 下拉菜单改变颜色
    */
    function initSubMenuLiHover() {
    $(“.redli”).hover(function() {
    $(this).addClass(“redcolor”);
    }, function() {
    $(this).removeClass(“redcolor”);
    });
    }
    效果如下：
    
    小伙伴们使用的时候自己美化下，自由扩展下就可以用到自己的项目中了，我这里仅仅是简单做了点样式而已。
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/20 18:15:04