Rumah > hujung hadapan web > tutorial js > 仿当当网淘宝网等主流电子商务网站商品分类导航菜单_jquery

仿当当网淘宝网等主流电子商务网站商品分类导航菜单_jquery

不言
Lepaskan: 2018-05-29 09:59:23
asal
2417 orang telah melayarinya

本文实现了一个分类导航的菜单,和大多数流行的电子商务网站类似. 菜单的实现难点主要在CSS的编写上,并没有用到太多的JS. 下面只介少几处关键点,详细的实现可以直接查看源代码.所有的代码都在一个sidebar.html文件中.

(1) 在图片中的标号1的开口如何实现? 开口右边是一个postion被设置成absolute的p, 这个p向左刚好偏移了1px, 使得左边的菜单栏压住其边框,而选中的菜单又边框是白色,就形成了缺口.

(2) 在图片中标号2处如何实现每个连接不会中间换行? 可以把 元素设 display 属性设置成 inline-block .这在大多数浏览器中都有效. 针对IE7 可以加入下面一段条件注释来达到同样效果

复制代码 代码如下:

1

2

3

4

5

6

7

8

<!--[if IE 7]>

<style type="text/css">

#sidebar-menu p.menu-panel p.link-wrapper {

display : inline;

zoom : 1;

}

</style>

<![endif]-->

Salin selepas log masuk

(3) 在途中看到前两个菜单有图标,实际上每个菜单都可以添加图标, 没个菜单有两个图标 , 一个是初始状态, 一个是鼠标滑过状态. 它们的命名规则是 , 如果初始状态是tubiao.jpg , 则鼠标滑过图标必须是 tubiao-hover.jpg. 图标的大小必须是 220px * 25px. 那如何指定每个菜单的图标呢? 可以在HTML里面指定. 比如在随后的代码中能看到.

复制代码 代码如下:

1

2

3

<p class="menu-item" style="background-image : url(images/tubiao.jpg);">

<span>图书音像</span>

</p>

Salin selepas log masuk

这时初始状态的图片地址,鼠标滑过图片不用指定,但要和初始图片在同一目录下.
仿当当网淘宝网等主流电子商务网站商品分类导航菜单_jquery
下面是完整的源代码文件 sidebar.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

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js?7.1.34"></script>

<style type="text/css">

#sidebar-menu {

/*目前要求宽度是238px,高度是332px,左边框+width正好238,以后需要可以修改*/

border-left : 1px solid #F93;

width : 237px;

/* height : 332px; */

margin : 0;

padding : 0;

background : #FFF7F0;

}

#sidebar-menu > ul {

list-style : none;

padding : 0;

margin : 0;

}

#sidebar-menu > ul > li {

list-style : none;

padding : 0;

margin : 0;

border-bottom : 1px solid #FDEADB;

position : relative;

}

#sidebar-menu > ul > li.selected {

background : #FFF;

border-top : 1px solid #F93;

border-bottom : 1px solid #F93;

}

#sidebar-menu > ul > li.first {

border-top : 1px solid #F93;

}

#sidebar-menu > ul > li.last {

border-bottom : 1px solid #F93;

}

 

#sidebar-menu .menu-item {

background : #FFF7F0 no-repeat left center;

height : 32px; /**控制菜单中每行的宽度,下面还有两处需要修改**/

border-right : 1px solid #F93;

z-index : 10000;

position : relative;

}

 

#sidebar-menu > ul > li.selected .menu-item {

border-right : 1px solid #FFF;

background : #FFF no-repeat left center;

}

#sidebar-menu .menu-item span {

font-size : 13px;

font-weight : bold;

height : 32px;

line-height : 32px;

padding-left : 35px;

padding-top : 2px;

display : inline-block;

}

 

#sidebar-menu .menu-panel {

padding : 10px 20px;

display : none;

border : 1px solid #F93;

width : 560px;

position : absolute;

left : 236px;

top : -1px;

z-index : 5000;

min-height : 50px;

box-shadow: 1px 1px 4px #888888;

}

 

#sidebar-menu p.menu-panel.selected {

display : block;

}

 

/*Panel 里面的链接列表*/

#sidebar-menu p.menu-panel ul {

list-style : none;

padding : 0;

margin : 0;

}

#sidebar-menu p.menu-panel ul li {

list-style : none;

padding : 5px 0px;

margin : 0;

}

 

#sidebar-menu p.menu-panel>ul>li>h2 {

margin : 0;

padding : 0;

padding-top : 2px;

font-size : 13px;

color : red;

float : left;

width : 60px;

}

#sidebar-menu p.menu-panel>ul>li>p.link-list {

float : left;

padding-left : 10px;

width : 450px;

}

#sidebar-menu p.menu-panel p.link-wrapper {

display : inline-block;

padding : 3px 0px;

}

#sidebar-menu p.menu-panel p.link-wrapper span {

font-size : 13px;

color : #888;

padding-right : 4px;

}

#sidebar-menu p.menu-panel p.link-list a {

font-size : 13px;

color : #888;

text-decoration : none;

}

#sidebar-menu p.menu-panel p.link-list a:hover {

text-decoration : underline;

}

#sidebar-menu p.clear {

clear : both;

height : 0;

line-height : 0;

}

