CSS导航菜单--三状态玻璃效果菜单（双层滑动门应用）

原文链接：http://www.cnblogs.com/zfang/archive/2011/10/13/2209635.html

本例进一步讨论背景图片制作菜单的方法，目标是实现一个具有3个状态的菜单，如图所示



三状态玻璃效果菜单
首先要准备所需的图片，本例中只是用了一张图片完成这个效果，如图所示：



现在设置HTML代码，如下所示。

<div id="menu">

<ul>

<li><a href="#"><b>Home</b></a></li>

<li><a href="#"><b>Contact Us</b></a></li>

<li><a href="#"><b>Web Dev</b></a></li>

<li><a href="#"><b>Web Design</b></a></li>

<li class="current"><a href="#"><b>Map</b></a></li>

</ul>

</div>

对于列表元素ul和列表项目li进行设置，代码如下。

#menu ul{

font-family:Arial, Helvetica, sans-serif;

font-size:14px;

padding:0 0 0 8px;

margin:0 auto;

list-style:none;

height:50px;

}

#menu ul li{

float:left;

margin:0 2px;

}

设置背景图片，代码如下。

#menu ul li a{

display:block;

float:left;

line-height:50px;

color:#666;

text-decoration:none;

padding:0 0 0 14px;

background:url(bj1.gif);

}

这是，浏览器中效果如图所示，此时每一个菜单项的普通状态图片已经出现，只是还缺少边缘的配合。



第一层中的左侧滑动门

利用<b>标记，可以挂接右侧边缘所需图像，代码如下：

#menu ul li a b{

display:block;

padding:0 14px 0 0;

background:url(bj1.gif) no-repeat right top;

}

这是浏览器里显示的图像就完全出现了，下面只要设置鼠标经过的效果了



设置第二层滑动门

现在设置第二层滑动门，即鼠标经过时候的效果，代码如下所示：

#menu ul li a:hover{

color:#fff;

background:url(bj1.gif) left center;

}

#menu ul li a:hover b{

background:url(bj1.gif) right center;

}

这时效果如图所示



设置表示当前页面的菜单项

对表示当前页所在的菜单项进行特殊设置，及设置Class=”current”的列表项目。

方法和上麦年也是类似的，代码如下：

#menu ul li.current a{

color:#fff;

background:url(bj1.gif) no-repeat left bottom;

}

#menu ul li.current b{

background:url(bj1.gif) no-repeat right bottom;

}

设置当鼠标经过这个菜单项是，依然用一样的背景，通知使用箭头光标，代码如下：

#menu ul li.current a:hover{

background:url(bj1.gif) no-repeat left bottom;

cursor:default;

}

#menu ul li.current a:hover b{

background:url(bj1.gif) no-repeat right bottom;

}

到现在，该菜单还存在缺点，这个菜单使用了自适应浏览器宽度的方式，也就是浏览器窗口变窄是后，菜单项会自动折行。但个别情况会出现问题，如图所示：



解决这个问题的方法在前面的案列里曾经使用过，即在“#menu ul”设置的样式中曾加如下规则。

white-space:nowrap;

它的含义就是一个菜单项不允许从空白字符处折行，这样效果如图所示：





禁止菜单项内折行

标签: CSS导航, 双层滑动门