jquery特效制作左侧侧边浮动导航菜单滑动显示或隐藏



253 1008 337



特效描述:jquery特效制作 侧边浮动导航 滑动显示隐藏,jquery特效制作左侧侧边浮动导航菜单,点击按钮左侧侧边浮动导航条滑动显示或隐藏,控制整体页面布局收缩变化。jquery下载。

代码结构

1. 引入JS

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

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;vertical-align:middle;}
body{font:12px/180% "宋体";}
/* sidemenu */
#sidemenu{position:relative;z-index:2;padding-left:170px;width:20px;float:left;}
#sidemenu .sideBarButton{position:absolute;left:0;float:left;width:13px;height:0;padding-top:65px;overflow:hidden;background:url(images/bg01.gif) no-repeat;}
#sidemenu .sideBarButton .btn{position:absolute;left:0;top:10px;width:13px;height:20px;cursor:pointer}
#sidemenu .sidebarButton-over{background-position:-13px 0;}
#sidemenu.side-collapsed{padding-left:20px;}
#sidemenu.side-collapsed .sideBarButton{left:-20px;background-position:-26px 0;}
#sidemenu.side-collapsed .sidebarButton-over{background-position:-39px 0;}
#sidemenu #arrowbox{position:relative;float:left;}
/* sidebox */
#sidebox{position:relative;float:left;width:150px;margin:4px 0 0 -170px;_left:170px;padding:6px 10px;overflow:hidden;}
#sidebox li{height:24px;}
#sidebox li a{display:block;padding-left:5px;font-size:12px;}
#sidebox li a:hover{background:#e3eff8}
</style>
<script type="text/javascript">
$(function(){
	var F=$("#sidebox"),H=$("#arrowbox");$w=$("#sidemenu");
	var D="side-collapsed",
	A=$w.hasClass(D),
	C=$(".sideBarButton"),
	arrow=$("<div class=\"btn\">&nbsp;</div>").css("cursor","pointer").click(G).hover(function(){
	C.addClass("sidebarButton-over")},
	function(){
		C.removeClass("sidebarButton-over")});
		C.append(arrow);
	function G(){
		if(A){
			C.removeClass("sidebarButton-over");
		if(navigator.userAgent.indexOf("MSIE 6")>-1&&navigator.userAgent.indexOf("MSIE 8")<0)F.animate({left:170});
		$w.animate({paddingLeft:170},function(){
			$w.toggleClass(D)});
		A=false;
			}else{
			C.removeClass("sidebarButton-over");
		if(navigator.userAgent.indexOf("MSIE 6")>-1&&navigator.userAgent.indexOf("MSIE 8")<0)F.animate({left:0});
		$w.animate({paddingLeft:20},function(){
			$w.toggleClass(D)});
		A=true;
	}}
});
</script>
<div class="container">
	<div id="sidemenu">
		<div id="sidebox">
			<ul>
				<li><a target="_blank" href="http://www.jsfoot.com/jquery/">jquery 特效</a></li>
				<li><a target="_blank" href="http://www.jsfoot.com/js/">js特效</a></li>
				<li><a target="_blank" href="http://www.jsfoot.com/flash/">flash特效</a></li>
				<li><a target="_blank" href="http://www.jsfoot.com/css3/">div+css教程</a></li>
				<li><a target="_blank" href="http://www.jsfoot.com/html5/">html5教程</a></li>
			</ul>
		</div><!--sidebox end-->
		<div id="arrowbox">
			<div title="关闭左栏导航" class="sideBarButton">«</div>
		</div>
	</div><!--sidemenu end-->
	<div class="box">
		<a target="_blank" href="http://www.jsfoot.com/"><img src="images/pic.jpg" alt="html5特效" width="980" height="493" /></a>
	</div><!--box end-->
</div><!--container end-->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 收缩导航菜单 二级导航菜单 滑动选项卡切换 文字收缩展开 下拉导航菜单 图片滑动 图片收缩展开 竖直导航菜单 文字滑动 图标导航菜单 滑动手风琴 固定导航菜单 滑动星星打分 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滑动滑过 收缩收起展开 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到