使用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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 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自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
filemanage功能中用到的common.js
2007/04/08 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
Python命令行解析模块详解
2018/02/01 Python
详解Django中间件执行顺序
2018/07/16 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Python守护进程实现过程详解
2020/02/10 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
pandas实现导出数据的四种方式
2020/12/13 Python
师范生自荐信
2013/10/27 职场文书
岗位安全生产责任书
2014/07/28 职场文书
银行竞聘报告范文
2014/11/06 职场文书
少先队中队工作总结
2015/08/14 职场文书
解决Redis启动警告问题
2022/02/24 Redis