Jquery implementation drop-down menu, jquery drop-down menu

Jquery implementation drop-down menu, jquery drop-down menu

Jquery is a lightweight framework that I personally think is very useful. Today I will write a very simple example to implement the drop-down menu function;

The jquery. js version must be referenced on the page;

Next, paste ================================ html:

 

Html code

1. <Div class = "header_menu">
2. <Ul>
3. <Li class = "menuli" id = "xtgl_menu"> system management </li>
4. <Li class = "menuli" id = "ggsq_menu"> Manager Office </li>
5. <Li class = "menuli" id = "bhz_menu"> Protection Station </li>
6. <Li class = "menuli" id = "mcjy_menu"> wood inspection </li>
7. <Li class = "menuli" id = "slgh_menu"> forest management and protection </li>
8. </Ul>
9. </Div>
11. <Div class = "display movediv" id = "slgh_menu_div">
12. <Ul>
13. <Li class = "redli"> attendance management </li>
14. <Li class = "redli"> Inspection Management </li>
15. <Li class = "redli"> onsite forensics </li>
16. <Li class = "redli"> troubleshooting </li>
17. </Ul>
18. </Div>
19. <Div class = "display movediv" id = "mcjy_menu_div">
20. <Ul>
21. <Li class = "redli"> location monitoring </li>
22. <Li class = "redli"> Inspection Management </li>
23. </Ul>
24. </Div>
25. <Div class = "display movediv" id = "bhz_menu_div">
26. <Ul>
27. <Li class = "redli"> attendance management </li>
28. <Li class = "redli"> Regulatory Information </li>
29. </Ul>
30. </Div>
31. <Div class = "display movediv" id = "ggsq_menu_div">
32. <Ul>
33. <Li class = "redli"> attendance management </li>
34. <Li class = "redli"> Regulatory Information </li>
35. </Ul>
36. </Div>
37. <Div class = "display movediv" id = "xtgl_menu_div">
38. <Ul>
39. <Li class = "redli"> permission management </li>
40. <Li class = "redli"> device management </li>
41. </Ul>
42. </Div>

 

====================================== Css style:

Css code

1. /** Header menu **/
2. . Header_menu {
3. Float: right;
4. Width: 50%;
5. Height: 100%;
6. Cursor: pointer;
8. }
10. . Header_menu ul {
11. List-style: none;
12. Height: 100%;
14. }
15. . Header_menu ul li {
16. Float: right;
17. Width: 20%;
18. Color: white;
19. Font-size: 14px;
20. Padding-top: 55px;
21. Font-weight: bold;
22. }
24. . Display {
25. Display: none;
26. }
27. . Display ul {
28. List-style: none;
29. Width: 100px;
30. }
31. . Display ul li {
32. Padding-top: 10px;
33. Padding-bottom: 5px;
34. Padding-left: 5px;
35. Cursor: pointer;
36. Font-size: 14px;
37. }
38. . Movediv {
39. Position: fixed;
40. Left: 0px;
41. Top: 0px;
42. Font-size: 14px;
43. White;
44. Border: 1px solid white;
45. }
46. . Redcolor {
47. # A0c9e6;
48. }

 

===================================== Js scripts

Js Code

1. $ (Function (){
2. // Menu binding event
3. InitMenuListener ();
4. // Bind an event to the drop-down menu
5. InitSubMenuHover ();
6. // Change the color of the drop-down menu
7. InitSubMenuLiHover ();
8. });
10. /**
11. * Top menu binding slide events
12. */
13. Function initMenuListener (){
15. $ (". Menuli"). hover (function (){
16. Var hideDivId = $ (this). attr ("id") + "_ div ";
17. // Obtain the menu position
18. Var left = $ (this). offset (). left;
19. Var top = $ (this). offset (). top;
20. Var height = $ (this). outerHeight (); // outerHeight is to get the height, including the padding, height is to get the height, but only the text height
22. $ ("#" + HideDivId). show ();
23. $ ("#" + HideDivId).css ("left", left );
24. $ ("#" + HideDivId).css ("top", top + height );
26. }, Function (){
27. // Hide the original menu
28. $ (". Display"). hide ();
29. });
30. }
31. /**
32. * Events bound to the drop-down menu
33. */
34. Function initSubMenuHover (){
35. $ (". Display"). hover (function (){
36. $ (This). show ();
37. }, Function (){
38. $ (This). hide ();
39. });
40. }
41. /**
42. * Change the color from the drop-down menu.
43. */
44. Function initSubMenuLiHover (){
45. $ (". Redli"). hover (function (){
46. $ (This). addClass ("redcolor ");
47. }, Function (){
48. $ (This). removeClass ("redcolor ");
49. });
50. }

 

The effect is as follows:

Jquery implementation drop-down menu