html
<!DOCTYPE html>
<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 id="header">
<div id="top">
<div id="warp">
<div class="topleft fl">
</div>
<div class="topright fr"><a href="/">返回首页</a></div>
</div>
</div>
</div>
<!-- 左侧导航 -->
<div class="leftNav">
<a href="#" style="left: -110px;">站长素材<em>0</em></a>
<a href="#" style="left: -110px;">书签切换<em>1</em></a>
<a href="#" style="left: -110px;">幻灯片<em>2</em></a>
<a href="#" style="left: -110px;">图片滚动-左<em>3</em></a>
<a href="#" style="left: -110px;">图片滚动-上<em>4</em></a>
<a href="#" style="left: -110px;">图片无缝滚动-左<em>5</em></a>
<a href="#" style="left: -110px;">图片无缝滚动-上<em>6</em></a>
<a href="#" style="left: -110px;">文字滚动-左<em>7</em></a>
<a href="#" style="left: -110px;">文字滚动-上<em>8</em></a>
<a href="#" style="left: -110px;">文字无缝滚动-左<em>9</em></a>
<a href="#" style="left: -110px;">文字无缝滚动-上<em>10</em></a>
<a href="#" style="left: -110px;">其它基础效果<em>11</em></a>
</div>
<script type="text/javascript">
var btb=$(".leftNav");
var tempS;
$(".leftNav").hover(function(){
var thisObj = $(this);
tempS = setTimeout(function(){
thisObj.find("a").each(function(i){
var tA=$(this);
setTimeout(function(){ tA.animate({left:"0"},300);},50*i);
});
},200);
},function(){
if(tempS){ clearTimeout(tempS); }
$(this).find("a").each(function(i){
var tA=$(this);
setTimeout(function(){ tA.animate({left:"-110"},300,function(){
});},50*i);
});
});
var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
if( isIE6 ){ $(window).scroll(function(){ btb.css("top", $(document).scrollTop()+100) }); }
</script>
<!-- 右侧导航 -->
<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>
</body>
</html>
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; }
/*-- 左侧导航 --*/
.leftNav{ position:fixed; width:140px; left:0; top:100px; _position:absolute; text-align:left; cursor:pointer; background-image:url(about:blank); }
.leftNav a{ display:block; position:relative; height:30px; line-height:30px; margin-bottom:2px; background:#fff; padding-left:10px; width:130px; overflow:hidden; cursor:pointer; left:-110px; }
.leftNav a:hover{ text-decoration:none; color:#1974A1; }
.leftNav a:hover em{ background:#00b700}
.leftNav a em{ display:block; float:right; width:30px; background:#1974A1; color:#fff; font-size:16px; text-align:center; margin-left:10px;}
/*-- 右侧导航 --*/
.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;}
JS
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
