列表中的导航菜单的制作

效果图如下

代码如下：（图片大家可以自己找）

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

298

299

300

301

302

303

304

305

306

307

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

< html xmlns="http://www.w3.org/1999/xhtml">

< head >

< title >事件中的冒泡现象</ title >

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

< script type="text/javascript"

src="jquery-1.5.0-vsdoc.js"></ script >

< script type="text/javascript"

src="jquery-1.4.2.js"></ script >

< style type="text/css">

body {

font-size:13px

}

ul, li {

list-style-type:none;

padding:0px;

margin:0px

}

.menu {

width:190px;

border:solid 1px #E5D1A1;

background-color:#FFFDD2

}

.optn {

width:190px;

line-height:28px;

border-top:dashed 1px #ccc

}

.content {

padding-top:10px;

clear:left

}

a {

text-decoration:none;

color:#666;

padding:10px

}

.optnFocus {

background-color:#fff;

font-weight:bold

}

div {

padding:10px

}

div img {

float:left;

padding-right:6px

}

span {

padding-top:3px;

font-size:14px;

font-weight:bold;

float:left

}

.tip {

width:190px;

border:solid 2px #ffa200;

position:absolute;

padding:10px;

background-color:#fff;

display:none

}

.tip li {

line-height:23px;

}

#sort {

position:absolute;

display:none

}

</ style >

< script type="text/javascript">

