jQuery打造动态下滑菜单
作者:mankaiviky 来源:蓝色理想 时间:2010-04-20 14:50:00
本教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单。jQuery的"write less, do more"的特性可谓是家喻户晓,即使没有很丰富JS编程经验的人,也可以通过其提供的API很快学会如何使用,当然,如果您经验丰富,我还是建议您可以理解jQuery各主要函数的实现原理,其他不说了,直接看看如何用它来实现菜单神奇的效果吧
Step1 - HTML结构
看一下菜单的HTML代码,跟平常的菜单代码没有什么区别:
<div id="menu" class="menu">
<ul>
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">JavaScript</a></li>
<li><a href="javascript:;">Resources</a></li>
<li><a href="javascript:;">Tutorials</a></li>
<li><a href="javascript:;">About</a></li>
</ul>
</div>
关键在于利用脚本在每个锚点(a元素)中建立几个分隔层,这样就可以在鼠标悬停时分别控制它们产生动画。为此,我们要在DOM加载完成时候修改DOM的结构,使得每个锚点代码变成如下:
<a href="javascript:;">
<span class="out">Home</span>
<span class="bg"></span>
<span class="over">Home</span>
</a>
原先的每个锚点中的内容会被附加到两个span元素(.out和.over)里面,另外一个span元素(.bg)为背景图片层。
至于如何修改DOM结构,JS代码将在Step3中讲解。
Step2 - CSS样式
在示例中,展示了两种样式,有使用背景图的和没有使用背景图的(具体查看演示),您也可以自由定制自己的样式,以设计出更炫酷的菜单,这里提供基本的样式和解释:
/* 以下是菜单基本的样式
*/.menu ul li {
float: left;
/* 菜单子元素的内容超出不可见 */
overflow: hidden;
/* 以下省略部分代码 */
}
.menu ul li a {
/* 必须是相对定位 */
position: relative;
display: block;
width: 110px;
/* 以下省略部分代码 */
}
.menu ul li a span {
/* 所有层将使用绝对定位 */
position: absolute;
left: 0;
width: 110px;
}
.menu ul li a span.out {
top: 0px;
}
.menu ul li a span.over,.menu ul li a span.bg {
/* 起初.over层和.bg层相对a元素-45px以达到隐藏的效果 */
top: -45px;}/
* 以下是使用背景图的示例 */
#menu {
/* 菜单背景 */
background:url(bg_menu.gif) scroll 0 -1px repeat-x;
border:1px solid #CCC;}
#menu ul li a {
color: #000;
}
#menu ul li a span.over {
color: #FFF;
}
#menu ul li span.bg {
/* 指定高度和背景图 */
height: 45px;
background: url(bg_over.gif) center center no-repeat;
}
您也可以在自行定制CSS样式,这里还提供了简化版的样式(查看演示)
标签:jQuery,菜单,动态
0
投稿
猜你喜欢
利用WSH获取计算机硬件信息、DNS信息等
2008-05-05 13:04:00
ASP可显示和隐藏的树型菜单
2007-10-01 14:40:00
ASP.NET 2.0防止同一用户同时登录
2007-10-03 14:30:00
解决MySQL不允许从远程访问的方法
2010-03-18 15:39:00
em与px的区别以及em特点和应用
2008-11-11 12:03:00
SQL 2008的变更数据捕获——跟踪可变部分
2009-03-20 11:47:00
以独占方式打开Access数据库
2007-10-22 12:24:00
SQL Server 2005中利用xml拆分字符串序列
2009-01-06 11:30:00
asp随机生成文件名的函数
2009-02-11 13:41:00
让css使网页图片半透明
2007-02-03 11:39:00
oracle dba 应该熟悉的命令
2009-07-02 12:08:00
一列保存多个ID(将多个用逗号隔开的ID转换成用逗号隔开的名称)
2012-08-21 10:37:37
css基础教程布局篇之一
2008-07-31 17:21:00
前端来看看 maxthon bugs
2008-09-23 18:35:00
客户体验
2008-12-11 13:58:00
Ajax改造:使用Ajax和jQuery改进现有站点
2010-04-02 12:50:00
[翻译]标记语言和样式手册 Chapter 14 图片替换
2008-02-18 12:56:00
optgroup、sub、sup和bdo标签
2009-07-26 18:39:00
运行asp.net程序 报错:磁盘空间不足
2011-11-03 17:16:22
Dreamweaver4探谜系列(2)
2010-05-13 12:08:00