PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> CSS >> 

用CSS3制作网页下拉菜单代码

用CSS3制作网页下拉菜单代码

来源:互联网  作者:  发布时间:2010-02-25
本文介绍一款类似 Mac 风格的多级下拉菜单,使用 border-radius

本文介绍一款类似 Mac 风格的多级下拉菜单,使用 border-radius,box-shadow 和 text-shadow 创建。在 Firefox,Safari 和 Chrome 浏览器中能够完美地渲染。即便是诸如 IE7+ 等不兼容 CSS3 的浏览器,也可以正常呈现页面,只不过忽略了对圆角和阴影的渲染。

查看演示:http://www.webdesignerwall.com/demo/css3-dropdown-menu

预览

下图展示了不兼容 CSS3 情况下的菜单样式。

使用了一个渐变图像

白色透明的图像用于实现渐变效果。因为新的 CSS3 渐变特性还没有得到所有浏览器的支持,使用简便背景图片更为安全。

渐变的强度可以通过切换背景图像的上移或下移来改变。此外,渐变颜色可以很容易地通过改变背景颜色来调整。

CSS 代码

我不打算解释逐行解释 CSS 代码。下面的图片很好地解释了编写下拉菜单的关键点。



延伸阅读:
很眩的半透明下拉菜单导航条
用DIV+js模拟的一个下拉菜单(select)源码
用DIV+js模拟的一个下拉菜单(select)
CSS3的新特性介绍
未来Web设计CSS3+HTML5效果演示
25个优秀的下拉菜单导航脚本
CSS3:文字阴影效果
css3.0中文手册
CSS圆角在CSS2和CSS3里的实现方法
Tags: 代码   下拉菜单   网页   css3   css   菜单   C    
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号