7.3 立体菜单

该实例文件位于网页学习网 CSS教程资源中的“第7章\03\3d-navi.htm”。

图1 立体菜单效果

一、基本设置

本案例仍然使用和上一个案例相同的HTML结构，基本代码HTML如下。

XML/HTML 代码复制内容到剪贴板

1. <body>
2. <div id="menu">
3. <a href="#"> Home</a>
4. <a href="#"> Contact Us</a>
5. <a href="#"> Web Dev</a>
6. <a href="#"> Web Design</a>
7. <a href="#"> Map</a>
8. </div>
9. </body>

对于#menu容器的设置如下。 lodidance.com

折叠展开CSS 代码复制内容到剪贴板

1. #menu {                         /*对menu层设置*/
2. font-family:Arial;           /*字体*/
3. font-size:14px;              /*字号*/
4. }

在对#menu的设置中，设置了基本的字体和字号，其他都没有做设置，留待菜单项中进行相关的设置。

二、菜单项设置

菜单项的普通状态的设置方法与前一个案例相似，代码如下。

折叠展开CSS 代码复制内容到剪贴板

1. #menu a, #menu a:visited {
2. text-decoration:none;             /*文字无下划线*/
3. text-align:center;                /*文字水平居中对齐*/
4. color:#fff;                       /*白色文字*/
5. display:block;                    /*设置为块级元素*/
6. width:10em;                       /*宽度*/
7. padding:0.25em;                   /*内边距*/
8. margin:0.5em auto;                /*菜单项之间间隔0.5em，并水平居中*/
9. background-color:#8ab;            /*背景色*/
10. border:2px solid #fff;            /*边框粗细2像素*/
11. border-color:#def #678 #345 #cde; /*边框颜色显示突起效果*/
12. position:relative;                /*使用相对定位*/
13. }

前3行样式用于设置文字。接下来的5行用于设置菜单项的盒子模型参数，再接下来的两行设置边框，2个像素宽。需要特别注意的是4条边框颜色的设置。在实现凸起的效果耐，通常都认为光线从左上方照射过来，因此上边框和左边框使用浅色．下边框和右边框使用深色，就会产生凸起的视觉效果。

现在实现鼠标指针经过时的按钮凹陷样式。首先为了产生按钮被按下的效果，可以使按钮向右下方平移2个像素，这样在按钮被按下的一瞬间产生的连续动作可以明显地体现被按下的视觉效果。

为了能够使按钮从原有位置平移，需要将按钮所在的盒子设置为相对定位，也就是上面代码中的最后一行。

折叠展开CSS 代码复制内容到剪贴板

1. position:relative;              /*使用相对定位*/

注意：读者需要特别记住这一点，所谓相对定位，是指以定位元素自身所在的位置为基准，平移指定的距离。

接下来，在鼠标指针经过的样式设置中，确定平移的方向和距离，代码如下。

折叠展开CSS 代码复制内容到剪贴板

1. #menu a:hover {
2. top:2px;                          /*向下移动2像素*/
3. left:2px;                         /*向右移动2像素*/
4. border-color:#345 #cde #def #678; /*边框颜色显示突起效果*/
5. }

“top:2px”的含义是，距离上界2个像素。由于原来鼠标指针未经过时，距离上界是0像素，因此产生的效果就是向下移动了2个像素。依此类推，“left:2px”的效果是向右移动2个像素。由于前面已经设定定位方式为相对定位，因此这里的移动都是以自身原来的位置为基准进行的。

为了实现凹陷的视觉效果，需要将上下边框的颜色交换，左右边框的颜色交换。这样，这个立体菜单的效果就完成了。

这个案例在IE浏览器中的显示效果和在Firefox中完全相同，如图1所示。

点击下载第1~7章CSS教程资源 返回《CSS教程布局之道》教程列表