使用框架简单实现下拉菜单

框架是一个轻量的框架，个人认为非常好用，今天就写一个非常简单的例子，实现下拉菜单功能；

首先肯定要在页面引用jquery.js版本不限；

接下来把======================html贴出来：

复制代码代码如下： div class=" header _ menu " ul Li class=" menu Li " id=" xtgl _ menu "系统管理/Li Li class=" menu Li " id=" ggsq _ menu "干管所勤/Li Li class=" menu Li " id=" bhz _ menu "保护站/Li Li class=" menu Li " id=" mcjy _ menu "木材检验/li li class="menuli" id="叹息_菜单"森林管护/Li/ul/div class=" display move div " id="叹息_菜单_div " ul li class="redli "出勤管理/li li class="redli "巡视管理/li li class="redli "现场取证/li li class="redli "问题处置/Li/ul/div class=" display move div " id=" mcjy _ menu _ div " ul Li class=" redli "位置监测/li li class="redli "检验管理/Li/ul/div class=" display move div " id=" bhz _ menu _ div " ul Li class=" redli "出勤管理/li li class="redli "监管信息/Li/ul/div class=" display move div " id=" ggsq _ menu _ div " ul Li class=" redli "出勤管理/li li class="redli "监管信息/Li/ul/div class=" display move div " id=" xtgl _ menu _ div " ul Li class=" redli "权限管理/li li class="redli "设备管理/Li/ul/分区

========================css样式：复制代码代码如下：/**头部菜单**/.header _ menu {浮动：右宽度： 50%;高度： 100%;光标：指针；} .header _ menu ul { list-style :无；高度： 100%;} .标题菜单ul li{右侧浮动：宽度： 20%;颜色：白色；font-size :14 px衬垫-top : 55px；字体粗细：粗体；} .显示{ display:无}。显示ul {列表式：无；宽度： 100像素；} .显示ul Li { padding-top :10 px；衬垫-底部： 5px左衬垫：5 px光标：指针；font-size : 14px} .movediv{ position:固定；left : 0pxtop :0 pxfont-size : 14px；白色；border:1px纯白色；} .红色{ # a0c 9 e 6；}

==========================js脚本复制代码代码如下：$(function() { //菜单绑定事件initMenuListener()；//下拉菜单绑定事件initsubmenushover()；//下拉菜单颜色改变initsubmenuliover })；/** * 头部菜单绑定滑过事件*/function initMenuListener() { $(").门努利")。hover(function(){ var hideDivId=$(this)).attr(" id ")" _ div "；//得到菜单的位置var left=$(this).偏移量()。向左；var top=$(this).偏移量()。顶部；var height=$(this).outhealth()；//外部高度是获取高度，包括内边距，高度是也是获取高度，不过只包括文本高度$(“#”hideDivId).show()；$(“#”hideDivId).css("左",左);$(“#”hideDivId).css("顶部",顶部高度);}，function() { //将原来的菜单隐藏$(".显示")。hide()；});} /** * 下拉菜单绑定事件*/function initsubmenushover(){ $(").显示")。悬停(function() { $(this)).show()；}，function() { $(this).hide()；});} /** * 下拉菜单改变颜色*/function initSubMenuLiHover(){ $(").雷德利).悬停(function() { $(this)).addCLaSS("红色")；}，function() { $(this).移除CLaSS("红色")；});}

效果如下

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