JQuery implementation of secondary navigation drop-down menu effect instance

Everyone knows jQuery is a framework that packages JS to make it more convenient. The previous two blog posts are implemented with CSS style and JS, then this article uses jQuery to implement the secondary drop-down menu.

The knowledge that needs to be used using jQuery is:

  1. 1) Use $ (function () {…}) to get the HTML element you want to function. .
  2. 2) Look for child elements by using a children () method.
  3. 3) Displays the HTML element by using the show () method.
  4. 4) Hide HTML elements by using the HIDE () method.
  5. 5) JQuery library code method:
  6. First method: download the jQuery library to the computer, then reference, I downloaded jQuery-1.7.1.min. JS this version.

second method: direct Quote the jQuery library file on the online server, such as Google Server jQuery library, Baidu server jQuery library, etc.
     


   Next, look at the process of making:   
1, call the jQuery library: write code, reference the jQuery library. Since Google has exited the mainland, it is recommended to use the Baidu server’s jQuery library.
Note: Baidu server jQuery library address: http://libs.baidu.com/jquery/1.9.0/jquery.js

2, the preparation of the display sub-menu function, using $ and get a menu li class by name, had children () to find li child element ul, using the show () method to display the secondary menu.
  1. 3, the preparation of the hidden sub-menu function, using $ and get a menu li class by name, had children () to find li child element ul, use hide () method, hiding the secondary menu.
  2. 4, do browser compatibility test, at least five browsers. IE7,8,9, Firefox, Google, 2345 browsers.
  3. first look at renderings:

Finally, we look at the situation of the code, and in front of the very different:

the HTML Code:

jquery实现二级导航下拉菜单效果实例

 dropdown menu              Home    CSS style sheet external style.css file code:   / * CSS global setting * / * {margin: 0; padding: 0;} .nav {background-color: #eeeee; height: 40px; margin: 450px; margin: 0auto;} ul {list-style: none;} ul Li {float: left; line-height: 40px; text-align: center } a {text-decoration: none; color: # 000000; Display: block; width: 90px; height: 40px;} a: hover {background-color: # 666666; color: #fffff;} ul Li ul Li { Float: none; background-color: #eeeee;} ul Li ul {display: none;} / * In order to be compatible with IE7 written CSS style, you must be written in A: Hover * / UL Li Ul Li a: link, ul LI UL Li A: visited {background-color: #eeeee;} UL Li UL Li A: Hover {Background-Color: # 009933;}  
JS script external Script, JS file code:

$ (Function () {$ (“. Navmenu” ) .MouseOver (this) .children (“ul”). Show ();}) $ (“. navmenu”). Mouseout (function () {$ (this) .children (“ul” )
   
The above is the jQuery second-level navigation drop-down menu, which is introduced to you, I hope to help everyone. If everyone has any questions, please leave a message, the small package will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment