京东导航，添加中间的弹框栏，使用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. pthread_join和pthread_detach的用法

    //从别处拷贝过来的,只作为自己查看方便,原作者不详,请谅解. 一:关于join join join是三种同步线程的方式之一.另外两种分别是互斥锁(mutex)和条件变量(condition vari ...

  2. pymongo常见的高级用法

    pymongo是python中基于mongodb数据库开发出来的,比mongoengine要高级一些,也要好用一些. 基本的增删查改就不说了 insert() delete() find() upda ...

  3. 贯通Spark Streaming JobScheduler内幕实现和深入思考

    本节主要内容: 一.SparkStreaming Job生成深度思考 二.SparkStreaming Job生成源码解析 JobScheduler的地位非常的重要,所有的关键都在JobSchedul ...

  4. Android中为你的应用程序添加桌面快捷方式

    public void ShortCut(View view){ createDeskShortCut(this,getString(R.string.short_cut),R.drawable.up ...

  5. Navicat for SQL Server创建连接提示错误08001怎么办

    创建连接之后提示如下错误 打开SQL Server配置工具,把能打开的都打开(什么远程连接,什么SQL Server Browser之类的) 你再创建连接的时候就有不止一个连接了,连那些Named P ...

  6. SOA初探

    背景 曾今SOA的概念犹如今日“云计算.大数据”一样,被炒得火热,不少企业便纷纷响应,并宣称会拥抱和实施SOA.而事实上,业界出现了两种极端:一种是由于各类文章和书籍关于SOA的描述往往太过抽象,再加 ...

  7. iOS 判断NSString是否包含某个字符串

    主要是使用3个方法 rangeOfString    是否包含 hasPrefix      是否在前缀包含 hasSuffix           是否在末尾包含 如代码: //判断字符是否包含某字 ...

  8. Android Studio修改项目名和包名

    为了提高开发效率,有时候需要使用现有的一些开源项目,记录一下自己修改项目名和包名的方法. 1.首先,修改包名(清单文件里找), ①展开所有包 ②选中想要修改的包,shift+F6(也可右键Refact ...

  9. [读后感]Java 控制台执行 Jar 传參的编码问题

    下面这版面,太让我纠结了.谁能帮调整一下,... _________________ java -jar test.jar "一二一" 这样传进去的 "一二一" ...

  10. git 的简单用法

    在服务器上建立空白库 ssh 70.0.0.236 mkdir /home/git/[proj_dir] cd /home/git/[proj_dir] git --bare init 将本地代码推送 ...