原文地址:http://www.cnblogs.com/WinKi/p/3398824.html

之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码。以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑。我将一步一步的实现拼凑过程,希望对你有所帮助。

Demo在ie8 、 谷歌、 火狐、遨游、ie6 浏览器下运行,效果良好!但在ie6下有个bug,就是滚动条可以无限滚动,没有找到好的解决方案,哪位朋友知道怎么改告诉我一下,谢谢!如果没有更好的方法我就打算用js来解决!

好了,可以先下载例子来看看(Demo)

看看效果图:

一、定位左侧整体菜单栏

.slides {
position: fixed;
top: 22px;
z-index: 1;
width: 200px;
height: 500px;
left: 5px;
background: #fff;
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop));
_margin-top: 22px;
}
<div class="slides"></div>

为了测试,在.slides里加入background-color:#eee;把body的高度改为1200px,背景色 background: #F6E8CB。这段可以直接复制去测试,你会发现无论的怎么滚动,都是会固定在左边。

_position(带 “_” 都是)是为了兼容ie6,只有ie6能识别它。但是ie6会有滚动闪烁的问题,加上*html {background-image: url(about:blank); background-attachment: fixed;}就可以解决了!

二、导航菜单选项

.slides_center {
width: 200px;
height: 450px;
overflow: auto;//内容太多时出现滚动条
} .slides_ul {
} .menu {
padding-left: 34px;
line-height: 34px;
height: 34px;
font-weight: bold;
cursor: pointer;
display: block;
}
/* 鼠标点击显示效果 */
.first {
background: url("../img/ICON.gif") no-repeat;
} .close {
background-position: 5px -37px;
} .on {
background-position: 5px 6px;
} <div class="slides_center">
<ul class="slides_ul">
<li>
<a class="menu first close">运动户外</a> <div class="selectSlide hide">
<span><a href="#">运动鞋</a></span>
<span><a href="#">运动服</a></span>
<span><a href="#">跑步鞋</a></span>
<span><a href="#">板鞋</a></span>
<span><a href="#">户外</a></span>
</div>
</li>
........
</ul>
</div>

.slides_center样式 的overflow:auto是为了让导航菜单很多的时候出现滚动条。每行的背景图  可以通过background-position 来做定位。

三、鼠标经过出现右边的菜单列表

.menu_over {
background-color: #fff;
position: absolute;//绝对定位固定在右边
min-width: 600px;//设置最小宽度
_width: 600px;
min-height: 400px;
_height: 400px;
overflow: auto;
border: 1px solid #DFDFDF;
box-shadow: 3px 3px 10px #878787;//css3样式(ie8 以下版本没效果)
left: 200px;//定位
top: 26px;
}
<!-- 右边菜单 -->
<div class="menu_over hide"><h3>运动户外</h3></div>

四、jquery 鼠标点击,经过等方法

<script type="text/javascript">
$(function () {
$('.slides_ul li:odd').css("background-color", "#f1f1f1"); //菜单栏隔行变色
//jquery 链式操作 点击事件
$('.menu').click(function () {
// jQ slideToggle方法 段落滑上或滑下 200是滑动速度,stop():停止当前正在运行的动画(迅速点击很多次,只执行一次效果)
$(this).siblings('.selectSlide').stop().slideToggle(200);
 if($(this).hasclass("close"))             {                 $(this).removeClass("close").addClass("on");             }             else             {                 $(this).removeClass("on").addClass("close");             }         });
//展开所有 效果
$('#showall').click(function () {
$('.selectSlide').stop().slideDown();//jQ slideDown() 段落滑下
$('.menu').removeClass("close").addClass("on");
$(this).removeClass("span1").addClass("span1on");
$('#closeall').removeClass("span2").addClass("span2on"); });
//关闭所有 效果
$('#closeall').click(function () {
$('.selectSlide').stop().slideUp();
$('.menu').removeClass("on").addClass("close");
$(this).removeClass("span2on").addClass("span2");
$('#showall').removeClass("span1on").addClass("span1");
});
$('.slides_ul li').mousemove(function () { //鼠标经过某个菜单,右边显示对应的列表 //除了与鼠标经过的菜单所相对应的('.menu_over')这个div显示,其他的div都隐藏。 //eq($(this).index())通过索引与鼠标经过的li相对应,siblings('.menu_over')表示除了他自己本身外其他的('.menu_over')都隐藏。
$('.menu_over').eq($(this).index()).show().siblings('.menu_over').hide();
});
//鼠标离开 效果
$('.slides').mouseleave(function(){
$('.menu_over').hide();
});
});

