Jquery学习笔记，8--京东导航菜单
京东导航，添加中间的弹框栏，使用position定位，放在左侧栏的li标签里面，成为一个整体，保证鼠标在弹框里的时候，弹框不消失：
1 <!DOCTYPE html>
2 <html >
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 ><img src="head.jpg"></div>
116 <!-- main把三个div合到一起 -->
117 <div >
118 <!-- 上侧导航 -->
119 <div >
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 >
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 >
160 <div >
161 <img src="1.jpg" alt="">
162 </div>
163 <!-- <div class="clear"></div> -->
164 <div >
165 <img src="4.jpg" alt="">
166 <img src="5.jpg" alt="">
167 </div>
168 </div>
169 <!-- 最右侧充话费 -->
170 <div >
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/CSS3类似阿里巴巴的商品导航菜单实现教程
