京东导航，添加中间的弹框栏，使用position定位，放在左侧栏的li标签里面，成为一个整体，保证鼠标在弹框里的时候，弹框不消失：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script src="jquery.js" type="text/javascript"></script>

     <style type="text/css">

         *{

             margin: 0;

         }

         #head img{

             position: absolute;

             left: 50%;

             margin-left:-595px;

         }

         #head{

             position: relative;

             width: 100%;

             height: 80px;

             background-color: #f00;

         }

         .clear{

             clear: both;

         }

         #nav li{

             list-style: none;

             float: left;

             border: 1px solid #000;

             font-family: 微软雅黑;

             font-weight: bold;

             cursor: pointer;

             margin-left: 10px;

         }

         #nav{

             margin-left: 200px;

         }

         #left li{

             list-style: none;

             margin-top: 0px;

             border: 1px solid #000;

             padding-top: 2px;

             padding-bottom: 2px;

             padding-left: 10px;

             font-family: 微软雅黑;

             color: #fff;

         }

         #left ul{

             background-color: #888;

             width: 190px;

             height: 480px;

             margin-left: 50px;

             margin-top: 10px;

             padding-top: 10px;

             padding-left: 0px;

         }

         #left span{

             cursor: pointer;

         }

         #left{

             float: left;

             position: relative;

         }

         #images{

             margin-left: 10px;

             float: left;

             position: relative;

         }

         #largeImg{

             /*margin-left: 10px;*/

             margin-top: 10px;

         }

         #smallImg{

             margin-top: 10px;

             /*margin-left: 10px;*/

         }

         #welcom{

             width: 190px;

             height: 480px;

             background-color: #00f;

             margin-top: 10px;

             margin-left: 10px;

             float: left;

             position: relative;

         }

         #main{

             position: relative;

             /*position: absolute;*/

             left: 50%;

             margin-left: -595px;

         }

         .right{

             position: absolute;

             top: 10px;

             width: 800px;

             height: 480px;

             margin-left: 180px;

             margin-top: 0px;

             border: 1px solid #000;

             z-index: 3;

             color: #000;

             background-color: #eee;

             display: none;

         }

     </style>

 </head>

 <body>

     <!-- 广告 -->

     <div id="head"><img src="head.jpg"></div>

     <!-- main把三个div合到一起 -->

     <div id="main">

         <!-- 上侧导航 -->

         <div id="nav">

             <ul>

                 <li>秒杀</li>

                 <li>优惠券</li>

                 <li>闪购</li>

                 <li>拍卖</li>

             </ul>

         </div>

         <div class="clear"></div>

         <!-- 左侧导航 -->

         <div id="left">

             <ul>

                 <li><span>家用电器</span>

                     <div class="right">

                         <div>电视/空调/洗衣机</div>

                         <div>电视/空调/洗衣机</div>

                         <div>电视/空调/洗衣机</div>

                         <div>电视/空调/洗衣机</div>

                         <div>电视/空调/洗衣机</div>

                         <div>电视/空调/洗衣机</div>

                     </div>

                 </li>

                 <li><span>手机/数码</span>

                     <div class="right">

                         <div>手机/对讲机/数码相机</div>

                     </div>

                 </li>

                 <li><span>男装/女装</span>

                     <div class="right">

                         <div>羽绒服/棉服/羊毛衫</div>

                     </div>

                 </li>

                 <li><span>电脑/办公</span>

                     <div class="right">

                         <div>笔记本/平板/显示器</div>

                     </div>

                 </li>

             </ul>

         </div>

         <!-- 右侧广告 -->

         <div id="images">

             <div id="largeImg">

                 <img src="1.jpg" alt="">

             </div>

             <!-- <div class="clear"></div> -->

             <div id="smallImg">

                 <img src="4.jpg" alt="">

                 <img src="5.jpg" alt="">

             </div>

         </div>

         <!-- 最右侧充话费 -->

         <div id="welcom">

             <div>注册</div>

             <div>登录</div>

         </div>

     </div>

 </body>

 <script>

     $('#nav li').hover(

         function(){

             $(this).css({"color":"#f00"});

         },

         function(){

             $(this).css({"color":"#000"});

         }

     );

     $('#left li').hover(

         function(){

             $(this).css({"background-color":"#ddd"});

             $(this).children('.right').show();

         },

         function(){

             $(this).css({"background-color":"#888"});

             $(this).children('.right').hide();

         }

     );

     $('#left span').hover(

         function(){

             $(this).css({"color":"#f00"});

         },

         function(){

             $(this).css({"color":"#fff"});

         }

     );

 </script>

 </html>

Jquery学习笔记（8）--京东导航菜单（2）增加弹框的更多相关文章

  1. jquery学习笔记(4)--实现table隔行变色以及单选框选中

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  2. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  3. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

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

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

  5. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  6. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  7. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

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

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

  9. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

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

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

随机推荐

  1. zigbee 学习笔记

    在德州仪器的站点:http://www.ti.com.cn/tool/cn/z-stack上下载安装zigbee2007协议栈版,我的是ZStack-CC2530-2.3.0-1.4.0. 以下演示一 ...

  2. iOS: performXXX的几种方法总结：

    performXXX的用法: 视图切换: ※根据segue标识符切换视图 performSegueWithIdentifier:(NSString *) identifier sender:(id) ...

  3. ISP图像调试工程师——自动白平衡（熟悉3A算法）

    http://blog.csdn.net/wzwxiaozheng/article/details/40586293 https://wenku.baidu.com/view/24632048767f ...

  4. MyEclipse安装后需要进行的配置

    摘自: http://hi.baidu.com/timesten/item/c826983a6f9654ffde2221c0 MyEclipse安装后需要进行的配置 在MyEclipse中编写Web ...

  5. J2EE，LAMP和ASP.NET三者比较

    为了开发一个动态网站出来,有3中选择,三种选择是一种三足鼎立的一种状态:LAMP   J2EE  .NET,各有各的好,下面自己总结一下 1.ASP.NET ASP.NET 的开发框架是 Window ...

  6. Python自然语言处理资料库

    1.LTP [1]- 语言技术平台(LTP) 提供包括中文分词.词性标注.命名实体识别.依存句法分析.语义角色标注等丰富. 高效.精准的自然语言处理技术.经过哈工大社会计算与信息检索研究中心 11 年 ...

  7. linux最常用命令整理

    linux vim命令跳转到文档开头或末尾 gg:命令将光标移动到文档开头 G:命令将光标移动到文档末尾 <hr/> 网络 # ifconfig # 查看所有网络接口的属性 # iptab ...

  8. Win8 Metro中文件读写删除与复制操作

    Win8Metro中,我们不能在向以前那样调用WIN32的API函数来进行文件操作,因此,下面就来介绍一下Win8 Metro中文件的读写操作. 1 Windows 8 Metro Style App ...

  9. webDriver API——第5部分Special Keys

    The Keys implementation. class selenium.webdriver.common.keys.Keys Bases: object Set of special keys ...

  10. 一个编译可执行jar包 jar包中不包含resources下config.properties且可以读到config.properties文件且classpath中有当前路径的pom

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...