</style>

<script type="text/javascript">

$(function() {

$("#sidebar-menu > ul > li").hover(function() {

$(this).addClass("selected");

$(".menu-panel", this).addClass("selected");

var bgImg = $(".menu-item", this).css("background-image");

bgImg = bgImg.replace(".", "-hover.");

$(".menu-item", this).css("background-image", bgImg);

}, function() {

$(this).removeClass("selected");

$(".menu-panel", this).removeClass("selected");

var bgImg = $(".menu-item", this).css("background-image");

bgImg = bgImg.replace("-hover.", ".");

$(".menu-item", this).css("background-image", bgImg);

});

});

</script>

<!--[if IE 7]>

<style type="text/css">

#sidebar-menu p.menu-panel p.link-wrapper {

display : inline;

zoom : 1;

}

</style>

<![endif]-->

<title>Side bar demo</title>

  

  

<p id="sidebar-menu">

</p><ul>

<li class="first">

<p class="menu-item" style="background-image : url(images/tubiao.jpg);">

<span>图书音像</span>

</p>

<p class="menu-panel">

</p><ul>

<li>

<h2>高考图书</h2>

<p class="link-list">

</p><p class="link-wrapper"><span>|</span><a href="#">物理习题</a></p>

<p class="link-wrapper"><span>|</span><a href="#">生物</a></p>

<p class="link-wrapper"><span>|</span><a href="#">高考复习题</a></p>

<p class="link-wrapper"><span>|</span><a href="#">语文作文大全</a></p>

<p class="link-wrapper"><span>|</span><a href="#">政治时事</a></p>

<p class="link-wrapper"><span>|</span><a href="#">历年高考真题解析与答案</a></p>

<p class="link-wrapper"><span>|</span><a href="#">考试题</a></p>

<p class="link-wrapper"><span>|</span><a href="#">化学实验测试</a></p>

<p class="link-wrapper"><span>|</span><a href="#">生物测试</a></p>

<p></p>

<p class="clear"></p>

</li>

<li>

<h2>专辑</h2>

<p class="link-list">

</p><p class="link-wrapper"><span>|</span><a href="#">郑智化专辑</a></p>

<p class="link-wrapper"><span>|</span><a href="#">台湾伍佰</a></p>

<p class="link-wrapper"><span>|</span><a href="#">大陆张含韵</a></p>

<p class="link-wrapper"><span>|</span><a href="#">刘德华</a></p>

<p class="link-wrapper"><span>|</span><a href="#">成龙</a></p>

<p class="link-wrapper"><span>|</span><a href="#">王菲</a></p>

<p class="link-wrapper"><span>|</span><a href="#">最新歌曲排行榜</a></p>

<p></p>

<p class="clear"></p>

</li>

<li>

<h2>生活图书</h2>

<p class="link-list">

</p><p class="link-wrapper"><span>|</span><a href="#">领悟人生</a></p>

<p class="link-wrapper"><span>|</span><a href="#">天文地理</a></p>

<p class="link-wrapper"><span>|</span><a href="#">旅游百科</a></p>

<p class="link-wrapper"><span>|</span><a href="#">炒菜一本通</a></p>

<p></p>

<p class="clear"></p>

</li>

</ul>

<p></p>

</li>

<li>

<p class="menu-item" style="background-image : url(images/tubiao.jpg);">

<span>生活类</span>

</p>

<p class="menu-panel">

</p><ul>

<li>

<h2>炒菜宝典</h2>

<p class="link-list">

</p><p class="link-wrapper"><span>|</span><a href="#">领悟人生</a></p>

<p class="link-wrapper"><span>|</span><a href="#">天文地理</a></p>

<p class="link-wrapper"><span>|</span><a href="#">旅游百科</a></p>

<p class="link-wrapper"><span>|</span><a href="#">炒菜一本通</a></p>

<p></p>

<p class="clear"></p>

</li>

</ul>

<p></p>

</li>

<li>

<p class="menu-item">

<span>商品分类</span>

</p>

<p class="menu-panel">

商品分类内容......

</p>

</li>

<li>

<p class="menu-item">

<span>商品分类</span>

</p>

<p class="menu-panel">

商品分类内容......

</p>

</li>

<li>

<p class="menu-item">

<span>商品分类</span>

</p>

<p class="menu-panel">

商品分类内容......

</p>

</li>

<li>

<p class="menu-item">

<span>商品分类</span>

</p>

<p class="menu-panel">

商品分类内容......

</p>

</li>

<li>

<p class="menu-item">

<span>商品分类</span>

</p>

<p class="menu-panel">

商品分类内容......

</p>

</li>

<li>

<p class="menu-item">

<span>商品分类</span>

</p>

<p class="menu-panel">

商品分类内容......

</p>

</li>

<li>

<p class="menu-item">

<span>商品分类</span>

</p>

<p class="menu-panel">

商品分类内容......

</p>

</li>

<li>

<p class="menu-item">

<span>商品分类</span>

</p>

<p class="menu-panel">

商品分类内容......

</p>

</li>

<li class="last">

<p class="menu-item">

<span>商品分类</span>

</p>

<p class="menu-panel">

商品分类内容......

</p>

</li>

</ul>

<p></p>

Salin selepas log masuk


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan