首页 > 代码库 > 8.2 自适应的斜角水平菜单
8.2 自适应的斜角水平菜单
本案例中,制作一个带有斜角的水平菜单。依然和上例一样,它也是可以适应窗口宽度的,效果如图1所示。 该实例文件位于网页学习网CSS教程资源中的“第8章\01\cut-naiv.htm”。 图1 自适应的斜角水平菜单效果 一、基本思路 本案例的关键在于,如何制作出菜单项左上角这个斜角。如果有了上一章中制作“带箭头的菜单”的经验,掌握了使用“钩子“的方法,本案例的实现就很容易了。lodidance.com 对于每一个菜单项的a元素,放置一个span元素,设为corner类别,并作为CSS“钩子”,用于实现斜角效果,代码如下所示。 折叠XML/HTML 代码复制内容到剪贴板
二、基本设置 首先设置#menu容器。仅设置文字的样式即可,无需设置其他属性,代码如下。 折叠CSS 代码复制内容到剪贴板
接着,设置每一个菜单项的基本属性,代码如下。 折叠CSS 代码复制内容到剪贴板
这段代码中,将a元素设置为块级元素,并向左浮动。 注意:这里通过positiom属性将每个菜单项的定位方式设置为相对定位,目的不是要移动菜单项本身,而是通过这个设置将自身变为“包含块”,从而才能使挂在它上面的斜角元素以它为基准来定位。 这时基本设置就完成了,下面就要实现斜角的效果了。 三、设置斜角效果 这里先介绍一下斜角的产生方法。假设有如下一个简单的完整网页。 折叠XML/HTML 代码复制内容到剪贴板
这个页面在IE和Firefox中的效果分别如图2所示。 图2 使用边框产生的形状 可以看到这种设置方法,对于Firefox和IE都可以实现一个正方形,并且4个三角形独立控制颜色。接下来在上面的样式中找到如下两行: 折叠CSS 代码复制内容到剪贴板
修改为: 折叠CSS 代码复制内容到剪贴板
这时产生的效果如图3所示,正是本案例所需要的斜角形状。 图3 使用边框产生的斜角 有了这个基础,再继续完成导航条就很容易了。根据上面设置斜角的方法,对“#menu a span”进行设置,代码如下。这里对边框的样式写法稍有不同,本质完全相同。 折叠CSS 代码复制内容到剪贴板
这里与上面试验的斜角的代码相比,只多了如下两行。 折叠CSS 代码复制内容到剪贴板
这两行的作用是进行斜角的定位。由于前面的a元素已经设置为相对定位,而这里的这个span是a的下级元素,又设置为绝对定位,因此这个斜角将以a元素的位置为基准进行定位。 经验:那么可能读者会想到,既然top和left都设置为0,是不是可以省略这两行语句不写呢? 答案是否定的,如果省略这两个语句。效果将显示错误的斜角效果。这是因为,默认情况下,这个斜角将放置在“内容”的左上角,而我们希望的是放置在以边框为界的左上角。 当把这两行语句加上以后,就可以看到正确的效果了,如图1所示。接下来的任务就是设置鼠标经过效果了。 四、设置鼠标经过效果 下面设置鼠标经过效果。这里希望鼠标指针经过某个菜单项的时候,菜单项的背景颜色由红色改变为橘黄色,文字由白色变为深灰色,代码如下。lodidance.com 折叠CSS 代码复制内容到剪贴板
这时的效果,有点像“折角”的效果,看起来也很不错。如果喜欢这个效果,就可以到这里结束了。 如果希望当鼠标指针经过时,斜角部分也变成橘黄色,可以增加如下代码。 折叠CSS 代码复制内容到剪贴板
这样,当鼠标指针经过菜单项时,包括斜角部分,也会一同变为橘黄色,效果如图1所示。至此本案例就全部完成了。 点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表 |
编辑:网页学习网 |
本文地址:http://www.lodidance.com/css/jc/723.html |