前些日子设计站点时，看到了一些斜角菜单的导航形式，如Indiana University Library .等少数国外站，但是大概查看一下代码，多为js实现，害怕兼容问题，没有使用。不过如今，利用纯CSS也可以实现斜角菜单了。关键在于倾斜的平行四边会造成首尾两个按钮的重合区，因此设置背景就是重点。设定时需固定li a 的宽度为单个倾斜四边形的宽度。然后使用相对加绝度定位调节他们相互的距离。让他们首尾有重叠区域。也就是切图时候拉开，定义时候拉近，很简单的思路。这样背景需要用到通明gif 或者png，才会放置重叠区域相互遮挡效果还是很绚的。
效果图. :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml...
<html xmlns="http://www.w3.org/1999/xht...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
li {
display: inline;
}
#a,#b,#c,#d,#e,#f {
position: relative;
}
#a {
left: 0px;
}
#b {
left: 83px;
}
#c {
left:166px;
}
#d {
left: 249px;
}
#e {
left: 332px;
}
#f {
left: 415px;
}
li a {
width: 110px;
font-weight: bold;
text-align: center;
color: #FFFFFF;
line-height: 30px;
text-decoration: none;
position: absolute;
background-image: url(menu004.gif);
background-repeat: no-repeat;
background-position: center top;
}
li a:hover {
background-position: center bottom;
color: #fff;
}
body {
background-color: #fff;
}
-->
</style>
</head>
<body>
<ul>
<li id="a"><a href="#">menu1</a></li>
<li id="b"><a href="#">menu2</a></li>
<li id="c"><a href="#">menu3</a></li>
<li id="d"><a href="#">menu4</a></li>
<li id="e"><a href="#">menu5</a></li>
<li id="f"><a href="#">menu6</a></li>
</ul>
</body>
</html>
说明：其变换背景的方法就是我们在前面"CSS特效：无所不能的超炫链接效果"中提到的方法。另外，考虑到ie6不支持li的focus，而且ie6也不支持透明png，所以兼容又将成为问题。唉，无奈，IE6，真是让人痛恨～
Comments