CSS3 网页下拉菜单代码解释 中文翻译


Posted in HTML / CSS onFebruary 27, 2010

当我在为 WordPress 编写 Notepad 主题 时,顺道学习了一些新的 CSS3 特性,现在此分享。查看演示可以看到一款类似 Mac 风格的多级下拉菜单,使用 border-radius,box-shadow 和 text-shadow 创建。在 Firefox,Safari 和 Chrome 浏览器中能够完美地渲染。即便是诸如 IE7+ 等不兼容 CSS3 的浏览器,也可以正常呈现页面,只不过忽略了对圆角和阴影的渲染。

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

预览

下图展示了不兼容 CSS3 情况下的菜单样式。
CSS3 网页下拉菜单代码解释 中文翻译
使用了一个渐变图像

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

CSS3 网页下拉菜单代码解释 中文翻译
渐变的强度可以通过切换背景图像的上移或下移来改变。此外,渐变颜色可以很容易地通过改变背景颜色来调整。

CSS3 网页下拉菜单代码解释 中文翻译

CSS 代码

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

CSS3 网页下拉菜单代码解释 中文翻译

CSS3 网页下拉菜单代码解释 中文翻译

英文原稿:CSS3 Dropdown Menu | WebDesignerWall

HTML / CSS 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
CSS3属性选择符介绍
Oct 17 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
canvas如何绘制钟表的方法
Dec 13 HTML / CSS
CSS3模块的目前的状况分析
Feb 24 #HTML / CSS
让IE可以变相支持CSS3选择器
Jan 21 #HTML / CSS
玩转CSS3色彩
Jan 16 #HTML / CSS
需要知道的CSS3动画技术
Jan 01 #HTML / CSS
CSS3 倾斜的网页图片库实例教程
Nov 14 #HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 #HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 #HTML / CSS
You might like
PHP 数组实例说明
2008/08/18 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
php与js的区别是什么
2013/08/05 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
Angularjs单选框相关的示例代码
2017/08/17 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
python自动化测试之连接几组测试包实例
2014/09/28 Python
深入理解Python中的*重复运算符
2017/10/28 Python
深入理解Python中的super()方法
2017/11/20 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python for循环生成列表的实例
2018/06/15 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
应聘教师求职信
2014/07/19 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
暂住证证明
2015/06/19 职场文书
推普标语口号大全
2015/12/26 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
解析Redis Cluster原理
2021/06/21 Redis
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js