jquery实现侧边弹出的垂直导航
这是一款利用jquery动画特效和css打造的侧边弹出垂直导航,整个弹出过程比较流畅,而且代码很简单,如果你正在寻找一款带动画的垂直导航,那么可以试试这个。
HTML源码:
<title>Jquery+CSS侧边弹出垂直导航</title> <styletype="text/css"> html,body,ul,li{ margin:0; padding:0; border:0; outline:0; vertical-align:baseline; font-family:"Verdana","lucidasans",Sans-serif; font-size:12px; } html,body{ min-height:100%; color:#FFFFFF; background-repeat:repeat-x; background-position:top; background-color:#161f2a; } ul.side_nav{ width:200px; float:left; margin:0; padding:0; } ul.side_navli{ position:relative; float:left; margin:0; padding:0; display:inline; } ul.side_navlia{ width:165px; border-top:1pxsolid#3373a9; border-bottom:1pxsolid#003867; padding:10px10px10px25px; display:block; color:#fff; text-decoration:none; background:#005094url(sidenav_arrow.gif)no-repeat5px10px; position:relative; z-index:2; } ul.side_navlia:hover{ background-color:#2d353f; } ul.side_navlidiv{ display:none; position:absolute; top:2px; left:0; width:225px; background:url(bubble_top.gif)no-repeatrighttop; } ul.side_navlidivp{ margin:7px0; line-height:1.3em; padding:05px10px30px; color:#444; background:url(bubble_btm.gif)no-repeatrightbottom; } </style> <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js "></script> <scriptlanguage="javascript"> $(document).ready(function(){ $("ul.side_navli").hover(function(){ $(this).find("div").stop() .animate({left:"210",opacity:1},"fast") .css("display","block") },function(){ $(this).find("div").stop() .animate({left:"0",opacity:0},"fast") }); }); </script> </head> <body> <ulclass="side_nav"> <li> <ahref="www.corange.cn">Corange.cn</a> <div><p>Gohome!<Br/>ASP</p></div> </li> <li> <ahref="#">AboutMe</a> <div><p>Gettoknowme.</p></div> </li> <li> <ahref="#">Portfolio</a> <div><p>Gettocheckoutmyfeaturedwork!</p></div> </li> <li> <ahref="#">Blog</a> <div><p>Tutorials,articlesandresources.</p></div> </li> <li> <ahref="#">Contact</a> <div><p>Don'thesitatetodropmealine!</p></div> </li> <li> <ahref="#">Rss</a> <div><p>News,Videoandsoon.</p></div> </li> </ul> </body> </html>
演示代码很简单,小伙伴们根据自己的项目需求,自由美化更改下即可