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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
php微信开发自定义菜单
2016/08/27 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
jquery 问答知识整理
2010/02/11 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
详解Django中Request对象的相关用法
2015/07/17 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
python中metaclass原理与用法详解
2019/06/25 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
C语言面试题
2015/10/30 面试题
企业年检委托书范本
2014/10/14 职场文书
自主招生专家推荐信
2015/03/26 职场文书
创业计划书之服装
2019/10/07 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL