为什么80%的码农都做不了架构师？>>>   

该文章属于原创：转载注明出处：http://www.pm-road.com/index.php/2014/12/09/276/

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;background-color: white;border:1px solid white;
}
.redcolor{background-color: #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实现下拉菜单