jquery固定隐藏菜单js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery固定隐藏菜单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<title>jquery固定隐藏菜单</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link href="css/default.css" rel="stylesheet" type="text/css">
</head>
<body style="height:600px;">
<!-- 右侧导航 -->
<div class="rightNav">
	<a href="#" style="right: -110px;"><em>0</em>书签切换</a>
	<a href="#" style="right: -110px;"><em>1</em>书签切换</a>
	<a href="#" style="right: -110px;"><em>2</em>幻灯片</a>
	<a href="#" style="right: -110px;"><em>3</em>图片滚动-左</a>
	<a href="#" style="right: -110px;"><em>4</em>图片滚动-上</a>
	<a href="#" style="right: -110px;"><em>5</em>图片无缝滚动-左</a>
	<a href="#" style="right: -110px;"><em>6</em>图片无缝滚动-上</a>
	<a href="#" style="right: -110px;"><em>7</em>文字滚动-左</a>
	<a href="#" style="right: -110px;"><em>8</em>文字滚动-上</a>
	<a href="#" style="right: -110px;"><em>9</em>文字无缝滚动-左</a>
	<a href="#" style="right: -110px;"><em>10</em>文字无缝滚动-上</a>
	<a href="#" style="right: -110px;"><em>11</em>其它基础效果</a>
</div>
<script type="text/javascript">
	var btb=$(".rightNav");
	var tempS;
	$(".rightNav").hover(function(){
			var thisObj = $(this);
			tempS = setTimeout(function(){
			thisObj.find("a").each(function(i){
				var tA=$(this);
				setTimeout(function(){ tA.animate({right:"0"},300);},50*i);
			});
		},200);

	},function(){
		if(tempS){ clearTimeout(tempS); }
		$(this).find("a").each(function(i){
			var tA=$(this);
			setTimeout(function(){ tA.animate({right:"-110"},300,function(){
			});},50*i);
		});

	});
	var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
	if( isIE6 ){ $(window).scroll(function(){ btb.css("top", $(document).scrollTop()+100) }); }
</script>
<br>
</body>
</html>

CSS代码(default.css):

@charset "utf-8";/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img{padding:0;margin:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,i{font-weight:normal;font-style:normal;}
ol,ul,li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/*-- All --*/
body{color:#333;font:12px/20px Arial,"Microsoft YaHei","宋体",sans-serif;text-align:center;background:#DCDCDC;}
a{color:#333;text-decoration:none;outline:none;}
a:hover{color:#f00;text-decoration:underline;}
table{border-collapse:collapse;border-spacing:0;empty-cells:show;}
table td,table th{border:#ddd solid 1px;padding:5px 10px;}
table th{background:#176D97;color:#fff;}
table .new td{color:#f60;font-weight:bold;}
.rightNav{position:fixed;width:140px;right:0;top:100px;_position:absolute;text-align:left;cursor:pointer;background-image:url(about:blank);}
.rightNav a{display:block;position:relative;height:30px;line-height:30px;margin-bottom:2px;background:#fff;padding-right:10px;width:130px;overflow:hidden;cursor:pointer;right:-110px;}
.rightNav a:hover{text-decoration:none;color:#1974A1;}
.rightNav a:hover em{background:#00b700}
.rightNav a em{display:block;float:left;width:30px;background:#1974A1;color:#fff;font-size:16px;text-align:center;margin-right:10px;}

附件:下载该文件资源,减少时间成本(增值服务)