体验效果：
http://keleyi.com/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.com/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;">keleyi.com</div>
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
<div style="background-color:Green; width:100%;height:150px;">keleyi.com</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://keleyi.com/a/bjac/6f008786225269ac.htm">原文</a></div>
<div style="background-color:Lime; width:100%;height:150px;">keleyi.com</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.com/keleyi/phtml/jqmenu/3/slide-button.gif" alt="sideBar" id="sideBarImg" />
<img src="http://keleyi.com/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://keleyi.com/a/bjac/n5kb0y0j.htm">jQ的find()方法</a></li><li><a href="http://keleyi.com/a/bjac/mt97p5y9.htm">jQuery实现侧边导航栏效果</a></li><li><a href="http://keleyi.com/a/bjac/phhq4ecr.htm">jquery显示当前时间详细信息</a></li><li><a href="http://keleyi.com/a/bjac/1juhjegr.htm">jquery替换不存在的图片</a></li><li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm" title="jQuery友善的图片轮播(含首页和尾页)">jQuery友善的图片轮播</a></li><li><a href="http://keleyi.com/a/bjac/opnw2awa.htm">jQ的appendTo方法</a></li><li><a href="http://keleyi.com/a/bjac/0vpch15n.htm">jQ的append方法</a></li>
</ul>
<h3>第二章</h3>
<ul>
<li><a href="http://keleyi.com/a/bjac/s3sw6q5t.htm">图片轮播切换汇总</a></li><li><a href="http://keleyi.com/a/bjac/516kx8p1.htm">JS/jQ遮罩层集合</a></li><li><a href="http://keleyi.com/a/bjac/veugsmw9.htm">菜单大全</a></li>
</ul>
<h3>第三章</h3>
<ul>
<li><a href="http://keleyi.com/a/bjac/omqqguiy.htm">CSS去掉超链接的下划线</a></li><li><a href="http://keleyi.com/a/bjac/75gkgji9.htm">纯CSS有箭头的DIV层</a></li><li><a href="http://keleyi.com/a/bjac/64288facf02eebd7.htm">CSS兼容设置DIV最小高度</a></li><li><a href="http://keleyi.com/a/bjac/27c68fa20d9cdc3a.htm">淘宝导航CSS代码</a></li><li><a href="http://keleyi.com/a/bjac/4ed55b7692f4457f.htm">TOP排行榜或新闻列表</a></li><li><a href="http://keleyi.com/a/bjac/7f8398a9de358d16.htm">font-family中文字体示例</a></li>
</ul>
<h3>第四章</h3>
<ul>
<li><a href="http://keleyi.com/a/bjac/5ny3tgps.htm">js获取本机ip地址</a></li><li><a href="http://keleyi.com/a/bjac/aglma9a4.htm">js模块化、模块加载器</a></li><li><a href="http://keleyi.com/a/bjac/uuisa1wq.htm" title="javascript三种弹出对话框的用法实例">js三种弹出对话框</a></li><li><a href="http://keleyi.com/a/bjac/uhclplh0.htm">实现点击按钮后变灰</a></li>
</ul>
</div>
</div>
</div>
<div> </div>
</div>
<script type="text/javascript" src="http://keleyi.com/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://keleyi.com/a/bjac/4013kn5s.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.com/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;">keleyi.com</div>
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
<div style="background-color:Green; width:100%;height:150px;">keleyi.com</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://keleyi.com/a/bjac/6f008786225269ac.htm">原文</a></div>
<div style="background-color:Lime; width:100%;height:150px;">keleyi.com</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.com/keleyi/phtml/jqmenu/3/slide-button.gif" alt="sideBar" id="sideBarImg" />
<img src="http://keleyi.com/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://keleyi.com/a/bjac/n5kb0y0j.htm">jQ的find()方法</a></li><li><a href="http://keleyi.com/a/bjac/mt97p5y9.htm">jQuery实现侧边导航栏效果</a></li><li><a href="http://keleyi.com/a/bjac/phhq4ecr.htm">jquery显示当前时间详细信息</a></li><li><a href="http://keleyi.com/a/bjac/1juhjegr.htm">jquery替换不存在的图片</a></li><li><a href="http://keleyi.com/a/bjac/c6gu08gm.htm" title="jQuery友善的图片轮播(含首页和尾页)">jQuery友善的图片轮播</a></li><li><a href="http://keleyi.com/a/bjac/opnw2awa.htm">jQ的appendTo方法</a></li><li><a href="http://keleyi.com/a/bjac/0vpch15n.htm">jQ的append方法</a></li>
</ul>
<h3>第二章</h3>
<ul>
<li><a href="http://keleyi.com/a/bjac/s3sw6q5t.htm">图片轮播切换汇总</a></li><li><a href="http://keleyi.com/a/bjac/516kx8p1.htm">JS/jQ遮罩层集合</a></li><li><a href="http://keleyi.com/a/bjac/veugsmw9.htm">菜单大全</a></li>
</ul>
<h3>第三章</h3>
<ul>
<li><a href="http://keleyi.com/a/bjac/omqqguiy.htm">CSS去掉超链接的下划线</a></li><li><a href="http://keleyi.com/a/bjac/75gkgji9.htm">纯CSS有箭头的DIV层</a></li><li><a href="http://keleyi.com/a/bjac/64288facf02eebd7.htm">CSS兼容设置DIV最小高度</a></li><li><a href="http://keleyi.com/a/bjac/27c68fa20d9cdc3a.htm">淘宝导航CSS代码</a></li><li><a href="http://keleyi.com/a/bjac/4ed55b7692f4457f.htm">TOP排行榜或新闻列表</a></li><li><a href="http://keleyi.com/a/bjac/7f8398a9de358d16.htm">font-family中文字体示例</a></li>
</ul>
<h3>第四章</h3>
<ul>
<li><a href="http://keleyi.com/a/bjac/5ny3tgps.htm">js获取本机ip地址</a></li><li><a href="http://keleyi.com/a/bjac/aglma9a4.htm">js模块化、模块加载器</a></li><li><a href="http://keleyi.com/a/bjac/uuisa1wq.htm" title="javascript三种弹出对话框的用法实例">js三种弹出对话框</a></li><li><a href="http://keleyi.com/a/bjac/uhclplh0.htm">实现点击按钮后变灰</a></li>
</ul>
</div>
</div>
</div>
<div> </div>
</div>
<script type="text/javascript" src="http://keleyi.com/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://keleyi.com/a/bjac/4013kn5s.htm
扫一扫
960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
