龙源期刊网 http://www.qikan.com.cn
采用“滑动门”技术制作适应宽度变化的圆角框菜单
作者：吴瑕
来源：《电脑知识与技术》2015年第11期
摘要：在网页制作中，常常需要制作圆角框的菜单，通常的做法是将圆角框整体作为背景切片，然后分别将切下的图片作为各个菜单项的背景，这样做无法适应不同宽度的菜单项。该文介绍采用一种“滑动门”技术，制作可以适应宽度变化的菜单项。 关键词：滑动门；CSS；圆角框
中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2015）09-0183-02
在网页制作中，常常需要制作圆角框的菜单，图1就是一个网上书店的顶部菜单截图。要制作这样的圆角框菜单，通常的做法是将圆角框整体作为背景切片，然后分别将切下的图片作为各个菜单项的背景。这样做存在一个缺陷，即无法适应不同宽度的菜单项，如果菜单项的文字长度不同，就必须为每一个菜单项制作一个单独的背景图像， CSS也需要单独设置，非常麻烦。本文将采用一种“滑动门”技术，制作可以适应宽度变化的菜单项。
图1 菜单常态网页截图
图2 鼠标经过“帮助中心”菜单项截图 1采用“滑动门”技术制作圆角框菜单 1.1准备背景图片
准备两个颜色深浅不一的背景图片，浅色图片是菜单常态下的背景，深色图片是鼠标经过时的背景。背景图像要做得宽一些，才能适应较宽的菜单项。 1.2 编写HTML代码
接着编写HTML代码，为了实现适应宽度变化的圆角框菜单，在每个菜单项的超链接文字外加上一对标记，这是“滑动门”的关键之处。
龙源期刊网 http://www.qikan.com.cn
HTML 代码如下： 1.3 “滑动门”技术工作原理
在每个菜单项中，为a元素与span元素都同时设置一个背景图像，一个从左边开始显示背景，一个从右边开始显示背景，二者中间部分重叠，两端点不重合，就可以分别显示出两端的圆角了。“滑动门”方法示意图如下所示：
图3（a） a元素背景图片示意图
图3（b） span元素背景图片示意图
图3（c） 最终效果 1.4 CSS实现
按照上节的思路编写CSS实现，代码如下： #topNavigation li{ float：left； padding：0 2px }
#topNavigation a{ /*为a 元素设置背景*/ display：block； /*将a元素设置为块级元素*/ line-height：20px；
background：transparent url（top-navi-white.png） no-repeat；
padding：0 0 0 14px； /*为a元素设置左边的padding值，显示左边的圆角框背景*/ } #topNavigation a span{ /*为span 元素设置背景*/ display：block； /*将span元素设置为块级元素*/
龙源期刊网 http://www.qikan.com.cn
background：transparent url（top-navi-white.png） no-repeat right； /*span的背景图片位置设置为靠右*/
padding：0 14px 0 0； /*为span元素设置右边的padding值，显示右边的圆角框背景*/ } 1.5 鼠标经过菜单项的CSS设置
CSS设置到这里菜单的通常状态已经完成，接下来设置鼠标经过菜单项的样式，效果如图2所示。鼠标经过菜单项将使用深色背景图片，同时改变文字颜色。CSS 代码如下： #topNavigation a：hover{ /*为a 元素设置鼠标经过时的背景*/ color：#FFF；
background：transparent url（top-navi-hover.png） no-repeat；} #topNavigation a：hover span { /*为span元素设置鼠标经过时的背景*/ background：transparent url（top-navi-hover.png） no-repeat right；} 2 结束语
“滑动门”技术解决了宽度不一的圆角框菜单项的制作问题，使用该技术也可以实现适应高度变化的菜单项，还可以如法炮制进一步改进，制作同时适应高宽变化的圆角框。 参考文献：
[1] 温谦. 别具光芒CSS网页布局案例剖析[M]. 北京： 人民邮电出版社， 2010. [2] 袁磊， 陈伟卫. 网页设计与制作实例教程[M]. 北京： 清华大学出版社， 2011.