Web front-end development Combat 5: Navigation menu (ii)

The vertical direction of the four-telescopic menu

The principle of production: We still change the CSS style on the basis of the original horizontal navigation menu to realize the telescopic change of the navigation menu. The simplest way

or using CSS style method to implement, the way to create a menu a lot, find the right one.

Code:

<span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Effect Show:
State of initialization or mouse leave:

The state of the mouse on the corresponding element:

Horizontal orientation of the five scaling menus (JavaScript method)
Production principle: We are also the above menu based on changing the CSS style to implement the navigation menu scaling changes. Because of the relative difficulty of this scaling change
We do this by using JS or jquery.
Code:
<span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">Effect Show:
State of initialization or mouse leave:

The state of the mouse on the corresponding element:

Horizontal direction of the six scaling menu (jquery method)
The difference between using the JavaScript method above is:
<span style= "FONT-SIZE:18PX;" ><!--jquery Library with Baidu server--  <script type= "Text/javascript" src= "http://libs.baidu.com/jquery/1.9.0/ Jquery.js "></script><script type=" Text/javascript ">$ (function () {    //using hover in the jquery library () The method implements the mouse on and off when the event is triggered by        $ ("a"). Hover (        ) {////Use the Animate () method in the jquery library to implement the menu scaling animation transform $ (this). Stop (). Animate ({" Width ": 120px"},200);},function () {    //Use the Animate () method in the jquery library to implement the menu scaling animation transform    $ (this). Stop (). Animate ({"width": "90px"},200)}) </script></span>
The effect is exactly the same as above.


Web front-end development Combat 5: Navigation menu (ii)