js实现的常用的左侧导航效果

更新时间：2013年10月17日 17:37:51 作者：

使用js简单实现下常用的左侧导航效果为提高导航性能而生，各位朋友可以参考应用，希望对大家有所帮助

常用的左侧导航效果，JS简单，为提高导航性能而生，各位可以参考应用。

效果展示：

HTML:

 
<!--左侧菜单--> 
<div class="menu"> 
<ul class="menu_list"> 
<li class="even"> 
<p class="menu_title bgfs"><a href="#" target="_blank">服饰箱包</a></p> 
<p class="menu_sort"> 
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a><br/> 
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">饰品</a> 
</p> 
</li> 
<li class="odd"> 
<p class="menu_title bgjs"><a href="#" target="_blank">酒水饮料</a></p> 
<p class="menu_sort"> 
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a><br/> 
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">饰品</a> 
</p> 
</li> 
<li class="even"> 
<p class="menu_title bgjj"><a href="#" target="_blank">居家建材</a></p> 
<p class="menu_sort"> 
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a><br/> 
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">饰品</a> 
</p> 
</li> 
<li class="odd"> 
<p class="menu_title bgcy"><a href="#" target="_blank">餐饮娱乐</a></p> 
<p class="menu_sort"> 
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a><br/> 
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">饰品</a> 
</p> 
</li> 
<li class="even"> 
<p class="menu_title bgmr"><a href="#" target="_blank">美容保健</a></p> 
<p class="menu_sort"> 
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a><br/> 
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">饰品</a> 
</p> 
</li> 
<li class="odd"> 
<p class="menu_title bgjy"><a href="#" target="_blank">教育培训</a></p> 
<p class="menu_sort"> 
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a> 
</p> 
</li> 
<li class="even"> 
<p class="menu_title bggyp"><a href="#" target="_blank">工业品</a></p> 
<p class="menu_sort"> 
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a> 
</p> 
</li> 
<li class="odd"> 
<p class="menu_title bgxqt"><a href="#" target="_blank">新奇特</a></p> 
<p class="menu_sort"> 
<a href="#" target="_blank">女装</a><a href="#" target="_blank">男装</a><a href="#" target="_blank">童装</a><a href="#" target="_blank">包包</a><br/> 
<a href="#" target="_blank">鞋</a><a href="#" target="_blank">饰品</a> 
</p> 
</li> 
</ul> 

<div class="menu_box hide"> 
<div class="menu_cont hide"> 

<div class="menu_cont01"> 
<span class="menu_title_video">项目视频</span> 
<div class="menu_video"> 
<ul> 
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li> 
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li> 
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li> 
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li> 
<li><a href="#" target="_blank"><img src="images/ad/home_53.gif" /></a></li> 
</ul> 
</div> 
<div class="scroll_menu"> 
<span class="prev_menu" href="#"></span> 
<span class="next_menu" href="#"></span> 
<div class="roolbox_menu"> 
<div class="scroll_list_menu"> 
<ul> 
<li> 
<p class="ad_logo ad_fs01"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名" /></a> 
</p> 
<p class="ad_logo"> 
<span class="ad_fs02"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名" /></a> 
</span> 
<span class="ad_fs03"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名" /></a> 
</span> 

</p> 
<p class="ad_logo ad_fs04"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a> 
</p> 
<p class="ad_logo"> 
<span class="ad_fs02"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a> 
</span> 
<span class="ad_fs03"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a> 
</span> 

</p> 
<p class="ad_logo"> 
<span class="ad_fs05"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a> 
</span> 
<span class="ad_fs06"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a> 
</span> 

</p> 
</li> 
<li> 
<p class="ad_logo ad_fs01"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名" /></a> 
</p> 
<p class="ad_logo"> 
<span class="ad_fs02"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名" /></a> 
</span> 
<span class="ad_fs03"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名" /></a> 
</span> 

</p> 
<p class="ad_logo ad_fs04"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a> 
</p> 
<p class="ad_logo"> 
<span class="ad_fs02"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a> 
</span> 
<span class="ad_fs03"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a> 
</span> 

</p> 
<p class="ad_logo"> 
<span class="ad_fs05"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a> 
</span> 
<span class="ad_fs06"> 
<a href="#" target="_blank"><img src="images/ad/home_88.jpg" alt="项目名"/></a> 
</span> 

</p> 
</li> 
</ul> 
</div> 
</div> 
</div> 

<div class="menupic_fsxb"><img src="images/pic_fsxb.png" /></div> 
</div> 



</div> 
<div class="menu_cont hide">2</div> 
<div class="menu_cont hide">3</div> 
<div class="menu_cont hide">4</div> 
<div class="menu_cont hide">5</div> 
<div class="menu_cont hide">6</div> 
<div class="menu_cont hide">7</div> 
<div class="menu_cont hide">8</div> 
</div> 
</div> 
<!--中间项目展示--> 

JS：

复制代码代码如下:

 
$(".menu_list li").mouseenter(function(){ 
$(".menu_box").show(); 
var nav_index = $(".menu_list li").index(this); 
$(".menu_cont").eq(nav_index).show()//滑动菜单对应当前内容 
.siblings().hide(); 
}) ; 
$(".menu").mouseleave(function(){ 

$(".menu_box").hide(); 
}) ; 

您可能感兴趣的文章:

js实现文字列表无缝滚动效果
这篇文章主要为大家详细介绍了js实现文字列表无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
javascript 正则替换 replace(regExp, function)用法
刚在弄网页通过servlet返回的json数据来添加div元素,简单研究了下replace(regExp, function)方式的function参数.
2010-05-05
js实现简易的英汉词典
这篇文章主要为大家详细介绍了js实现简易的英汉词典，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
js根据鼠标移动速度背景图片自动旋转的方法
这篇文章主要介绍了js根据鼠标移动速度背景图片自动旋转的方法,实例分析了javascript操作鼠标与图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
关于layui的动态图标不显示的解决方法
今天小编就为大家分享一篇关于layui的动态图标不显示的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
如何利用JavaScript编写更好的条件语句详解
这篇文章主要给大家介绍了关于如何利用JavaScript编写更好的条件语句的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2020-08-08
js判断选择的时间是否大于今天的代码
判断选择的时间是否大于今天还是蛮实用的，下面与大家分享下具体的实现，感兴趣的朋友可以参考下
2013-08-08
获取JAVASCRIPT时间戳函数的5种方法
JavaScript获得时间戳的方法有五种,后四种都是通过实例化时间对象new Date() 来进一步获取当前的时间戳,JavaScript处理时间主要使用时间对象Date,本文对js时间戳函数获取方法给大家介绍的非常详细,需要的朋友参考下吧
2024-01-01
js实现简单翻牌小游戏
这篇文章主要为大家详细介绍了js实现简单翻牌小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
layer的prompt弹出框,点击回车,触发确定事件的方法
今天小编就为大家分享一篇layer的prompt弹出框,点击回车,触发确定事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09

js实现的常用的左侧导航效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具