手工打造极酷的分离式滑动门导航菜单(2)
作者:冰极峰 来源:冰极峰blog 发布时间:2009-05-25 20:11:00
样式篇
好吧,它现在还只是一个骨架,我们稍微给它美化一下,加点简单的样式,至少应该去掉小圆点吧,并且让它水平排列吧!
好,加点样式:
*{margin:0;padding:0;}/*将它统一成一个模样吧,不然在各个浏览器下,会死得很难看*/
ul{list-style:none}/*去掉小圆点吧*/
li{float:left;margin-left:10px;}/*水平排列并来点间距吧,不要把我挤得太紧了。*/
嗯,现在看看,达到小目标了。
骨架有了,接下来就是给每个菜单项穿上漂亮的衣裳。
要满足第一项要求,首先要有一个漂亮的按钮,自已画一个,哦,我不是美术人员,难!不过,别恢心,网络之大,无奇不有,说不定人家已经有做好的,google一下,还真发现了一个,感谢啊!(眼泪哪个哗哗的….)按钮源码:http://bbs.blueidea.com/thread-2860891-1-1.html
有了设计好的按钮源码,省去设计的一环,真好。但要做成三态按钮,还需要我们改造一下这个按钮。看到第七条目标了吗,我们是要做自适应的按钮,所以要对这个按钮做一些加工处理。
我们将这三个按钮分别表现为鼠标移开、点击后、鼠标移上时的三种状态,要做滑动门菜单,需要将一个按钮从中间剖开,左边图处放在左侧,右边图片放在右侧。要适应文字加长的情况,还要将这个图层宽度拉长一点,但这个图片有很复杂的阴影特效,不能随便拉伸,否则效果就不像了。我们就从中间给它剖开,将右边图片的左侧向前平辅拉伸。如图二所示
图一
所以我们先将它如图哪样切成六片,然后将这六张图片合并在一起。为什么要这样呢?看看css sprites原理吧
图二
上图中第一和第二个图片组成普通菜单样式(默认样式),第三、第四个图片组成翻滚样式,第五和第六个图片组成点击后的菜单项样式。
我们将阴影图片专门提取出来,作成一张很小的背景图片。
图三
该要的图形都准备好了,接下来,我们将这个图片加在菜单项上吧。一个按钮要用到两张图片才能表现出来。地球人都知道,一个标签只能装一张图片(如果你发现一个标签能装上两张图片,请及时告诉我,我请你吃饭!)。哦!我的菜单结构中每一项刚好有两个标签,一个是li,它里面有一个A标签,刚好可以用来装左右两张图片。Li用来装左侧的图片,A用来装右侧的图片。我真佩服我自己,这么好的点子都能想得出来,正在沾沾自喜的自我陶醉中…
别忙,哦,天啦,如果这样来装图片,我的三种鼠标翻滚状态如何实现?我们都应该知道,目前除了该死的IE6,其它的浏览器都支持li:hover伪类。然而要兼容各主流浏览器(这是我们的第8项目标哟,别忘了!),这种方法是行不通的。IE6只能在A标签上应用伪类,其它的标签它可是一概不理!
既然IE6只能在A标签上应用hover伪类,那么我们要制作自适应的滑动门菜单,就需要在结构上动手脚了,看来只能在A标签中再加入一个标签,那么菜单的结构就会变成下面这个样子了。(注意:这儿就开始改变结构了,虽然我一直想极力避免这种情况的发生,但好像要达到要求,这个标签是非加不可了。)
<li><a href="#none" title="冰极峰"><span>冰极峰</span></a></li>
我们在A标签中加入了一个span容器,它将文字内容包括起来了。现在有两个标签,可以装两张图片了。我们将右侧图片放在A标签的背景中并向右靠齐,将左侧图片放在SPAN标签中并向左靠齐。这样就能表现出一个完整的按钮形状。
还好,虽说多加了一个标签,但它还不是完全无语义。
猜你喜欢
- 用mysqlbinlog.exe查看二进制日志是否启用了日志mysql>show variables like 'log%
- 我们可以用动态产生变量的方法,从表格里捕捉数据,动态地创造“剥离”变量引号并且“清理”它,见下列代码,我们只需键入变量名称,选择 query
- 先来看看Global.asax文件代码:<script language="VB" runat
- 代码如下:<% set rs=server.createobject("adodb.recordset&
- 听说安全地断开Connection连接的记录集可以提高ASP的运行速度,请问如何实现?很多人会将一个Connection对象存储在Appli
- MySQL 拥有一个复杂的但直观易学的 SQL 接口。这个章节描述了各种不同的命令、类型和函数,为了高效地使用 MySQL 需要了解它们。这
- 本文从多个角度来讲解如何在Access数据库上如何上传并且显示上所上传图片。在 * 站制做过程中,需要上传图片、显示图片,上传的图片要能够保
- 本文介绍了用ASP的AdoDb.Stream读取/写入UTF-8编码格式的文件的方法:函数名称:ReadTextFile 作用:利用AdoD
- 页面域关系:主页面a.html所属域A:www.aspxhome.com被iframe的页面b.html所属域B:www.cidianwan
- 作为前端开发工程师,平时对于Dom的查找遍历和操作是家常便饭。对于优秀的前端来说,也肯定早已有了自己的一套方法来封装这些重复的操作。但是,现
- 我们将在下面的例子中使用这个 XML 文档。<?xml version="1.0" encod
- 在SQL Server数据库中,有min server memory与max server memory两个内存选项。数据库管理员合理设置这
- Mysql数据库是一个多用户,多线程的关系型数据库,是一个客户机/服务器结构的应用程序。它是对个人用户和商业用户是免费的.Mysql数据库具
- 以下是SQL连接代码: 代码如下:Function Open_conn() dim Conn,Strconn&
- 论坛里面有不少人在使用Javascript编写Asp,经常有人在论坛提问,为什么Asp对象在对比指定值时返回结果不对?现在在这里给大家写点关
- 我一直都不喜欢在访问数据库时采用拼接SQL的方法,原因有以下几点: 1. 不安全:有被SQL注入的风险。 2. 可能会影响性能:每条SQL语
- 本人最近在当当网上购买了一本关于用户体验的书,在此把最实在的内容整理下发给大家分享下。第一步:表现层视觉设计,也就是我们说的网页设计师做的工
- 永远不要相信用户输入的内容具有适当的大小或者包含适当的字符。在使用其做出决策之前应该始终对用户输入进行验证。最佳的选择是创建一个
- 在IE下测试,发现最大值是:18014398509481984(0x40000000000000)另外发现一个奇怪的问题:JS世界居然不存在
- 同事在准备新老系统的切换,清空一个表的时候往往发现这个表的主键被另一个表用做外键,而系统里有太多层次的引用.所以清起来相当麻烦用下面这个脚本