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>

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

酒仙网左侧导航

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>index</title>
  6     <style>
  7         *{  8             font-family: 微软雅黑;
  9             margin:0px;
 10             padding:0px;
 11         }
 12
 13         .top{ 14             width:1366px;
 15             height:90px;
 16             overflow: hidden;
 17         }
 18
 19         .top img{ 20             margin-left:-250px;
 21         }
 22
 23         .nav{ 24             height:15px;
 25         }
 26
 27         .menu{ 28             height:470px;
 29             background:url('power.jpg') -300px;
 30         }
 31
 32         .div1{ 33             height:40px;
 34             overflow: hidden;
 35             background: #900;
 36             color:#fff;
 37         }
 38
 39         .div1 ul{ 40             width:1200px;
 41             margin:0 auto;
 42             list-style:none;
 43         }
 44
 45         .div1 ul li{ 46             float: left;
 47             line-height: 40px;
 48             margin-left:30px;
 49             cursor: pointer;
 50         }
 51         .banner{ 52             background: #ce171f;
 53             width:150px;
 54             text-align: center;
 55             margin-left:0px!important;
 56         }
 57
 58         .div2{ 59             width:1200px;
 60             height:470px;
 61             margin:0 auto;
 62             position: relative;
 63         }
 64
 65         .div3{ 66             width:150px;
 67             height:470px;
 68             background: #b61d1d;
 69         }
 70         .div3 ul{ 71             list-style:none;
 72         }
 73
 74         .div3 ul li{ 75             padding-left:15px;
 76             line-height: 30px;
 77         }
 78
 79         .div3 ul li span{ 80             color:#fff;
 81         }
 82
 83         .div3 ul li:hover{ 84             cursor: pointer;
 85         }
 86
 87         .right{ 88             width:1020px;
 89             height:440px;
 90             background: #eee;
 91             position: absolute;
 92             top:0px;
 93             left:150px;
 94             padding:15px;
 95             color:#000;
 96             display: none;
 97         }
 98         .info{ 99             width:1200px;
100             margin:0 auto;
101         }
102     </style>
103     <script src="jquery.js"></script>
104 </head>
105 <body>
106     <div class='top'>
107         <img src="top.jpg" height='100%'>
108     </div>
109
110     <div class="nav"></div>
111
112     <div class="div1">
113         <ul>
114             <li class='banner'>全部商品分类</li>
115             <li>首页</li>
116             <li>葡萄酒馆</li>
117             <li>清仓</li>
118             <li>团购</li>
119             <li>新品发现</li>
120         </ul>
121     </div>
122
123     <div class="menu">
124         <div class="div2">
125             <div class="div3">
126                 <ul>
127                     <li>
128                         <span>家用电器</span>
129                         <div class='right'>
130                             <h3>家用电器</h3>
131                             <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>
132                         </div>
133                     </li>
134                     <li>
135                         <span>手机数码</span>
136                         <div class='right'>
137                             <h3>手机数码</h3>
138                             <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>
139                         </div>
140                     </li>
141                     <li>
142                         <span>电脑办公</span>
143                         <div class='right'>
144                             <h3>电脑办公</h3>
145                             <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>
146                         </div>
147                     </li>
148                     <li>
149                         <span>家居家装</span>
150                         <div class='right'>
151                             <h3>家居家装</h3>
152                             <p>家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，家用电器，</p>
153                         </div>
154                     </li>
155                 </ul>
156             </div>
157         </div>
158     </div>
159
160     <div class="info">
161         <h1>linux is very much!</h1>
162         <h1>linux is very much!</h1>
163         <h1>linux is very much!</h1>
164         <h1>linux is very much!</h1>
165         <h1>linux is very much!</h1>
166         <h1>linux is very much!</h1>
167         <h1>linux is very much!</h1>
168         <h1>linux is very much!</h1>
169         <h1>linux is very much!</h1>
170         <h1>linux is very much!</h1>
171         <h1>linux is very much!</h1>
172         <h1>linux is very much!</h1>
173         <h1>linux is very much!</h1>
174         <h1>linux is very much!</h1>
175         <h1>linux is very much!</h1>
176         <h1>linux is very much!</h1>
177         <h1>linux is very much!</h1>
178         <h1>linux is very much!</h1>
179         <h1>linux is very much!</h1>
180         <h1>linux is very much!</h1>
181         <h1>linux is very much!</h1>
182     </div>
183 </body>
184 <script>
185 $('.div3 li').mouseenter(function(){
186     x=$(this).position().left+150;
187     y=$(this).position().top;
188
189     $(this).css({'background':'#eee'});
190     $(this).find('span').css({'color':'#b61d1d'});
191     $('.div3 li').not($(this)).css({'background':'#b61d1d'});
192
193
194     $(this).find('.right').css({'top':y+'px','left':x+'px'}).show();
195     $('.right').not($(this).find('.right')).hide();
196 });
197
198 $('.div3 li').mouseleave(function(){
199     $(this).find('.right').hide();
200     $(this).find('span').css({'color':'#fff'});
201     $(this).css({'background':'#b61d1d'});
202 });
203 </script>
204 </html>

