jquery-9 京东和酒仙网左侧导航如何实现

一、总结

一句话总结：布局的话多用定位，由底往上一层层的来布。

1、如何实现导航向div的平滑滑动？

右侧div和左侧的li一定要放在一起

127                     <li>

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

129                         <div class='right'>

130                             <h3>家用电器</h3>

131                             <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>

132                         </div>

133                     </li>

二、京东和酒仙网左侧导航如何实现

酒仙网左侧导航

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

             margin:0px;

             padding:0px;

         }

         .top{

             width:1366px;

             height:90px;

             overflow: hidden;

         }

         .top img{

             margin-left:-250px;

         }

         .nav{

             height:15px;

         }

         .menu{

             height:470px;

             background:url('power.jpg') -300px;

         }

         .div1{

             height:40px;

             overflow: hidden;

             background: #900;

             color:#fff;

         }

         .div1 ul{

             width:1200px;

             margin:0 auto;

             list-style:none;

         }

         .div1 ul li{

             float: left;

             line-height: 40px;

             margin-left:30px;

             cursor: pointer;

         }

         .banner{

             background: #ce171f;

             width:150px;

             text-align: center;

             margin-left:0px!important;

         }

         .div2{

             width:1200px;

             height:470px;

             margin:0 auto;

             position: relative;

         }

         .div3{

             width:150px;

             height:470px;

             background: #b61d1d;

         }

         .div3 ul{

             list-style:none;

         }

         .div3 ul li{

             padding-left:15px;

             line-height: 30px;

         }

         .div3 ul li span{

             color:#fff;

         }

         .div3 ul li:hover{

             cursor: pointer;

         }

         .right{

             width:1020px;

             height:440px;

             background: #eee;

             position: absolute;

             top:0px;

             left:150px;

             padding:15px;

             color:#000;

             display: none;

         }

         .info{

             width:1200px;

             margin:0 auto;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <div class='top'>

         <img src="top.jpg" height='100%'>

     </div>

     <div class="nav"></div>

     <div class="div1">

         <ul>

             <li class='banner'>全部商品分类</li>

             <li>首页</li>

             <li>葡萄酒馆</li>

             <li>清仓</li>

             <li>团购</li>

             <li>新品发现</li>

         </ul>

     </div>    

     <div class="menu">

         <div class="div2">

             <div class="div3">

                 <ul>

                     <li>

                         <span>家用电器</span>

                         <div class='right'>

                             <h3>家用电器</h3>

                             <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>

                         </div>

                     </li>

                     <li>

                         <span>手机数码</span>

                         <div class='right'>

                             <h3>手机数码</h3>

                             <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>

                         </div>

                     </li>

                     <li>

                         <span>电脑办公</span>

                         <div class='right'>

                             <h3>电脑办公</h3>

                             <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>

                         </div>

                     </li>

                     <li>

                         <span>家居家装</span>

                         <div class='right'>

                             <h3>家居家装</h3>

                             <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>

                         </div>

                     </li>

                 </ul>

             </div>

         </div>

     </div>

     <div class="info">

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

         <h1>linux is very much!</h1>

     </div>

 </body>

 <script>

 $('.div3 li').mouseenter(function(){

     x=$(this).position().left+150;

     y=$(this).position().top;

     $(this).css({'background':'#eee'});

     $(this).find('span').css({'color':'#b61d1d'});

     $('.div3 li').not($(this)).css({'background':'#b61d1d'});

     $(this).find('.right').css({'top':y+'px','left':x+'px'}).show();

     $('.right').not($(this).find('.right')).hide();

 });

 $('.div3 li').mouseleave(function(){

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

     $(this).find('span').css({'color':'#fff'});

     $(this).css({'background':'#b61d1d'});

 });

 </script>

 </html>
 

jquery-9 京东和酒仙网左侧导航如何实现的更多相关文章

  1. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  2. jquery模板制作左侧导航组件

    /** * Created by bmk on 16-4-25. * * 用法:在自己的js里面把左侧导航的相关图标和对应的列表项名称如下编写: * 版本更新日至按需添加 * 在js中的RNA.run ...

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

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

  4. 简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...

  5. jQuery防京东浮动网站楼层导航代码

    jQuery防京东浮动网站楼层导航代码   <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" ...

  6. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  7. （转）jquery仿天猫商城左侧导航菜单

    原文地址:http://www.cnblogs.com/WinKi/p/3398824.html 之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果 ...

  8. 在ECSHOP后台左侧导航中增加新菜单

    在ECSHOP后台左侧导航中增加新菜单 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2011-11-08   有个别高级用户(懂PHP的),提到这样的问题: 在后台管 ...

  9. jQuery背景跟随鼠标移动的网页导航

    首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search     首页 PSD模板 CSS模板 特效插件 ...

随机推荐

  1. Android仿Win8界面的button点击

    今天没事的时候,感觉Win8的扁平化的button还是挺好看的,就研究了下怎样在安卓界面实现Win8的扁平化button点击效果. 发现了一个自己定义的View能够实现扁平化button效果,话不多说 ...

  2. [NOIP2013]车站分级 解题报告

    妈蛋这道普及组水(神)题搞了我非常久. 一. 首先一个非常显然的事情就是每一个火车告诉了站与站之间的等级关系,所以拓扑求最长路. 可是发现暴力建边的话最坏能够达到500*500,所以时间复杂度有O(M ...

  3. animation- 动画效果实现（xml形式实现）

    1.定义xml动画 1)在anim文件夹下定义xml文件 解释:这个文件夹下面的文件会被默认为动画文件,如果这个文件不存在,需要自己创建 display_result_anim.xml <?xm ...

  4. 使用Iperf调整网络

    使用Iperf调整网络     Iperf 是一个 TCP/IP 和 UDP/IP 的性能测量工具,通过调谐各种参数可以测试TCP的最大带宽,并报告带宽.延迟,最大段和最大传输单元大小等统计信息.Ip ...

  5. 转一篇对EJB理解的文章

    1. 我们不禁要问,什么是"服务集群"?什么是"企业级开发"? 既然说了EJB 是为了"服务集群"和"企业级开发",那么 ...

  6. JS 实现图片模态框，幻灯片，跑马灯功能

    网站中常用的幻灯片和模态框,使用 HTML.JavaScript 与 CSS 来创建 Lightbox,类似相册预览功能.可以运用到视频网站,商城,相册上去 参考了菜鸟教程,有兴趣自己去看 HTML/ ...

  7. BZOJ2631: tree（LCT）

    Description 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一: + u v c:将u到v的路径上的点的权值都加上自然数c: - u1 v1 u2 v2 ...

  8. 阅读笔记——Servlet

    什么是Servlet Servlet是用java编写的运行在web服务器中的程序,因此它可以调用服务器端的类,它也可以被调用,它本身就是一个类. Servlet的工作原理 servlet由web服务器 ...

  9. 【例题 8-4 UVA - 11134】Fabled Rooks

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然把问题分解成两个子问题. x轴和y轴分别做. 即n个点要求第i个点在[li,ri]范围内.(ri<=n) 问是否可行. 按 ...

  10. WPF MVVM示例自定义模板数据绑定

    在触摸屏设备上.由于列表是的信息展示不是非常直观和便捷操作. 所以也就出现了很多用面板控件:类似win10的Metro风格, 所以抽空做了一个WPF面板控件. 话不多上 , 先上一个示例图. 为了便于 ...