jqueryslide二级菜单滑动动画展开特效代码下载


jqueryslide二级菜单滑动动画展开特效代码下载
jqueryslide二级菜单滑动动画展开特效代码下载以及二级菜单、滑动动画展开等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#333;text-decoration:underline;}
body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
/* navbox */
.navbox,.nav li,.nav li.current a,.nav li.selected a span,.nav li a.selected,.nav li a.selected span{background:url(images/headerbg.png) no-repeat;}
.navbox{height:39px;background-position:0 -138px;background-repeat:repeat-x;position:relative;z-index:9;}
.nav{width:960px;margin:0 auto;}
.nav li{float:left;height:39px;background-position:100% -99px;padding:0 3px 0 2px;position:relative;}
.nav li.last{background:none;}
.nav li a{float:left;display:block;padding:0 0 0 4px;height:39px;overflow:hidden;}
.nav li a span{float:left;display:block;padding:0 4px 0 0;line-height:39px;font-size:14px;color:#fff;font-weight:800;cursor:pointer;width:142px;text-align:center;}
.nav li.selected a,.nav li a.selected{background-position:0 -60px;text-decoration:none;}
.nav li.selected a span,.nav li a.selected span{background-position:100% -60px;color:#ff7e00;}
.nav li.selected .submenu{display:block;}
.nav li .submenu{display:none;position:absolute;top:0;left:0;}
.nav li .submenu{border-style:solid;border-width:0px 1px 1px 1px;border-color:#ddd;padding:0 5px 5px 5px;width:132px;background:#fff;}
.nav li .submenu{-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-moz-box-shadow:0 5px 5px #D3D3D3;-webkit-box-shadow:0 5px 5px #D3D3D3;box-shadow:0 5px 5px #D3D3D3;}
.nav li .submenu li{float:none;padding:0;background:none;height:auto;border-bottom:dotted 1px #BEBEBE;}
.nav li .submenu li.last{border:none;}
.nav li .submenu li a{float:none;padding:0;text-align:center;height:28px;line-height:28px;background:none;}
.nav li .submenu li a:hover{background:#ddd;font-weight:800;}
</style>
<script type="text/javascript">
ddsmoothmenu.init({
	mainmenuid: "smoothmenu1", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'nav'
});
</script>
<div class="navbox">
	<div class="nav" id="smoothmenu1">
		<ul class="clearfix">
			<li><a  class="selected" target="_blank" href="http://www.51qianduan.com/"><span>网站首页</span></a></li>
			<li>
				<a target="_blank" href="http://www.51qianduan.com/"><span>js代码</span></a>
				<ul class="submenu">
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				</ul>
			</li>
			<li>
				<a target="_blank" href="http://www.51qianduan.com/"><span>js图片特效</span></a>	
				<ul class="submenu">
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				</ul>
			</li>
			<li>
				<a target="_blank" href="http://www.51qianduan.com/"><span>js导航菜单</span></a>	
				<ul class="submenu">
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				</ul>
			</li>
			<li>
				<a target="_blank" href="http://www.51qianduan.com/"><span>js选项卡特效</span></a>
				<ul class="submenu">
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				</ul>
			</li>
			<li>
				<a target="_blank" href="http://www.51qianduan.com/"><span>js文字特效</span></a>	
				<ul class="submenu">
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
					<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>

相关推荐

发表评论

相关文章