jquery handwriting Several common sliding drop-down menus learn js in seconds

General corporate website again we actually work, some special effects, with jquery to do, it seems extremely simple, unless some big companies, need to encapsulate their own classes. Today, we explain the basics of jquery to write a few simple jquery swipe drop-down menus. Take a look at the simple, quick magic of jquery.
After completing this chapter, you can write the most common drop-down menu notation.

Case 1 Effect:



In writing this sliding drop-down menu, let's first recognize the sliding method in jquery: Slidetoggle ()

Slidetoggle ( execution Time , motion mode, return function )

Execution time: Commonly used is

• "Slow" slow speed
• "Normal" is OK
• "Fast" quick

But the usual milliseconds, like 300, is 300 milliseconds.

Well, the principle of this case is that the first level menu is written out, when the mouse passes, will be the corresponding level two menu display. But we're using a slide show.

The HTML code is as follows:

<UlClass= "All" ><Li> level Menu <ul><Li> Level Two menu </li><Li> Level Two menu </li><Li> Level Two menu </li></ul></li><li> level menu <ul><li> level two menu </ li><li> level two menu </li><li> level two menu </li></ul></ li><li> level menu <ul><li> level two menu </li><li> level two menu </li><li> level two menu </li></ ul></li></UL>    

First we write CSS style (reasonable concise CSS style, will let us write JS more simple OH)

<type= "Text/css" >*{padding:0; margin:0; list-style:none;}. all{width:330px; height:30px; margin:100px auto; Background:url (img/bg.jpg); padding-left:10px;}. All li{width:100px; height:30px; Background:url (img/libg.jpg); line-height:30px; text-align:center; float:left; margin-right:10px; _display:inline; position:relative; Cursor:pointer;}. All ul{position:absolute; left:0; top:30px; display:none;} </style> 

Note that the level two menu must first be hidden OH

Then we prepare the JS code

<src= "jquery-1.7.2.min.js" ></script><type= "text/javascript" >$ (function () {$ ('. All>li '). Hover (function () {$ (this). Children (). Stop (). Slidetoggle (300);})}) </script>   

Writing JS code, there are three points to note:

1. Don't forget to draw the JS file package.
2. Hover we know, it's mouseover and mouseout.
3. We found that the stop () in front of the Slidetoggle () was written to prevent the queueing mechanism of jquery.
Under Mr. Xiao Qiang to everyone to prepare a demo file download, we can take a good look at OH.

Deom:http://pan.baidu.com/s/1sjk9xsh