$( function() {

var curY; //获取所选项的Top值

var curH; //获取所选项的Height值

var curW; //获取所选项的Width值

var srtY; //设置提示箭头的Top值

var srtX; //设置提示箭头的Left值

var objL; //获取当前对象

/**

* 设置当前位置数值

* 参数obj为当前对象名称

* */

function setInitValue(obj) {

curY = obj.offset().top

curH = obj.height();

curW = obj.width();

srtY = curY + (curH / 2) + "px"; //设置提示箭头的Top值

srtX = curW - 5 + "px"; //设置提示箭头的Left值

}

$(".optn").mouseover( function() {//设置当前所选项的鼠标滑过事件

objL = $(this); //获取当前对象

setInitValue(objL); //设置当前位置

var allY = curY - curH + "px"; //设置提示框的Top值

objL.addClass("optnFocus"); //增加获取焦点时的样式

objL.next("ul").show().css({

"top": allY,

"left": curW

}) //显示并设置提示框的坐标

$("#sort").show().css({

"top": srtY,

"left": srtX

}); //显示并设置提示箭头的坐标

})

.mouseout( function() {//设置当前所选项的鼠标移出事件

$(this).removeClass("optnFocus"); //删除获取焦点时的样式

$(this).next("ul").hide(); //隐藏提示框

$("#sort").hide(); //隐藏提示箭头

})

$(".tip").mousemove( function() {

$(this).show(); //显示提示框

objL = $(this).prev("li"); //获取当前的上级li对象

setInitValue(objL); //设置当前位置

objL.addClass("optnFocus"); //增加上级li对象获取焦点时的样式

$("#sort").show().css({

"top": srtY,

"left": srtX

}); //显示并设置提示箭头的坐标

})

.mouseout( function() {

$(this).hide(); //隐藏提示框

$(this).prev("li").removeClass("optnFocus"); //删除获取焦点时的样式

$("#sort").hide(); //隐藏提示箭头

})

</ script >

</ head >

< body >

< ul >

< li class="menu">

< div >

< img alt="" src="icon.gif" />

< span >电脑数码类产品</ span >

</ div >

< ul class="content">

< li class="optn">

< a href="#">笔记本</ a >

</ li >

< ul class="tip">

< li >

< a href="#">笔记本1</ a >

</ li >

< li >

< a href="#">笔记本2</ a >

</ li >

< li >

< a href="#">笔记本3</ a >

</ li >

< li >

< a href="#">笔记本4</ a >

</ li >

< li >

< a href="#">笔记本5</ a >

</ li >

</ ul >

< li class="optn">

< a href="#">移动硬盘</ a >

</ li >

< ul class="tip">

< li >

< a href="#">移动硬盘1</ a >

</ li >

< li >

< a href="#">移动硬盘2</ a >

</ li >

< li >

< a href="#">移动硬盘3</ a >

</ li >

< li >

< a href="#">移动硬盘4</ a >

</ li >

< li >

< a href="#">移动硬盘5</ a >

</ li >

</ ul >

< li class="optn">

< a href="#">电脑软件</ a >

</ li >

< ul class="tip">

< li >

< a href="#">电脑软件1</ a >

</ li >

< li >

< a href="#">电脑软件2</ a >

</ li >

< li >

< a href="#">电脑软件3</ a >

</ li >

< li >

< a href="#">电脑软件4</ a >

</ li >

< li >

< a href="#">电脑软件5</ a >

</ li >

</ ul >

< li class="optn">

< a href="#">数码产品</ a >

</ li >

< ul class="tip">

< li >

< a href="#">数码产品1</ a >

</ li >

< li >

< a href="#">数码产品2</ a >

</ li >

< li >

< a href="#">数码产品3</ a >

</ li >

< li >

< a href="#">数码产品4</ a >

</ li >

< li >

< a href="#">数码产品5</ a >

</ li >

</ ul >

< img id="sort" src="sort.gif" alt=""/>

</ li >

</ ul >

</ body >

</ html >

==============================================================================
我喜欢程序员，他们单纯、固执、容易体会到成就感；面对压力，能够挑灯夜战不眠不休；面对困难，能够迎难而上挑战自我。他
们也会感到困惑与傍徨，但每个程序员的心中都有一个比尔盖茨或是乔布斯的梦想“用智慧开创属于自己的事业”。我想说的是，其
实我是一个程序员
==============================================================================

列表中的导航菜单的制作相关推荐

列表中的导航菜单应用
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-e ...
列表应用（导航菜单）
(1)功能描述: 在页面表单中,分别展示某类产品的全部子类项,当用户将鼠标移动某子类时,所选子类样式发生变化,并在该子类的右边以浮动的形式展示该类的全部产品:当用户将鼠标移除某子类时,所选子类样式恢复 ...
网页前端：导航菜单的制作
文章目录前言具体操作总结前言实验目的: (1)掌握有序列表和无序列表,在导航菜单中的工作过程: (2)导航菜单能够根据鼠标的悬浮进行样式的变化. 实验内容: 根据要求完成以下网页菜单: 1. ...
网页中滑动导航菜单制作
<html> <head> <title>网页特效-导航菜单-滑动的二级导航菜单</title> <meta http-equiv="c ...
ElementUi中NavMenu 导航菜单router用法
问题引出写页面中遇到需要写NavMenu 导航菜单,作为菜鸟按照Element官方的NavMenu 导航菜单用法,传统式使用在data声明一个activeIndex作为跳转的首页,当我点击NavMe ...
CSS3综合练习，导航菜单的制作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
element-UI中NavMenu导航菜单默认打开问题
最近写一个网站导航栏,需求要每页打开时,默认导航栏的第一项展开,导航栏我用的是element-UI框架中的NavMenu,我看到以下两个参数,我就写上了 <el-menu default-act ...
如何在WordPress中制作导航菜单（7个功能点）
在wordpress中添加导航菜单是初级的操作,但对于新手而言依旧会遇到一些问题,接下来我们就逐一讲解. 什么是导航菜单导航菜单通常位于网站的顶部和底部,用于方便用户快速打开关键页面,譬如下方两张图 ...
HTML+CSS实战(一)——导航条菜单的制作
一.垂直导航菜单的制作 1.基本的样式清除: *{margin:0;padding:0} 2.无序列表圆点去除: ul{list-style:none} 3.下划线去除: a{text-decorat ...

列表中的导航菜单的制作

列表中的导航菜单的制作相关推荐

最新文章

热门文章