首页 > 代码库 > 制作滑动门菜单
制作滑动门菜单
在之前的工作中有一次遇到了一种菜单，要随菜单名称的长短而伸展和缩短，后来查了相关资料才知道这种菜单的被称为“滑动门菜单”……
样子就像下面的图片这样：
做法：
把菜单分成三部分：左边、中间、右边。菜单的左边和右边各用一张背景图片（不平铺），中间用一张背景图片，这张背景图是要平铺的，因为中间部分会随着菜单字数的增多而伸展开来，切图如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">*{margin:0; padding:0;}#menu {margin:30px auto; background-color:#f6e4b9; font-size:14px; color:#222; width:1000px;}#menu ul{list-style:none; height:25px; width:1000px; }#menu ul li{float:left; }#menu ul li a{color:#222; text-decoration:none; display:block; background:url(images/line_left.png) no-repeat left top, url(images/line_right.png) no-repeat right top; padding:0 19px; }#menu ul li a span{line-height:25px; display:block; background:url(images/line_center.png) repeat-x;}#menu ul li a:hover{color:#222; text-decoration:none; display:block; color:white; background:url(images/bg_left.png) no-repeat left top, url(images/bg_right.png) no-repeat right top; padding:0 19px; }#menu ul li a:hover span{line-height:25px; display:block; background:url(images/bg_center.png) repeat-x;<style/></head><body> <div id="menu"> <ul> <li><a href=""><span>首页</span></a></li> <li><a href=""><span>新闻公告</span></a></li> <li><a href=""><span>我们的最新资讯</span></a></li> <li><a href=""><span>有关我们的发展履历和历史</span></a></li> </ul> </div></body></html>
制作滑动门菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。