體驗效果：http:///keleyi/phtml/jqmenu/3.htm
完整代碼：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>側邊固定欄導航菜單-</title><base target="_blank" />
<meta name="keywords" content=">側邊固定欄導航菜單" />
<meta name="description" content=">側邊固定欄導航菜單" />
<link href="http:///keleyi/phtml/jqmenu/3/cl.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>側邊固定欄導航菜單</h1>
<div style="background-color:Red; width:100%;height:150px;">歡迎</div>
<div style="background-color:Yellow; width:100%;height:150px;">hi</div>
<div style="background-color:Silver; width:100%;height:150px;"></div>
<div style="background-color:Aqua; width:100%;height:150px;"></div>
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
<div style="background-color:Green; width:100%;height:150px;"></div>
<div style="background-color:Blue; width:100%;height:150px;"></div>
<div style="background-color:Olive; width:100%;height:150px;"> 返回頂部</div>
<div style="background-color:Green; width:100%;height:150px;">A</div>
<div style="background-color:Purple; width:100%;height:150px;">jquery</div>
<div style="background-color:Green; width:100%;height:150px;"><a href="http:///a/bjac/6f008786225269ac.htm">原文</a></div>
<div style="background-color:Lime; width:100%;height:150px;"></div>
<div style="background-color:Orange; width:100%;height:150px;">完整代碼</div>
<div style="height:130px;"></div>
<div id="box-cl-keleyi-com" class="box-cl-keleyi-com">
<a href="#" id="sideBarTab">
<img src="http:///keleyi/phtml/jqmenu/3/slide-button.gif" alt="sideBar" id="sideBarImg" />
<img src="http:///keleyi/phtml/jqmenu/3/slide-button-active.gif" alt="sideBar" id="sideBarImg-a" style="display:none"/>
</a>
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<div class="part-cl">
<h3>第一章</h3>
<ul>
<li><a href="http:///a/bjac/n5kb0y0j.htm">jQ的find()方法</a></li><li><a href="http:///a/bjac/mt97p5y9.htm">jQuery實現側邊導航欄效果</a></li><li><a href="http:///a/bjac/phhq4ecr.htm">jquery顯示當前時間詳細信息</a></li><li><a href="http:///a/bjac/1juhjegr.htm">jquery替換不存在的圖片</a></li><li><a href="http:///a/bjac/c6gu08gm.htm" title="jQuery友善的圖片輪播(含首頁和尾頁)">jQuery友善的圖片輪播</a></li><li><a href="http:///a/bjac/opnw2awa.htm">jQ的appendTo方法</a></li><li><a href="http:///a/bjac/0vpch15n.htm">jQ的append方法</a></li>
</ul>
<h3>第二章</h3>
<ul>
<li><a href="http:///a/bjac/s3sw6q5t.htm">圖片輪播切換匯總</a></li><li><a href="http:///a/bjac/516kx8p1.htm">JS/jQ遮罩層集合</a></li><li><a href="http:///a/bjac/veugsmw9.htm">菜單大全</a></li>
</ul>
<h3>第三章</h3>
<ul>
<li><a href="http:///a/bjac/omqqguiy.htm">CSS去掉超鏈接的下劃線</a></li><li><a href="http:///a/bjac/75gkgji9.htm">純CSS有箭頭的DIV層</a></li><li><a href="http:///a/bjac/64288facf02eebd7.htm">CSS兼容設置DIV最小高度</a></li><li><a href="http:///a/bjac/27c68fa20d9cdc3a.htm">淘寶導航CSS代碼</a></li><li><a href="http:///a/bjac/4ed55b7692f4457f.htm">TOP排行榜或新聞列表</a></li><li><a href="http:///a/bjac/7f8398a9de358d16.htm">font-family中文字體示例</a></li>
</ul>
<h3>第四章</h3>
<ul>
<li><a href="http:///a/bjac/5ny3tgps.htm">js獲取本機ip地址</a></li><li><a href="http:///a/bjac/aglma9a4.htm">js模塊化、模塊加載器</a></li><li><a href="http:///a/bjac/uuisa1wq.htm" title="javascript三種彈出對話框的用法實例">js三種彈出對話框</a></li><li><a href="http:///a/bjac/uhclplh0.htm">實現點擊按鈕後變灰</a></li>
</ul>
</div>
</div>
</div>
<div> </div>
</div>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
/**
* 滑過顯示,滑出隱藏
*/
$('#sideBarTab').on('mouseenter', function () {
$('#sideBarContents').show();
$('#sideBarImg').hide();
$('#sideBarImg-a').show();
})
$('#box-cl-keleyi-com').on('mouseleave', function () {
$('#sideBarContents').hide();
$('#sideBarImg-a').hide();
$('#sideBarImg').show();
});
});
</script>
</body>
</html>
其中用到了on函數，請參考http:///a/bjac/4013kn5s.htm