首页 > 代码库 > 8.2 自适应的斜角水平菜单

8.2 自适应的斜角水平菜单

2024-07-08 20:46:42   230人阅读

本案例中，制作一个带有斜角的水平菜单。依然和上例一样，它也是可以适应窗口宽度的，效果如图1所示。

该实例文件位于网页学习网CSS教程资源中的“第8章\01\cut-naiv.htm”。

图1 自适应的斜角水平菜单效果
图1 自适应的斜角水平菜单效果

一、基本思路

本案例的关键在于，如何制作出菜单项左上角这个斜角。如果有了上一章中制作“带箭头的菜单”的经验，掌握了使用“钩子“的方法，本案例的实现就很容易了。lodidance.com

对于每一个菜单项的a元素，放置一个span元素，设为corner类别，并作为CSS“钩子”，用于实现斜角效果，代码如下所示。

折叠XML/HTML 代码复制内容到剪贴板
  1. <div id="menu">  
  2.    <a href="#">  
  3.        <span class="left"></span>    
  4.            Home </a>    
  5.    <a href="#">  
  6.         <span class="left"></span>  
  7.            Contact Us </a>  
  8.    <a href="#">  
  9.         <span class="left"></span>  
  10.             Web Dev </a>    
  11.    <a href="#">  
  12.         <span class="left"></span>  
  13.             Web Design </a>    
  14.    <a href="#">  
  15.         <span class="left"></span>  
  16.             Map </a>  
  17. </div>

二、基本设置

首先设置#menu容器。仅设置文字的样式即可，无需设置其他属性，代码如下。

折叠CSS 代码复制内容到剪贴板
  1. #menu {   
  2.   font-family:Arial;   
  3.   font-size:14px;   
  4. }

接着，设置每一个菜单项的基本属性，代码如下。

折叠CSS 代码复制内容到剪贴板
  1. #menu a, #menu a:visited {   
  2.   display:block;    
  3.   float:left;   
  4.   position:relative;   
  5.   background-color:#c00;   
  6.   color:#fff;    
  7.   text-decoration:none;   
  8.   padding:6px;   
  9.   margin:1px 0 0 1px;    
  10. }

这段代码中，将a元素设置为块级元素，并向左浮动。

注意：这里通过positiom属性将每个菜单项的定位方式设置为相对定位，目的不是要移动菜单项本身，而是通过这个设置将自身变为“包含块”，从而才能使挂在它上面的斜角元素以它为基准来定位。

这时基本设置就完成了，下面就要实现斜角的效果了。

三、设置斜角效果

这里先介绍一下斜角的产生方法。假设有如下一个简单的完整网页。

折叠XML/HTML 代码复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>CSS教程资源 | 网页学习网| WWW.lodidance.com</title>  
  6. <style type="text/css">  
  7. div {   
  8.     position:absolute;   
  9.     height:0;   
  10.     width:0;   
  11.     overflow:hidden;   
  12.     border-style:solid;   
  13.     border-width:60px;  
  14.     border-color:#ccc #999 #666 #333;   
  15. }   
  16. </style>  
  17. </head>  
  18. <body>  
  19.     <div></div>  
  20. </body>  
  21. </html>

这个页面在IE和Firefox中的效果分别如图2所示。

图2 使用边框产生的形状
图2 使用边框产生的形状

可以看到这种设置方法,对于Firefox和IE都可以实现一个正方形，并且4个三角形独立控制颜色。接下来在上面的样式中找到如下两行：

折叠CSS 代码复制内容到剪贴板
  1. border-width:60px;   
  2. border-color:#ccc #999 #666 #333;

修改为：

折叠CSS 代码复制内容到剪贴板
  1. border-width:0 0 60px 60px;   
  2. border-color:#fff #fff #666 #fff;

这时产生的效果如图3所示，正是本案例所需要的斜角形状。

图3 使用边框产生的斜角
图3 使用边框产生的斜角
 

有了这个基础，再继续完成导航条就很容易了。根据上面设置斜角的方法，对“#menu a span”进行设置，代码如下。这里对边框的样式写法稍有不同，本质完全相同。

折叠CSS 代码复制内容到剪贴板
  1. #menu a span{   
  2.  height:0;   
  3.  width:0;   
  4.  border-bottom:solid 6px #c00;   
  5.  border-left:solid 6px #fff;   
  6.  position:absolute;   
  7.  top:0;   
  8.  left:0;   
  9.  overflow:hidden;   
  10. }

这里与上面试验的斜角的代码相比，只多了如下两行。

折叠CSS 代码复制内容到剪贴板
  1. top:0;   
  2. left:0;

这两行的作用是进行斜角的定位。由于前面的a元素已经设置为相对定位，而这里的这个span是a的下级元素，又设置为绝对定位，因此这个斜角将以a元素的位置为基准进行定位。

经验：那么可能读者会想到，既然top和left都设置为0，是不是可以省略这两行语句不写呢？

答案是否定的，如果省略这两个语句。效果将显示错误的斜角效果。这是因为，默认情况下，这个斜角将放置在“内容”的左上角，而我们希望的是放置在以边框为界的左上角。

当把这两行语句加上以后，就可以看到正确的效果了，如图1所示。接下来的任务就是设置鼠标经过效果了。

四、设置鼠标经过效果

下面设置鼠标经过效果。这里希望鼠标指针经过某个菜单项的时候，菜单项的背景颜色由红色改变为橘黄色，文字由白色变为深灰色，代码如下。lodidance.com

折叠CSS 代码复制内容到剪贴板
  1. #menu a:hover{   
  2.   background-color: #F90;   
  3.   color:#333  
  4. }

这时的效果，有点像“折角”的效果，看起来也很不错。如果喜欢这个效果，就可以到这里结束了。

如果希望当鼠标指针经过时，斜角部分也变成橘黄色，可以增加如下代码。

折叠CSS 代码复制内容到剪贴板
  1. #menu a:hover span{   
  2.     border-bottom:solid 6px #f90;   
  3. }

这样，当鼠标指针经过菜单项时，包括斜角部分，也会一同变为橘黄色，效果如图1所示。至此本案例就全部完成了。

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

编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/723.html


联系
我们