Home > Developer > Web Develop
Effect Experience:
Http://keleyi.com/keleyi/phtml/jqtexiao/39.htm
HTML file Code:
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><title>jquery mouse hover up and down slide navigation bar-Ke Keeper</title><BaseTarget= "_blank" /><Linkhref= "Http://keleyi.com/keleyi/phtml/jqtexiao/39/hovertreedaohang.css"rel= "stylesheet"type= "Text/css" /><Scriptsrc= "Http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></Script><Script>$ (document). Ready (function() {$("#hovertreecaidan Li a"). Wrapinner ('<span class= "Out" ></span>' );$("#hovertreecaidan Li a"). each (function() {$( '<span class= "Over" >' + $( This). Text ()+ '</span>'). AppendTo ( This );}); $("#hovertreecaidan Li a"). Hover (function() {$(". out", This). Stop (). Animate ({'Top': '48px'}, -); //Move Down-hide$(". over", This). Stop (). Animate ({'Top': '0px'}, -); //Move Down-show}, function() {$(". out", This). Stop (). Animate ({'Top': '0px'}, -); //Move Up-show$(". over", This). Stop (). Animate ({'Top': '-48px'}, -); //Move Up-hide});});</Script></Head><Body><DivID= "Hovertreecaidan"class= "Hovertreedaohang"><ul><Li><ahref= "Http://keleyi.com">Home</a></Li><Li><ahref= "http://keleyi.com/menu/jquery/">Jquery</a></Li><Li><ahref= "http://keleyi.com/menu/webqd/">Web Front End</a></Li><Li><ahref= "http://keleyi.com/menu/javascript/">Javascript</a></Li><Li><ahref= "http://keleyi.com/menu/html5/">HTML5</a></Li><Li><ahref= "http://hovertree.com/">Hovertree</a></Li><Li><ahref= "http://hovertree.com/texiao/">Web effects</a></Li><Li><ahref= "http://tool.keleyi.com/">Tools</a></Li><Li><ahref= "http://hovertree.com/guestbook/">Message</a></Li></ul><Divclass= "Hvtclear"></Div></Div> </Body></HTML>
where the Wrapinner () method of jquery uses the specified HTML content or elements to wrap all the contents of each selected element (inner HTML).
Reference: http://hovertree.com/hvtart/bjae/m66osaoc.htm
Web front-end resources: http://www.cnblogs.com/jihua/p/webfront.html
What about this jquery navigation menu?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
