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. ContentValues的使用

    什么是 ContentValues类? ContentValues类和 Hashtable比较类似,它也是负责存储一些名值对,但是它存储的名值对当中的名是一个String类型,而值都是基本类型. 插入 ...

  2. php课程 18-60 cookie和session的最主要区别是什么

    php课程 18-60 cookie和session的最主要区别是什么 一.总结 一句话总结:存储位置不同:cookie存储在客户端:session存储在服务端. 1.cookie和session在p ...

  3. Hp Open View安装使用视频

    去年完成的cisco works 2000操作(http://chenguang.blog.51cto.com/blog/350944/124729)视频深受广大博友欢迎许多人来信咨询,最近刚做完一个 ...

  4. jmeter--FTP测试

    FTP服务主要提供上传和下载功能.有时间需要我们测试服务器上传和下载的性能.在这里我通过JMeter做一个FTP测试计划的例子. 当然,JMeter官方网站的用户手册也有例子,但由于版本较早,我也算是 ...

  5. 一个小的考试系统 android 思路

    一个小的考试系统 android 思路 假如有 100 组,每组有4个单选钮,设置超时检测确认后去测结果估分视图去切换,如果还有,就再显示下一组 所有结束就给个总结显示 有超时结束过程加上 提示正确选 ...

  6. django 简单会议室预约（3）

    URL配置: 今天配置一下URL,打开urls.py配置如下: from django.conf.urls import patterns, include, url from djapp impor ...

  7. 【Thinkphp学习】TP3.2.3在PHP5.5环境下运行非常慢

    在做项目时遇到了一个瓶颈问题:老项目迁移到PHP5.5环境后打开网页很卡很慢. 服务器环境为:apache+php5.5.38+mysql,使用框架为Thinkphp3.2.3. 经过多方面排查找到了 ...

  8. 【hdu 3478】Catch

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=3478 [Description] 一个人从起点s出发,假设他在时间t在节点x; 则在时间t+1,他 ...

  9. JavaScript学习总结（4）——JavaScript数组

    JavaScript中的Array对象就是数组,首先是一个动态数组,无需预先制定大小,而且是一个像Java中数组.ArrayList.Hashtable等的超强综合体. 一.数组的声明 常规方式声明: ...

  10. asp.net Code学习一(vs code跨平台软件操作)

    1.命令行: dotnet new -t web 创建web项目 dotnet new restore build pubilsh run test pack dotnet -info / -h do ...