jQuery打造动态下滑菜单
作者:mankaiviky 来源:蓝色理想 发布时间:2010-04-20 14:50:00
标签:jQuery,菜单,动态
本教程将分步讲解如何使用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样式,这里还提供了简化版的样式(查看演示)
0
投稿
猜你喜欢
- dictionary对象和数组有点相似,但无需用redim来改变dictionary的大小,dictionary也没有多维,dictiona
- 在编写 XMLHttpRequest 请求时,需要掌握服务器端返回的内容。针对 Firefox 浏览器,我们常用的 Firebug 就能非常
- 一、概念 1. 数据库 (Database)什么是数据库?数据库是依照某种数据模型组织起来并存放二级存储器中的数据集合。这种数据集合具有如下
- 先写一个批处理文件,给个例子。 代码如下:set rq=%date:~0,10% exp system/system的
- 如何在线删除表或索引? <%Set conn1 = Server.CreateObject(&
- 一、MySQL修改密码方法总结首先要说明一点的是:一般情况下,修改MySQL密码是需要有mysql里的root权限的,这样一般用户是无法更改
- 问:怎样才能指定MySQL只监听某个特定地址?答:比较常见的办法是,在my.cnf之mysqld节,添加bind-address=127.0
- OL定义有序列表的时候,除非指定list-style-position:inside;,否则文字和前导符是有缩进的。但有的时候,OL定义的列
- 使用了application及结合数据库来保存统计数据 <html><head><title>
- 这个绝对是IE6的bug。我想要达到的是如下的效果。通过三个div,排布好侧栏和内容区。我用了如下的css:<style type=&
- 在进行数据库的查询时,会经常遇到这样的情况:例如想在一个用户数据库中查询他的用户名和他的密码,但恰好该用户使用的名字和密码中有特殊的字符,例
- 本文介绍了网页中插入视频播放的代码全集:有avi格式的视频,mpg格式,smi格式,rm格式,wmv格式,wma格式,Windows Med
- 最近在工作中涉及到判断服务器所在ip反馈程序使用情况的程序主要要求就是,本机或局域网调试程序时,不反馈其域名(localhost)或ip站长
- MS SQL基本语法及实例操作 一:建表并初始化 ============================ create database
- 查了查《VBSCRIPT 速查手册》InstrRev的用法:InstrRev函数,功能:返回某字符串在另一个字符串中出现的从结尾计起的位置语
- 利用FSO取得BMP,JPG,PNG,GIF文件信息:大小,宽、高尺寸等 ’:::::::::::::::::::::::::::
- DBA_2PC_PENDING Oracle会自动处理分布事务,保证分布事务的一致性,所有站点全部提交或全部回滚。一般情况下,处理过程在很短
- 在数据库的开发过程中,经常会遇到复杂的业务逻辑和对数据库的操作,这个时候就会用SP来封装数据库操作。如果项目的SP较多,书写又没有一定的规范
- 起源:.clearfix:after {visibility: hidden;display: block;font-size: 0;con
- oracle数据库的快照是一个表,它包含有对一个本地或远程数据库上一个或多个表或视图的查询的结果。正因为快照是一个主表的查询子集,使用快照可