This is divided into two parts, above is the big classification, below is the two class classification, the animation is one upward, one downward, the animation utilizes the animate in jquery to be possible, the mouse moves up and moves out is a hover event to trigger, basically involves these two functions, Some of the other small places in the actual process of the details of the adjustment can be.
So there is the following core jquery based script (this code is a bit long, in fact, nothing special, and we usually write the same as the basic, HTML and CSS to the demo page to see, because there is no use of pictures posted out)
The core code is as follows
| The code is as follows |
Copy Code |
| $ ("#nav >li>a"). Wrapinner (' <span class= ' out ' ></span> '). Append (' <span class= ' BG ' ></span > ');
$ ("#nav >li>a"). each (function () {
$ (' <span class= ' over ' ><strong> ' + $ (this). Text () + ' </strong></span> '). Appendto (this);
});
$ ("#nav >li>a:not ('. Cur ')"). Hover (function () {
$ (". Out", this). Stop (). Animate ({' Top ': ' 65px '},250); Slide down-Hide
$ (". Over", this). Stop (). Animate ({' top ': ' 0px '},250); Slide down-Show
$ (". BG", this). Stop (). Animate ({' top ': ' 0px '}, 120); Slide down-Show
}, function () {
$ (". Out", this). Stop (). Animate ({' top ': ' 0px '},250); Slide Up-Show
$ (". Over", this). Stop (). Animate ({' Top ': ' 65px '},250); Slide Up-Hide
$ (". BG", this). Stop (). Animate ({' Top ': ' 65px '},120); Slide Up-Hide
});
$ ("#nav >li:not (': A '): Not (': Last ')"). Hover (function () {
$ (". Navbg"). Stop (). Animate ({' Height ': ' 44px '},120);
$ (this). Children (". Snav"). Stop (True). css ({' Left ':-$ (this). Position ().
}, function () {
$ (". Navbg"). Stop (). Animate ({' height ': ' 0px '},120);
$ (this). Children (". Snav"). Stop (true). Hide ();
});
$ (". Snav>a"). Wrapinner (' <span class= ' out ' ></span> '). Append (' <span class= ' bg ' ></span> ' );
$ (". Snav>a"). each (function () {
$ (' <span class= ' over ' > ' + $ (this). Text () + ' </span> '). Appendto (this);
});
$ (". Snav>a:not ('. Cur ')"). Hover (function () {
$ (". Out", this). Stop (). Animate ({' Top ': ' -44px '},250); Slide Up-Hide
$ (". Over", this). Stop (). Animate ({' top ': ' 0px '},250); Slide Up-Show
$ (". BG", this). Stop (). Animate ({' top ': ' 0px '}, 120); Slide Up-Show
}, function () {
$ (". Out", this). Stop (). Animate ({' top ': ' 0px '},250); Slide down-Show
$ (". Over", this). Stop (). Animate ({' Top ': ' -44px '},250); Slide down-Hide
$ (". BG", this). Stop (). Animate ({' Top ': ' -44px '},120); Slide down-Hide
}); |
The complete instance code is as follows
Specific HTML, CSS, and scripting
| The code is as follows |
Copy Code |
| <div class= "navbox" >
<ul class= "Nav fr CF FW" id= "NAV" >
<li>
<a class= "cur" href= "target=" _blank "><strong> home </strong></a>
</li>
<li class= "" >
<a href= "#" ><strong> Company Profile </strong></a>
<div class= "Snav" >
<a href= "#" title= "" class= "cur" > Company Profile </a>
<a href= "#" title= "" > Company Profile </a>
<a href= "#" title= "" > Company Profile </a>
<a href= "#" title= "" > Company Profile </a>
<a href= "#" title= "" > Company Profile </a>
<a href= "#" title= "" > Company Profile </a>
<a href= "#" title= "" > Company Profile </a>
<a href= "#" title= "" > Company Profile </a>
<a href= "#" title= "" > Company Profile </a>
</div>
</li>
<li>
<a href= "#" ><strong> Product show </strong></a>
<div class= "Snav" >
<a href= "#" title= "" class= "cur" > Product show </a>
<a href= "#" title= "" > Product show </a>
<a href= "#" title= "" > Product show </a>
<a href= "#" title= "" > Product show </a>
<a href= "#" title= "" > Product show </a>
<a href= "#" title= "" > Product show </a>
<a href= "#" title= "" > Product show </a>
<a href= "#" title= "" > Product show </a>
<a href= "#" title= "" > Product show </a>
</div>
</li>
<li>
<a href= "#" ><strong> Information Express </strong></a>
<div class= "Snav" >
<a href= "#" title= "" class= "cur" > Information Express </a>
<a href= "#" title= "" > News Express </a>
<a href= "#" title= "" > News Express </a>
<a href= "#" title= "" > News Express </a>
<a href= "#" title= "" > News Express </a>
<a href= "#" title= "" > News Express </a>
<a href= "#" title= "" > News Express </a>
<a href= "#" title= "" > News Express </a>
<a href= "#" title= "" > News Express </a>
</div>
</li>
<li>
<a href= "#" ><strong> Product evaluation </strong></a>
<div class= "Snav" >
<a href= "#" title= "" class= "cur" > Product evaluation </a>
<a href= "#" title= "" > Product evaluation </a>
<a href= "#" title= "" > Product evaluation </a>
<a href= "#" title= "" > Product evaluation </a>
<a href= "#" title= "" > Product evaluation </a>
<a href= "#" title= "" > Product evaluation </a>
<a href= "#" title= "" > Product evaluation </a>
<a href= "#" title= "" > Product evaluation </a>
<a href= "#" title= "" > Product evaluation </a>
</div>
</li>
<li>
<a href= "#" ><strong> New product promotion </strong></a>
<div class= "Snav" >
<a href= "#" title= "" class= "cur" > New product Promotion </a>
<a href= "#" title= "> New product Promotion </a>
<a href= "#" title= "> New product Promotion </a>
<a href= "#" title= "> New product Promotion </a>
<a href= "#" title= "> New product Promotion </a>
<a href= "#" title= "> New product Promotion </a>
<a href= "#" title= "> New product Promotion </a>
<a href= "#" title= "> New product Promotion </a>
<a href= "#" title= "> New product Promotion </a>
</div>
</li>
<li>
<a href= "#" ><strong> Customer service </strong></a>
<div class= "Snav" >
<a href= "#" title= "" class= "cur" > Customer service </a>
<a href= "#" title= "" > Customer service </a>
<a href= "#" title= "" > Customer service </a>
<a href= "#" title= "" > Customer service </a>
<a href= "#" title= "" > Customer service </a>
<a href= "#" title= "" > Customer service </a>
<a href= "#" title= "" > Customer service </a>
<a href= "#" title= "" > Customer service </a>
<a href= "#" title= "" > Customer service </a>
</div>
</li>
<li><a href= "" target= "_blank" ><strong> Professional forum </strong></a></li>
</ul>
<div class= "NAVBG" ></div>
</div>a{text-decoration:none;}
. navbox{border-bottom:2px solid #FF3C00; height:65px position:relative; margin:0px 10px 50px; padding:0 0 0 10px;}
. nav {height:65px; position:relative; Z-index:3}
. nav li {float:left; position:relative; text-align:center;}
. Nav Li a {float:left; position:relative; font-weight:bold; font-size:14px; color: #676767; height:65px; line-height:65px; width:90px; Overflow:hidden; Z-index:4:}
. Nav Li a span {position:absolute; left:0; width:90px; height:65px; cursor:pointer;}
. Nav Li a span.out {top:0px;}
. Nav Li a span strong {display:block; margin:0 10px; height:30px; line-height:30px; padding-top:20px; }
. Nav Li a span.over,. Nav li a span.bg {top:65px;}
. Nav li a span.over {color: #FFF;}
. Nav Li a span.over strong {border-bottom:1px solid #FFFFD6;}
. Nav Li a span.bg {height:65px; Background:url (s/nav.jpg) repeat-x left bottom;
. Nav Li A.cur span.over,. Nav li a.cur span.bg {top:0;} . Nav Li Snav {font-size:0px; width:730px; height:44px; position:absolute; left:-200px; top:65px; border-top:2px Solid #F F3C00; Display:none;}
. Nav li. Snav a{position:relative; margin:0 0px; width:70px; Color: #444; height:44px; line-height:40px; Display:inline-block; font-size:12px; Font-weight:normal;}
. Nav Li Snav a span {position:absolute; left:0; width:70px; height:39px; line-height:39px; width:70px; cursor:pointer;}
. Nav Li Snav a span.out {top:0px;}
. Nav Li Snav a span.over,.nav li. Snav a span.bg {top: -44px;}
. Nav Li Snav a span.over {color: #FFF;}
. Nav Li Snav a span.bg {height:44px; background: #FF510C; border-radius:0 0 5px 5px;}
. Nav Li Snav a.cur span.over,.nav li. Snav a.cur span.bg {top:0;}
. navbg {Background:url (s/snavbg.jpg) no-repeat; width:1000px; height:0px; overflow:hidden; : 67px; left:0; Text-align:center; Z-index:2; }$ ("#nav >li>a"). Wrapinner (' <span class= ' out ' ></span> '). Append (' <span class= ' BG ' ></ Span> ');
$ ("#nav >li>a"). each (function () {
$ (' <span class= ' over ' ><strong> ' + $ (this). Text () + ' </strong></span> '). Appendto (this);
}); $ ("#nav >li>a:not ('. Cur ')"). Hover (function () {
$ (". Out", this). Stop (). Animate ({' Top ': ' 65px '},250); Slide down-Hide
$ (". Over", this). Stop (). Animate ({' top ': ' 0px '},250); Slide down-Show
$ (". BG", this). Stop (). Animate ({' top ': ' 0px '}, 120); Slide down-Show
}, function () {
$ (". Out", this). Stop (). Animate ({' top ': ' 0px '},250); Slide Up-Show
$ (". Over", this). Stop (). Animate ({' Top ': ' 65px '},250); Slide Up-Hide
$ (". BG", this). Stop (). Animate ({' Top ': ' 65px '},120); Slide Up-Hide
}); $ ("#nav >li:not (': A '): Not (': Last ')"). Hover (function () {
$ (". Navbg"). Stop (). Animate ({' Height ': ' 44px '},120);
$ (this). Children (". Snav"). Stop (True). css ({' Left ':-$ (this). Position ().
}, function () {
$ (". Navbg"). Stop (). Animate ({' height ': ' 0px '},120);
$ (this). Children (". Snav"). Stop (true). Hide ();
});
$ (". Snav>a"). Wrapinner (' <span class= ' out ' ></span> '). Append (' <span class= ' bg ' ></span> ' );
$ (". Snav>a"). each (function () {
$ (' <span class= ' over ' > ' + $ (this). Text () + ' </span> '). Appendto (this);
});
$ (". Snav>a:not ('. Cur ')"). Hover (function () {
$ (". Out", this). Stop (). Animate ({' Top ': ' -44px '},250); Slide Up-Hide
$ (". Over", this). Stop (). Animate ({' top ': ' 0px '},250); Slide Up-Show
$ (". BG", this). Stop (). Animate ({' top ': ' 0px '}, 120); Slide Up-Show
}, function () {
$ (". Out", this). Stop (). Animate ({' top ': ' 0px '},250); Slide down-Show
$ (". Over", this). Stop (). Animate ({' Top ': ' -44px '},250); Slide down-Hide
$ (". BG", this). Stop (). Animate ({' Top ': ' -44px '},120); Slide down-Hide
}); |
Conclusion
Although the effect of simulation and the effect of using Flash has a certain gap, personally feel that the effect can reach about 80% of the flash, but basically little impact, and conducive to SEO, and the speed of loading is obviously faster than flash loading, so the individual feel that can be accepted, but sometimes the customer is accepted, We need some communication.
