jquery 实现下拉菜单

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

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

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

1. <div class=”header_menu”>
2. <ul>
3. <li class=”menuli” id=”xtgl_menu”>系统管理</li>
4. <li class=”menuli” id=”ggsq_menu”>干管所勤</li>
5. <li class=”menuli” id=”bhz_menu”>保护站</li>
6. <li class=”menuli” id=”mcjy_menu”>木材检验</li>
7. <li class=”menuli” id=”slgh_menu”>森林管护</li>
8. </ul>
9. </div>
10. <div class=”display movediv” id=”slgh_menu_div”>
11. <ul>
12. <li class=”redli”>出勤管理</li>
13. <li class=”redli”>巡视管理</li>
14. <li class=”redli”>现场取证</li>
15. <li class=”redli”>问题处置</li>
16. </ul>
17. </div>
18. <div class=”display movediv” id=”mcjy_menu_div”>
19. <ul>
20. <li class=”redli”>位置监测</li>
21. <li class=”redli”>检验管理</li>
22. </ul>
23. </div>
24. <div class=”display movediv” id=”bhz_menu_div”>
25. <ul>
26. <li class=”redli”>出勤管理</li>
27. <li class=”redli”>监管信息</li>
28. </ul>
29. </div>
30. <div class=”display movediv” id=”ggsq_menu_div”>
31. <ul>
32. <li class=”redli”>出勤管理</li>
33. <li class=”redli”>监管信息</li>
34. </ul>
35. </div>
36. <div class=”display movediv” id=”xtgl_menu_div”>
37. <ul>
38. <li class=”redli”>权限管理</li>
39. <li class=”redli”>设备管理</li>
40. </ul>
41. </div>

===========================css样式：

1. /**头部菜单**/
2. .header_menu{
3. float:right;
4. width: 50%;
5. height: 100%;
6. cursor: pointer;
7. }
8. .header_menu ul{
9. list-style: none;
10. height: 100%;
11. }
12. .header_menu ul li{
13. float: right;
14. width: 20%;
15. color:white;
16. font-size:14px;
17. padding-top: 55px;
18. font-weight: bold;
19. }
20. .display{
21. display: none;
22. }
23. .display ul{
24. list-style: none;
25. width: 100px;
26. }
27. .display ul li{
28. padding-top:10px;
29. padding-bottom: 5px;
30. padding-left:5px;
31. cursor: pointer;
32. font-size: 14px;
33. }
34. .movediv{
35. position: fixed;
36. left: 0px;
37. top:0px;
38. font-size: 14px;
39. white;
40. border:1px solid white;
41. }
42. .redcolor{
43. #a0c9e6;
44. }

=======================js脚本

1. $(function() {
2. // 菜单绑定事件
3. initMenuListener();
4. // 下拉菜单绑定事件
5. initSubMenuHover();
6. // 下拉菜单颜色改变
7. initSubMenuLiHover();
8. });
9. /**
10. * 头部菜单绑定滑过事件
11. */
12. function initMenuListener() {
13. $(“.menuli”).hover(function() {
14. var hideDivId = $(this).attr(“id”) + “_div”;
15. // 得到菜单的位置
16. var left = $(this).offset().left;
17. var top = $(this).offset().top;
18. var height = $(this).outerHeight();//outerHeight是获取高度，包括内边距，height是也是获取高度，不过只包括文本高度
19. $(“#” + hideDivId).show();
20. $(“#” + hideDivId).css(“left”, left);
21. $(“#” + hideDivId).css(“top”, top + height);
22. }, function() {
23. // 将原来的菜单隐藏
24. $(“.display”).hide();
25. });
26. }
27. /**
28. * 下拉菜单绑定事件
29. */
30. function initSubMenuHover() {
31. $(“.display”).hover(function() {
32. $(this).show();
33. }, function() {
34. $(this).hide();
35. });
36. }
37. /**
38. *  下拉菜单改变颜色
39. */
40. function initSubMenuLiHover() {
41. $(“.redli”).hover(function() {
42. $(this).addClass(“redcolor”);
43. }, function() {
44. $(this).removeClass(“redcolor”);
45. });
46. }

效果如下：

jquery实现下拉菜单