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 相关文章推荐
纯css3实现走马灯效果
Dec 26 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
css背景和边框标签实例详解
May 21 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 接口类与抽象类的实际作用
2009/11/26 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
不懂JavaScript应该怎样学
2008/04/16 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
npm ci命令的基本使用方法
2020/09/20 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
Flask框架信号用法实例分析
2018/07/24 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
九州传奇上机题
2014/07/10 面试题
党员群众路线自我剖析材料
2014/10/06 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python
Java的Object类的九种方法
2022/04/13 Java/Android