手工打造极酷的分离式滑动门导航菜单(3)
作者:冰极峰 来源:冰极峰blog 发布时间:2009-05-25 20:11:00
好了,我们的准备工作都差不多了,该给菜单穿上新衣服了。
我们要做成自适应宽度的菜单,那么,我们就不能设置菜单的宽度值,所以我们不能像平时制作一个水平的有固定宽度的菜单的做法那样,设置宽度,然后向左浮动。如果这样的话,每个菜单项的宽度不同时,要分别定义每一项的宽度,那就必须给每个菜单项定义一个ID或CLASS,并且这种方式也不利后台程序的动态循环输出。
我们需要的是像内联元素一样从左到右自动在一行内排列每个菜单项,那么我们就需要菜单以内联的方式表现出来,OK,我们就用display:inline吧,这是一个非常有用的属性:它解析后的排列方式能达到我们的基本要求:在一行内从左到右自动排列标签元素,每一项宽度可以不同。
如果用上面这种属性真的能满足我们需要了,就没有下面这一段文字内容。
虽说这个属性能满足我们项目基本需要,可是它有一个非常致命的弱点:它不能设置宽度和高度值,不信你可以试试。它只表现为文字的默认高度和宽度,超出这个宽高值后就自动隐藏了。这样一来,我在这里面是有背景图片的,要表现出这个图片效果,我们需要给定一个宽度和高度。这就不能做出我们的效果了,郁闷!还好,还有一个属性:display:inline-block;它的表现就是我们需要的。
但是…这个属性也有致命弱点,它只能被FF3等高级浏览器识别。其它的浏览器只能绕道而行了。啊哦!所以,统一浏览器是多么的重要啊!看来,HACK也是我们逼不得已的一种解脱方式了。
原理我们都了解了,我们可以根据上面两篇文章提供的技巧来做一个自适应的菜单了。
我们先写右侧图片的样式,它是应用在li元素的子节点A标签中的。
li a{display:inline-block; padding-right:30px; padding-top:10px; *padding-top:0; padding-bottom:13px; *padding-bottom:0; height:36px; background:url(images/button.gif) no-repeat right -36px; text-decoration:none; font-size:12px; color:#fff;}
我们先设置display:inline-block,然后我们再用padding来撑开它的边距,让它有一定的空间来装填图片。注意,这里的图片路径换成你自己的路径。然后设置其它的样式,如去掉下划线,字体颜色,字体大小等等。设置图片靠右对齐。
li a span{display:inline-block; padding-left:30px; padding-top:10px; *padding-top:0; padding-bottom:13px; padding-bottom:0; height:36px; line-height:36px; background:url(images/button.gif) no-repeat left top; font-weight:bold;}
按钮左侧的图片是放在SPAN元素中的,将它的图片向左对齐,也设置padding来撑开它的宽度和高度。
li a,li a span{display:inline;cursor:pointer;}
然后将它们的又设置回inline内联模式,触发IE的haslayout特性。
在上面的代码,我们还看到有一个HACK的应用,*padding-bottom:0;和*padding-top:0;这用来解决IE与FF等浏览器不同效果的。不信你删除后看看会有什么效果,在IE下高度伸展有问题。
好了下面该写鼠标移上时的效果了。
li a:hover{padding-right:30px;background:url(images/button.gif) no-repeat right -108px;}
li a:hover span{padding-left:30px;background:url(images/button.gif) no-repeat left -72px;font-weight:bold;}
再接下来是鼠标点击后的效果。
li a:active{padding-right:30px;background:url(images/button.gif) no-repeat right -180px;}
li a:active span{padding-left:30px;background:url(images/button.gif) no-repeat left -144px;font-weight:bold;}
ok,似乎大功告成,在不同浏览器下看看,似乎都能达到满意的效果。下面是截图:
图四
现在纯CSS版的滑动门菜单基本上就做好了。
猜你喜欢
- 今天在开发一个手机短信通讯录的前端界面时,界面中使用了checkbox,来做为各项的选择控件,但是操作时,除了点差子。由于逻辑需要,需要预先
- 问题:导入数据时是否需要禁用索引?解答:在使用load data导入数据时,如果导入的表是MyISAM的,对于空表,MySQL数据库会把所有
- 一:直接把MDB(MDE)文件放到网络中的共享目录中,在客户端做好对应的快捷方式二:数据库折分(菜单:工具,实用工具,折分)成前后台,把后台
- Oracle提供了不少方法用于数据空间的使用、监控和维护,同时也在各版本中陆续对这方面的功能进行了增强,目的在于简化这方面工作的复杂度,提高
- 最好也是最简单的办法就是利用Cookie,而不必用到数据库。当然,你愿意用数据库也可以。下面就是利用Cookie来实现的:< 
- 提高SQL执行效率的几点建议:◆尽量不要在where中包含子查询;关于时间的查询,尽量不要写成:where to_char(dif_date
- 客户的一台服务器出现Raid故障,经过我们的努力,数据基本恢复成功,但是其中的一个SQL Server日志文件(扩展名LDF)损坏严重,基本
- 代码如下:<% function GetBot() '查询蜘蛛 dim s_
- 测试需求 为了更好的测试你的ASP程序,你首先需要决定你的程序将来需要面对多大的压力。简单的说,压力或负载可以分解成以下数字:· 最低用户数
- Set objTextStream=FileSystemObject.CreateTextFile(Filename,[Overwrite]
- rs.open sql,conn:如果sql是delete,update,insert则会返回一个关闭的记录集,在使用过程中不要来个rs.c
- asp连接sql server代码如下:dim connset conn = Serve
- 第一步:安装SQL200,并启动SQL2000。到网上下载SQL2000,并安装完毕。( * 作系统是XP,装的是SQL个人版),按照下面所示
- 此BUG最初是在《前端观察》网站刊登,这里再描述一下,代码如下:<style>*{ padding:0; m
- 原文:http://www.htmldog.com/guides/htmlintermediate/badtags/十六 有害的标签 Bad
- 虽然现在的GMail已经看不到这个效果,但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了我自己的WordPress
- 相关验证码文章:asp制作验证码的方法 轩魂ASP中文验证码下载 先产生一个4位数的随机码源代码:ychar="0,1,2,3,4
- 每个人都可以编写CSS代码,甚至你现在已经让它为你的项目工作了。但是CSS还可以更好吗?开始用这5个Tips改进你的CSS吧!一、关于CSS
- msxml3.dll 错误 '80004005'未指定的错误/Project/lijiang_071017/include/
- 可能许多同学对SQL Server的备份和还原有一些了解,也可能经常使用备份和还原功能,我相信除DBA之外我们大部分开发员队伍对备份和还原只