五、结束

重要的部分都已经贴出来,完整的效果可以下载demo看看。

css代码很多地方都可以使用全局样式,比如可以使用slides_ul>li>a (slides_ul li a 会影响后面的样式) 这种方式来写样式,这样就不需要在每个div 或者 a标签去定义class了。但是这种方式ie6是不支持的。所以如果你不需要兼容ie6,就改为slides_ul>li>a这种方式。

没有太多的、复杂的jquery,都是一些平时经常用到的方法,把一个个小的效果整合在一起就慢慢变成一个我们想要的效果了。

这个demo没有很好的重构,只是把要显示的效果做出来,有兴趣的话可以把它重构成小插件。外观上需要根据自己的需求去改宽度,高度,定位等。

如果您觉得还不错,赞一个呗!!

版权所有,转载请注明出处!

(转)jquery仿天猫商城左侧导航菜单的更多相关文章

  1. jquery仿天猫商城左侧导航菜单

    之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在 ...

  2. 使用 EasyUI 创建左侧导航菜单

    使用 JQuery EasyUI 创建左侧导航菜单,菜单的数据由后台服务提供. 效果图 HTML 元素 <div id="menuAccordion"></div ...

  3. 一款基jquery超炫的动画导航菜单

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览   ...

  4. jQuery漂亮图标的垂直导航菜单

    效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...

  5. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  6. jQuery ui背景色动态渐变导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery仿天猫完美加入购物车

    转载自:http://www.iteye.com/topic/1138064 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  8. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  9. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

随机推荐

  1. RAC修改数据库的spfile位置

    RAC修改spfile位置 [root@rac1 ~]# su - oracle [oracle@rac1 ~]$ sqlplus  / as sysdba SQL*Plus: Release 11. ...

  2. java返回集合为null还是空集合

    个人认为在自己写接口时,需要返回集合时返回一个空集合,比如mybatis查询如果返回一个集合,结果为空时也会返回一个空集合而不是null. 那么这样有什么好处呢?最大的好处就是调用方不用在判断是否为n ...

  3. Linux常用命令(个人使用频率较高)

    1,日志查看 tail(cat) -f|grep ERROR(任意字符) filepath (任意行数) -f|grep ERROR(任意字符) filepath 2,查看目录&授权 file ...

  4. laravel查看sql语句

    我自己是用第一种方法来调试的,第三种不行 不知道为啥 laravel查看sql语句 方法一: 我们有时候想测试一段代码生产的 SQL 语句,比如: 我们想看 App\User::all(); 产生的 ...

  5. 将java程序打包成exe文件

    一. 1. 项目右击,导出 jar文件 2. 下一步,选择 3. 完成 二. 1. 下载exe4j,并破解 2. 其他的步骤都好说,我主说这个步骤,一定要讲所有引用的jar包放到里面否则会报找不到文件 ...

  6. mysql事务之一:MySQL数据库事务隔离级别(Transaction Isolation Level)及锁的实现原理

    一.数据库隔离级别 数据库隔离级别有四种,应用<高性能mysql>一书中的说明: 然后说说修改事务隔离级别的方法: 1.全局修改,修改mysql.ini配置文件,在最后加上 1 #可选参数 ...

  7. 1116 Come on! Let's C

    题意:略. 思路:略. 代码: #include <cstdio> #include <cmath> ; }; bool isPrime(int n) { ) return f ...

  8. RPC框架简易实现

           RPC(Remote Procedure Call Protocol)——远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而不需要了解底层网络技术的协议.RPC协议假定某些 ...

  9. Maria数据库

    项目上要进行数据库选型,业务上来讲,数据是非常结构化的数据,使用传统关系数据库更适合:另外项目采用微服务框架,每个服务的数据库应该尽可能轻量级, 最后考虑Maria数据库. MariaDB简介: Ma ...

  10. [置顶] TIM_GetCounter与TIM_GetCapture1的区别

    /** * @brief Gets the TIMx Input Capture 1 value. * @param TIMx: where x can be 1 to 17 except 6 and ...