气泡式弹出菜单 jQuery纵向导航栏代码

发布时间：2018-08-18 22:17:01 所属栏目：政策来源：站长网

导读：气泡式弹出菜单 jQuery 纵向导航栏代码，这是烈火在国外网站发现的，没有来的及汉化，其实就几个菜单，也没几个英文，大家自己修改吧。为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示网页演示：猛击此处

　　气泡式弹出菜单 jQuery纵向导航栏代码，这是烈火在国外网站发现的，没有来的及汉化，其实就几个菜单，也没几个英文，大家自己修改吧。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>气泡弹出框式的侧边导航菜单 - Liehuo.Net</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> html, body, ul, li { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; font-family: "Verdana","lucida sans",Sans-serif; font-size: 12px; } /* 更多网页特效：http://www.veryhuo.com */ 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_nav li { position: relative; float: left; margin: 0; padding: 0; display: inline; } ul.side_nav li a { width: 165px; border-top: 1px solid #3373a9; border-bottom: 1px solid #003867; padding: 10px 10px 10px 25px; display: block; color: #fff; text-decoration: none; background: #005094 url(/uploads/allimg/1008/sidenav_arrow.gif) no-repeat 5px 10px; position: relative; z-index: 2; } ul.side_nav li a:hover { background-color: #2d353f; } ul.side_nav li div { display: none; position: absolute; top: 2px; left: 0; width: 225px; background: url(/uploads/allimg/1008/bubble_top.gif) no-repeat right top; } ul.side_nav li div p { margin: 7px 0; line-height: 1.3em; padding: 0 5px 10px 30px; color: #444; background: url(/uploads/allimg/1008/bubble_btm.gif) no-repeat right bottom; }/* 更多网页特效：http://www.veryhuo.com */ </style> <script language="javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script> <script language="javascript"> $(document).ready(function(){ $("ul.side_nav li").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> 预览时如果提示有错误，请刷新一下网页就没事了。<br> <ul class="side_nav"> <li> <a href="#">Home</a> <div><p>Go home!</p></div> </li> <li> <a href="#">About Me</a> <div><p>Get to know me.</p></div> </li> <li> <a href="#">Portfolio</a> <div><p>Get to check out my featured work!</p></div> </li> <li> <a href="#">Blog</a> <div><p>Tutorials, articles and resources.</p></div> </li> <li> <a href="#">Contact</a> <div><p>Don't hesitate to drop me a line!</p></div> </li> <li> <a href="#">Rss</a> <div><p>News, Video and so on.</p></div> </li> </ul> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!