Menu effects implemented by jquery + CSS

Jquery is another excellent javascr merge PT framework after prototype. It has attracted many JavaScript experts from around the world to join its team. Most of the pages that involve front-end events and animation effects are related to jquery. This blog is a small demo of jquery + CSS to achieve menu animation effects. I hope you will have some gains.

There are 5 images to be prepared for this demo, and jquery. Easing. js1.3, jquery animation extension plug-in.

 

The following describes how to create an example:

1. Write the front-end HTML code:

<Ul> <li class = "green"> <p> <a href = "#"> homepage </a> </P> <P class = "subtext"> Homepage </P> </LI> <li class = "yellow"> <p> <a href = "#"> improvement course </a> </P> <P class = "subtext"> Phase 8 </P> <P class = "subtext"> Phase 7 </P> <P class = "subtext"> Phase 6 </P>/ LI> <li class = "red"> <p> <a href = "#"> China </a> </P> <P class = "subtext"> Beijing </P> </LI> <li class = "blue"> <p> <a href = "#"> USA </a> </P> <P class =" subtext "> New York </P> </LI> <li class =" Purple "> <p> <a href =" # "> Australia </a> </P> <P class = "subtext"> Canberra </P> </LI> </ul>

 

2. Set the CSS style of the menu

 

Body {font-family: @; Background: # f3f3f3;} ul {margin: 0; padding: 0;} li {width: 100px; Height: 50px; float: left; color: #191919; text-align: center; overflow: hidden;} A {color: # FFF; text-Decoration: none;} p {padding: 0px 5px ;}. subtext {padding-top: 15px ;}. green {Background: # 6aa63b URL ('images/green-item-bg.jpg ') top left no-Repeat ;}. yellow {Background: # fbc700 URL ('images/yellow-item-bg.jpg ') top left no-Repeat ;}. red {Background: # d52100 URL ('images/red-item-bg.jpg ') top left no-Repeat ;}. purple {Background: #5122b4 URL ('images/purple-item-bg.jpg ') top left no-Repeat ;}. blue {Background: #0292c0 URL ('images/blue-item-bg.jpg ') top left no-Repeat ;}

 

3. Import the jquery-1.4.1.js and jquery animation extension jquery. Easing. js 1.3, and write jquery code

 

<Link href = "stylesheet1.css" rel = "stylesheet" type = "text/CSS"/> <SCRIPT src = ".. /scripts/jquery-1.4.1.js "type =" text/JavaScript "> </SCRIPT> <% -- import jquery animation effect extension jquery. easing. JS 1.3 -- %> <SCRIPT src = "jquery. easing.1.3.js "type =" text/JavaScript "> </SCRIPT> <SCRIPT type =" text/JavaScript "> $ (document ). ready (function () {// register the Click Event of the hyperlink $ (""). click (function () {$ (this ). blur (); // events triggered by missing focus}); // events that move the cursor over li $ ("Li "). mouseover (function () {// stop a Custom Animation (animate) $ (this) on the specified element ). stop (). animate ({Height: '200px '}, {queue: false, duration: 600, easing: 'easeoutbounce '})}); // move the cursor out of Li event $ ("Li "). mouseout (function () {$ (this ). stop (). animate ({Height: '50px '}, {queue: false, duration: 600, easing: 'easeoutbounce'}) ;}); </SCRIPT>

 

At this point, we have made the effect, as shown in: