Web front-end development Combat 3: Two-level pull-down menu jquery implementation

As we all know, jquery is a framework that encapsulates JS and makes it easier to use. The previous two posts were implemented using CSS styles and JS

, then this article uses jquery to achieve the two-level drop-down menu.

The knowledge you need to use jquery to implement is:

1) Use $ (function () {...}) Gets the HTML element that you want to work with.

2) Find child elements by using the children () method.

3) display HTML elements by using the show () method.

4) Hide HTML elements by using the Hide () method.

5) JQuery Library Reference method:

The first way: To download the jquery library to your computer, and then reference, I downloaded this version of Jquery-1.7.1.min.js.

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

The second method: directly refer to the online server jquery library files, such as the Google Server jquery library, Baidu server jquery library and so on.

Example: referencing the jquery library file on the Baidu server

<script type= "Text/javascript" src= "Http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script>

Next look at the production process:

1 Calling the jquery library: writing code, referencing the jquery library. Since Google has withdrawn from the mainland, it is recommended to use the jquery library of Baidu server.

Note: Baidu server's jquery library address: http://libs.baidu.com/jquery/1.9.0/jquery.js

2 Write a submenu function, use $, and get a first-level menu by class name Li, children () Find Li's child element ul, using the Show () method,

The level two menu is displayed.

3 Write a hidden submenu function, use $, and get a first-level menu by class name Li, children () Find Li's child element ul, using the Hide () method, hidden

The two-level menu is hidden.

4 do a browser compatibility test with at least five browsers. ie7,8,9, Firefox, Google, 2345 browser and so on.

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

HTML code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">CSS style sheet external style.css file code:
/*CSS Global Settings */*{   margin:0;   padding:0;}. nav{   background-color: #EEEEEE;   height:40px;   width:450px;   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 ul li{    Float:none;    Background-color: #EEEEEE;} UL Li ul{    display:none;} /* For compatibility with IE7 written CSS styles, but must be written in A:hover front */ul Li ul Li A:link,ul Li ul li a:visited{    background-color: #EEEEEE;} UL Li 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 look at the effect:
1 initialization status or mouse leave displayed as Landscape level menu:

2 The mouse slides over the element with a level two drop-down menu when the drop-down menu is displayed:

3 Link styles in the drop-down menu shown:






Web front-end development Combat 3: Two-level pull-down menu jquery implementation