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. email之TO、CC、BCC意义

    CC 英文全称是 Carbon Copy(抄送); BCC英文全称是 Blind CarbonCopy(暗抄送). 两者的差别在于在BCC栏中的收件人能够看到全部的收件人名(TO,CC,BCC),而在 ...

  2. layoutParams-动态更改某个控件的margin

    其实它的方法也非常的简单,如下 LinearLayout.LayoutParams layoutParams = (LayoutParams) bt1.getLayoutParams(); int a ...

  3. [NOI.AC#30]candy 贪心

    链接 一个直观的想法是,枚举最小的是谁,然后二分找到另外一个序列对应位置更新答案,复杂度 \(O(NlogN)\) 实际上不需要二分,因为每次当最大的变大之后,原来不行的最小值现在也一定不行,指针移动 ...

  4. 22. Node.Js Buffer类（缓冲区）-（二）

    转自:https://blog.csdn.net/u011127019/article/details/52512242

  5. 43.c++指针类型转换

    数据类型转换(static_cast) //数据类型转换 printf("%d\n", static_cast<int>(10.2)); 指针类型转换(reinterp ...

  6. Zabbix监控,Mysql,Nginx,PHP-FTPM

    一 Zabbix监控Mysql 监控Mysql,Zabbix提供了一个监控模板,所有可以直接使用.或者使用Percona提供的监控模板. 1. 使用自带监控模板 1.1.1 编写监控模板 #!/bin ...

  7. BIND View 加速南北方网络互访

            BIND View 加速南北方网络互访          南北方网络互访的问题一直以来就是广大运维人员的心病,两大网络运营商之间的连接带宽比较有限,跟不上互联网业务发展的速度.如何才能 ...

  8. 【2017 Multi-University Training Contest - Team 9】Numbers

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6168 [题意] 有一个长度为n的序列a1--an,根据a序列生成了一个b序列,b[i] = a[i]+a ...

  9. xcode6.3 模版位置

    /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Templ ...

  10. curl如何发起DELETE/PUT请求

    curl如何发起DELETE/PUT请求 DELETE: curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'DELETE'); PUT: curl_setopt($ch ...