手工打造分离式滑动门导航菜单 [3]

mseed

我们要做成自适应宽度的菜单，那么，我们就不能设置菜单的宽度值，所以我们不能像平时制作一个水平的有固定宽度的菜单的做法那样，设置宽度，然后向左浮动。如果这样的话，每个菜单项的宽度不同时，要分别定义每一项的宽度，那就必须给每个菜单项定义一个ID或CLASS,并且这种方式也不利后台程序的动态循环输出。
我们需要的是像内联元素一样从左到右自动在一行内排列每个菜单项，那么我们就需要菜单以内联的方式表现出来，OK,我们就用display:inline吧，这是一个非常有用的属性：它解析后的排列方式能达到我们的基本要求：在一行内从左到右自动排列标签元素，每一项宽度可以不同。
如果用上面这种属性真的能满足我们需要了，就没有下面这一段文字内容。
虽说这个属性能满足我们项目基本需要，可是它有一个非常致命的弱点：它不能设置宽度和高度值，不信你可以试试。它只表现为文字的默认高度和宽度，超出这个宽高值后就自动隐藏了。这样一来，我在这里面是有背景图片的，要表现出这个图片效果，我们需要给定一个宽度和高度。这就不能做出我们的效果了，郁闷！还好，还有一个属性：display:inline-block;它的表现就是我们需要的。
但是…这个属性也有致命弱点，它只能被FF3等高级浏览器识别。其它的浏览器只能绕道而行了。啊哦！所以，统一浏览器标准是多么的重要啊！看来，HACK也是我们逼不得已的一种解脱方式了。
还好，有高手早就找到了解决之道了。请大家先看看这两篇文章。
相关教程：
《display:inline-block的应用两例》（秦歌）
《模拟兼容性的 inline-block 属性》（怿飞）
原理我们都了解了，我们可以根据上面两篇文章提供的技巧来做一个自适应的菜单了。
我们先写右侧图片的样式，它是应用在li元素的子节点A标签中的。

1. 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来撑开它的边距，让它有一定的空间来装填图片。注意，这里的图片路径换成你自己的路径。然后设置其它的样式，如去掉下划线，字体颜色，字体大小等等。设置图片靠右对齐。

1. 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来撑开它的宽度和高度。

1. li a,li a span{display:inline;cursorointer;}

复制代码

然后将它们的又设置回inline内联模式，触发IE的haslayout特性。
在上面的代码，我们还看到有一个HACK的应用，*padding-bottom：0;和*padding-top：0;这用来解决IE与FF等浏览器不同效果的。不信你删除后看看会有什么效果，在IE下高度伸展有问题。
好了下面该写鼠标移上时的效果了。

1. li a:hover{padding-right:30px;background:url(images/button.gif) no-repeat right -108px;}
   
2. li a:hover span{padding-left:30px;background:url(images/button.gif) no-repeat left -72px;font-weight:bold;}

复制代码

再接下来是鼠标点击后的效果。

1. li a:active{padding-right:30px;background:url(images/button.gif) no-repeat right -180px;}
   
2. li a:active span{padding-left:30px;background:url(images/button.gif) no-repeat left -144px;font-weight:bold;}

复制代码

ok,似乎大功告成，在不同浏览器下看看，似乎都能达到满意的效果。下面是截图：

图四

现在纯CSS版的滑动门菜单基本上就做好了。