泡沫弹出框式的侧边导航菜单

2024-09-05 12:20:39

字体：大中小

来源：转载

供稿：网友

泡沫弹出框式的侧边导航菜单，预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。

<!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>泡沫弹出框式的侧边导航菜单</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; }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(/jscss/demoimg/201008/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(/jscss/demoimg/201008/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(/jscss/demoimg/201008/bubble_btm.gif) no-repeat right bottom;}</style><script language="javascript" src="/ajaxjs/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>		Home		<div><p>Go home!</p></div>	</li>	<li>		About Me		<div><p>Get to know me.</p></div>	</li>	<li>		Portfolio		<div><p>Get to check out my featured work!</p></div>	</li>	<li>		Blog		<div><p>Tutorials, articles and resources.</p></div>	</li>	<li>		Contact		<div><p>Don't hesitate to drop me a line!</p></div>	</li>	<li>		Rss		<div><p>News, Video and so on.</p></div>	</li></ul></body></html>

上一篇：仿腾讯QQ竖直滑动导航菜单

下一篇：竖直感应鼠标的多级展开菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注