转载于:https://www.cnblogs.com/Renyi-Fan/p/9235135.html

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

  1. Html5+Css实战前端小米官网左侧导航（思路+详解+素材）

    实战后的效果 大家好,我是小叶同学,如今都大二了,跟着学校老师只学到皮毛,不如自己自学,说起来也惭愧,今天实战Html+CSS小米官网左侧导航开发,后面也会一点点对小米官网全部开发,欢迎前来坐坐沙发 ...

  2. 京东图片列表、左侧导航栏、网易新闻列表、京东页面布局、京东轮播图

    文章目录 京东图片列表 京东左侧导航栏 网易新闻列表: 京东页面布局 京东轮播图 京东图片列表 代码如下: <head><meta charset="UTF-8" ...

  3. web开发——css京东图片列表和左侧导航条的演示

    学了知识就一定要对知识进行巩固,而做实战做练习就是对知识最好的巩固了. 目录 学了知识就一定要对知识进行巩固,而做实战做练习就是对知识最好的巩固了. 例1: 代码行: 效果图: 例2: 代码行: 效果 ...

  4. [封装插件]酒仙网和京东左侧动态菜单栏案例

    酒仙网老式动态菜单栏: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

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

    2019独角兽企业重金招聘Python工程师标准>>> 仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特 ...

  6. html仿写京东左侧,jQuery模仿京东/天猫商品左侧分类导航菜单效果

    现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事 ...

  7. jQuery实例——仿京东仿淘宝列表导航菜单

    以前看着京东,淘宝的导航做的真好,真想哪一天自己也能做出来这么漂亮功能全的导航菜单.今天弄了一下午终于自制成功,主要使用jQuery和CSS,实现功能基本和京东一样. 功能介绍: 1.鼠标停留导航: ...

  8. html仿京东快速购物导航,jQuery仿京东楼层滑动侧边栏高亮(原创)

    插件描述:jQuery模仿京东侧边栏点击滑动到该楼层,同时侧边栏随着页面滚动对应导航高亮. 更新时间:2017/9/30 下午2:48:37 更新说明: 1,添加了查看评论按钮来改变对应区的高度 2, ...

  9. 尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS

    跟着尚硅谷老师的练习,记录一下自己做的内容,查漏补缺. 目录 一.京东左侧导航栏 1.第一次自己做的代码(未看老师讲解视频前做的): 总结: 2.看完老师视频后跟着写的代码: 注意点及总结 删除行内元 ...

最新文章

  1. Python Qt GUI设计：QTabWidget、QStackedWidget和QDockWidget容器控件类（提升篇—2）
  2. jQuery对象和DOM对象使用说明
  3. JavaScript操作DOM元素
  4. IOS 关于ipad iphone5s崩溃 解决
  5. python大括号用法_Python中各种括号的区别、用途及使用方法
  6. LeetCode 2001. 可互换矩形的组数
  7. stm32f407wet6安装linux,elua移植到STM32F407VET6流程
  8. ubuntu 20.04 DNS 设置
  9. Inno Setup 操作XML
  10. ios十进制、十六进制字符串，byte，data等之间的转换
  11. matlab 剔除toc,matlab-罗曼诺夫斯基准则剔除粗大值
  12. c语言编程实现开平方运算,详细解析C语言中的开方实现
  13. 一、初识GVR ---- Android VR视频/Google VR for Android /VR Pano/VR Video
  14. 写一段excel VBA自动分类的代码
  15. 抓取腾讯动漫app的插图链接
  16. Seurat | 强烈建议收藏的单细胞分析标准流程（SCTransform normalization）（四）
  17. 华为荣耀笔记本linux系统怎么样,荣耀笔记本和华为笔记本有什么区别
  18. Contest-49-E PinkRabbit写情书
  19. java 接口 练习题_JAVA 接口练习题
  20. UML画图文档之汇总

热门文章

  1. 从互动直播到在线抓娃娃，实时视频超低延迟架构的思考与实践
  2. ASP.NET Core: 全新的ASP.NET !
  3. 所有科技人员是懂计算机的,指出违反什么规律.PDF
  4. log日志：打印日志到控制台、文件、日志文件分区、打印错误日志到文件
  5. sql server和mysql都装_mysql和sql server可以同时安装吗
  6. 导热系数仪 德国PSL 德国培赛乐 快速阻垢性能测试仪 抗车辙剂 摇摆槽 水合物摇摆槽 水合物相变的固-液-气多相流动 水合物阻聚剂分析 沥青硫化氢分析 沥青絮凝点 沥青絮凝点测定仪 油田注水阻垢剂
  7. idea中的xml文件怎么直接在idea中通过浏览器打开
  8. elasticsearch 过期数据自动删除Java代码
  9. 数字黑洞java_Java中数字黑洞实现代码
  10. svm公式推导及理解