Jquery学习笔记--京东导航菜单增加弹框
Posted Jacklovely
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery学习笔记--京东导航菜单增加弹框相关的知识，希望对你有一定的参考价值。
京东导航，添加中间的弹框栏，使用position定位，放在左侧栏的li标签里面，成为一个整体，保证鼠标在弹框里的时候，弹框不消失：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="jquery.js" type="text/javascript"></script> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 } 11 #head img{ 12 position: absolute; 13 left: 50%; 14 margin-left:-595px; 15 } 16 #head{ 17 position: relative; 18 width: 100%; 19 height: 80px; 20 background-color: #f00; 21 } 22 .clear{ 23 clear: both; 24 } 25 #nav li{ 26 list-style: none; 27 float: left; 28 border: 1px solid #000; 29 font-family: 微软雅黑; 30 font-weight: bold; 31 cursor: pointer; 32 margin-left: 10px; 33 34 } 35 #nav{ 36 margin-left: 200px; 37 } 38 #left li{ 39 list-style: none; 40 margin-top: 0px; 41 border: 1px solid #000; 42 padding-top: 2px; 43 padding-bottom: 2px; 44 padding-left: 10px; 45 font-family: 微软雅黑; 46 color: #fff; 47 } 48 49 #left ul{ 50 background-color: #888; 51 width: 190px; 52 height: 480px; 53 margin-left: 50px; 54 margin-top: 10px; 55 padding-top: 10px; 56 padding-left: 0px; 57 } 58 #left span{ 59 cursor: pointer; 60 } 61 #left{ 62 float: left; 63 position: relative; 64 65 } 66 #images{ 67 margin-left: 10px; 68 float: left; 69 position: relative; 70 71 } 72 #largeImg{ 73 /*margin-left: 10px;*/ 74 margin-top: 10px; 75 } 76 #smallImg{ 77 margin-top: 10px; 78 /*margin-left: 10px;*/ 79 80 } 81 #welcom{ 82 width: 190px; 83 height: 480px; 84 background-color: #00f; 85 margin-top: 10px; 86 margin-left: 10px; 87 float: left; 88 position: relative; 89 90 } 91 #main{ 92 position: relative; 93 /*position: absolute;*/ 94 left: 50%; 95 margin-left: -595px; 96 97 } 98 .right{ 99 position: absolute; 100 top: 10px; 101 width: 800px; 102 height: 480px; 103 margin-left: 180px; 104 margin-top: 0px; 105 border: 1px solid #000; 106 z-index: 3; 107 color: #000; 108 background-color: #eee; 109 display: none; 110 } 111 </style> 112 </head> 113 <body> 114 <!-- 广告 --> 115 <div id="head"><img src="head.jpg"></div> 116 <!-- main把三个div合到一起 --> 117 <div id="main"> 118 <!-- 上侧导航 --> 119 <div id="nav"> 120 <ul> 121 <li>秒杀</li> 122 <li>优惠券</li> 123 <li>闪购</li> 124 <li>拍卖</li> 125 </ul> 126 </div> 127 <div class="clear"></div> 128 <!-- 左侧导航 --> 129 <div id="left"> 130 <ul> 131 <li><span>家用电器</span> 132 <div class="right"> 133 <div>电视/空调/洗衣机</div> 134 <div>电视/空调/洗衣机</div> 135 <div>电视/空调/洗衣机</div> 136 <div>电视/空调/洗衣机</div> 137 <div>电视/空调/洗衣机</div> 138 <div>电视/空调/洗衣机</div> 139 </div> 140 </li> 141 <li><span>手机/数码</span> 142 <div class="right"> 143 <div>手机/对讲机/数码相机</div> 144 </div> 145 </li> 146 <li><span>男装/女装</span> 147 <div class="right"> 148 <div>羽绒服/棉服/羊毛衫</div> 149 </div> 150 </li> 151 <li><span>电脑/办公</span> 152 <div class="right"> 153 <div>笔记本/平板/显示器</div> 154 </div> 155 </li> 156 </ul> 157 </div> 158 <!-- 右侧广告 --> 159 <div id="images"> 160 <div id="largeImg"> 161 <img src="1.jpg" alt=""> 162 </div> 163 <!-- <div class="clear"></div> --> 164 <div id="smallImg"> 165 <img src="4.jpg" alt=""> 166 <img src="5.jpg" alt=""> 167 </div> 168 </div> 169 <!-- 最右侧充话费 --> 170 <div id="welcom"> 171 <div>注册</div> 172 <div>登录</div> 173 </div> 174 </div> 175 176 </body> 177 <script> 178 $(‘#nav li‘).hover( 179 function(){ 180 $(this).css({"color":"#f00"}); 181 }, 182 function(){ 183 $(this).css({"color":"#000"}); 184 } 185 ); 186 $(‘#left li‘).hover( 187 function(){ 188 $(this).css({"background-color":"#ddd"}); 189 $(this).children(‘.right‘).show(); 190 191 }, 192 function(){ 193 $(this).css({"background-color":"#888"}); 194 $(this).children(‘.right‘).hide(); 195 196 } 197 ); 198 $(‘#left span‘).hover( 199 function(){ 200 $(this).css({"color":"#f00"}); 201 202 }, 203 function(){ 204 $(this).css({"color":"#fff"}); 205 206 } 207 ); 208 209 </script> 210 </html>
以上是关于Jquery学习笔记--京东导航菜单增加弹框的主要内容，如果未能解决你的问题，请参考以下文章