HTML5实现京东主页侧边栏效果

概览:

预览

代码

Download Now

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<meta name="author" content="Mardan"/>
<title>Welcome to PBStitle>

<link rel="stylesheet" type="text/css" href="./css/style.css">
head>

<body class="index">
<div class="good_box">
<div class="menu cate cate18" role="navigation" aria-label="左侧导航">
<ul class="cate_menu">
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://jiadian.jd.com/">家用电器a>
<div class="menu-x">我是扩展菜单-1div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://shouji.jd.com/">手机a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://wt.jd.com/">运营商a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://shuma.jd.com/">数码a>
<div class="menu-x">我是扩展菜单-2div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://diannao.jd.com/">电脑a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://bg.jd.com/">办公a>
<div class="menu-x">我是扩展菜单-3div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://channel.jd.com/home.html">家居a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://channel.jd.com/furniture.html">家具a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://jzjc.jd.com/">家装a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk"
href="https://channel.jd.com/kitchenware.html">厨具a>
<div class="menu-x">我是扩展菜单-4div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://channel.jd.com/1315-1342.html">男装a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://channel.jd.com/1315-1343.html">女装a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://channel.jd.com/children.html">童装a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://channel.jd.com/1315-1345.html">内衣a>
<div class="menu-x">我是扩展菜单-5div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://beauty.jd.com/">美妆a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://channel.jd.com/beauty.html">个护清洁a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://channel.jd.com/pet.html">宠物a>
<div class="menu-x">我是扩展菜单-6div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk"
href="https://channel.jd.com/womensshoes.html">女鞋a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://channel.jd.com/bag.html">箱包a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://channel.jd.com/watch.html">钟表a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://channel.jd.com/jewellery.html">珠宝a>
<div class="menu-x">我是扩展菜单-7div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://channel.jd.com/mensshoes.html">男鞋a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://phat.jd.com/10-109.html">运动a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://channel.jd.com/outdoor.html">户外a>
<div class="menu-x">我是扩展菜单-8div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://xinfang.jd.com/">房产a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://car.jd.com/">汽车a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://che.jd.com/">汽车用品a>
<div class="menu-x">我是扩展菜单-9div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://baby.jd.com/">母婴a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://toy.jd.com/">玩具乐器a>
<div class="menu-x">我是扩展菜单-10div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://channel.jd.com/food.html">食品a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://jiu.jd.com/">酒类a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://fresh.jd.com/">生鲜a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://china.jd.com/">特产a>
<div class="menu-x">我是扩展菜单-11div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://art.jd.com/">艺术a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk"
href="https://channel.jd.com/1672-2599.html">礼品鲜花a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://nong.jd.com/">农资绿植a>
<div class="menu-x">我是扩展菜单-12div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://health.jd.com/">医药保健a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk"
href="https://channel.jd.com/9192-9196.html">计生情趣a>
<div class="menu-x">我是扩展菜单-13div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://book.jd.com/">图书a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://mvd.jd.com/">文娱a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://e.jd.com/ebook.html">电子书a>
<div class="menu-x">我是扩展菜单-14div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://jipiao.jd.com/">机票a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://hotel.jd.com/">酒店a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://trip.jd.com/">旅游a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://ish.jd.com/">生活a>
<div class="menu-x">我是扩展菜单-15div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://licai.jd.com/">理财a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://z.jd.com/">众筹a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://baitiao.jd.com/">白条a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://bao.jd.com/">保险a>
<div class="menu-x">我是扩展菜单-16div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://anzhuang.jd.com/">安装a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://jdwx.jd.com/">维修a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://cleanclean.jd.com/">清洗a>
<span class="cate_menu_line">/span>
<a target="_blank" class="cate_menu_lk" href="https://2.jd.com/">二手a>
<div class="menu-x">我是扩展菜单-17div>
li>
<li class="cate_menu_item">
<a target="_blank" class="cate_menu_lk" href="https://imall.jd.com/">工业品a>
<div class="menu-x">我是扩展菜单-18div>
li>
ul>
div>
<div class="tab_control" role="tab" aria-label="淘宝tab-control">
家用电器扩展菜单有惊喜哦!!!
<ul class='tabs'>
<li>
<a href="#home">商品详情a>
li>
<li>
<a href="#news">累计评价a>
li>
<li>
<a href="#contact">商品推荐a>
li>
ul>
<div id="tab_content">
<div class="tab1"><span>Tab 1span>div>
<div class="tab2"><span>Tab 2span>div>
<div class="tab3"><span>Tab 3span>div>
div>
div>
div>
body>
html>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

html{
color: transparent;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
/*取消menu item下划线*/
a{
text-decoration: none;
}
/* 重置页面背景色 */
.index {
font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', '\5B8B\4F53', sans-serif;
background-color: #f4f4f4;
}

.cate {
position: relative;
z-index: 3;
}

.cate18 .cate_menu_item {
height: 25px;
line-height: 25px;
}

/* 商品菜单 */
.menu{
float: left;
width: 190px;
height: 480px;
margin-right: 10px;
}

.cate_menu {
overflow: hidden;
padding: 10px 0;
height: 450px;
background-color: #fefefe;
color: #636363;
}

.cate_menu_item {
overflow: hidden;
padding-left: 18px;
transition: background-color ease 0.2s;
}

.cate_menu_item_on {
background-color: #d9d9d9;
}

.cate_menu_line {
padding: 0 2px;
font-size: 12px;
}

.cate_menu_lk {
font-size: 14px;
color: #333333;
transition: color ease 0.2s;
}

.cate_menu > li:hover {
background-color: #d9d9d9;
}

.cate_menu > li > a:hover{
color: #c81623
}

.cate_menu_item:hover > .menu-x{
display: block;
}

.menu .menu-x{
width: 800px;
height: 460px;
display: none;
position: absolute;
top:0;
left:200px;
margin-top: 10px;
background-color: #fff;
}

.tab_control{
width: auto;
height: 20px;
margin-left: 200px;
alignment: center;
position: absolute;
color: red;
}

.tabs{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FEFEFE;
}
.tabs > li{
float: left;
border-left: 1px solid white;
border-right: 1px solid white;
elevation: 24grad;
}
.tabs > li:first-child{
border-left: none;
}

.tabs > li:last-child{
border-right: none;
}
.tabs > li > a{
display: block;
color: #333333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.tabs > li > a:hover:not(.activate){
background-color: #d9d9d9;
color: #c81623;
}
------ 文章已经结束,谢谢你的阅读 ------
------ article has ended,thank you for reading ------
Thanks support Me

---------------- The End ----------------