Web Front-end development practice 3: jQuery Implementation of level 2 drop-down menus

Web Front-end development practice 3: jQuery Implementation of level 2 drop-down menus

As we all know, jQuery is a framework that encapsulates JS to make it easier to use. The first two blog posts are implemented using CSS styles and JS.

In this article, jQuery is used to implement the level-2 drop-down menu.

The following knowledge is required to implement JQuery:

1) use $ (function () {...}) to obtain the HTML element to be used.

2) use the children () method to find child elements.

3) Use show () to display HTML elements.

4) use the hide () method to hide HTML elements.

5) jQuery library reference method:

Method 1: Download The jQuery library to your computer and reference it. I downloaded the jquery-1.7.1.min.js version.

Example: <script type = "text/javascript" src = "jquery/jquery-1.7.1.min.js"> </script>

Method 2: directly reference the jQuery library files on the online server, such as the jQuery library on the Google server and the jQuery library on the Baidu server.

For example, the jQuery library file on Baidu server is referenced.

<Script type = "text/javascript" src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script>

Next let's take a look at the production process:

1. Call the jQuery Library: write code and reference the jquery library. Since Google has withdrawn from the Chinese mainland, we recommend that you use the jQuery library of Baidu server.

Attention: Baidu server jQuery library address: http://libs.baidu.com/jquery/1.9.0/jquery.js

2. Compile the show sub-menu function, use $, and use the class name to obtain the level-1 menu li. Use children () to find the child element ul of li, and use the show () method,

Displays the level-2 menu.

3. Compile the hidden sub-menu function, use $, and use the class name to obtain the first-level menu li. Use children () to find the child element ul of li, and use the hide () method to hide

Hidden Level 2 menu.

4. Perform browser compatibility tests with at least five browsers. IE7, 2345, Firefox, Google, and browsers.

Finally, let's take a look at the code, which is slightly different from the previous one:

HTML code:

 

<Script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script> <script type = "text/javascript" src = "script. js"> </script>

• Homepage
• Course Hall
  • JavaScript
  • JQuery
  • Ajax
• Learning Center
  • Video Learning
  • Case Study
  • Communication Platform
• Typical Cases
• About us

CSS Sample Table External style.css file code:

 

 

/* CSS global settings */* {margin: 0; padding: 0 ;}. nav {background-color: # EEEEEE; height: 40px; width: margin PX; margin: 0 auto;} 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: # FFFFFF;} ul li {float: none; background-color: # EEEEEE;} ul li ul {display: none;}/* to be compatible with CSS styles written in IE7, but must be written in front of a: hover */ul li a: link, ul li: visited {background-color: # EEEEEE;} ul li a: hover {background-color: #009933 ;}

JS script external script, js file code:

 

 

$(function(){     $(".navmenu").mouseover(function(){ $(this).children("ul").show();   })      $(".navmenu").mouseout(function(){ $(this).children("ul").hide(); })})

Let's take a look at the effect:

 

1. The initialization status or mouse exit is displayed as a horizontal level menu:

2. When you move the mouse over an element with a secondary drop-down menu, the drop-down menu is displayed:

3. Link style in the drop-down menu: