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

Source: Internet
Author: User

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:



 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.