使用jquery 简单实现下拉菜单


Posted in Javascript onJanuary 14, 2015

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”);  

    });  

} 

效果如下:
使用jquery 简单实现下拉菜单

小伙伴们使用的时候自己美化下,自由扩展下就可以用到自己的项目中了,我这里仅仅是简单做了点样式而已。

Javascript 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
Vue-router 中hash模式和history模式的区别
Jul 24 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 #Javascript
js实现禁止中文输入的方法
Jan 14 #Javascript
JavaScript 学习笔记之语句
Jan 14 #Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 #Javascript
JavaScript 学习笔记之操作符
Jan 14 #Javascript
Node.js的包详细介绍
Jan 14 #Javascript
JavaScript 学习笔记之数据类型
Jan 14 #Javascript
You might like
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
JS表的模拟方法
2015/02/05 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
React组件的三种写法总结
2017/01/12 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python中bisect模块用法实例
2014/09/25 Python
Python脚本实现下载合并SAE日志
2015/02/10 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python中super函数用法实例分析
2019/03/18 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
python实现简单银行管理系统
2019/10/25 Python
python 一维二维插值实例
2020/04/22 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
员工保密协议书
2014/09/27 职场文书
工厂标语大全
2014/10/06 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
工厂员工辞职信范文
2015/05/12 职场文书