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


Posted in Javascript onOctober 17, 2013

常用的左侧导航效果,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(); 
}) ;
Javascript 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 #Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 #Javascript
JS操作数据库的实例代码
Oct 17 #Javascript
JavaScript调用后台的三种方法实例
Oct 17 #Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 #Javascript
JS实现时间格式化的方式汇总
Oct 16 #Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 #Javascript
You might like
php中的实现trim函数代码
2007/03/19 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
js处理表格对table进行修饰
2014/05/26 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
python实现彩票系统
2020/06/28 Python
详解python中递归函数
2019/04/16 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
python两个list[]相加的实现方法
2020/09/23 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
最新创业融资计划书
2014/01/19 职场文书