使用 CSS3 创建下拉菜单

标签: css3 下拉菜单 | 发表时间:2011-10-03 08:30 | 作者:孟晨 We_Get
出处:http://www.cnblogs.com/

     当我在为 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 渐变特性还没有得到所有浏览器的支持,使用简便背景图片更为安全。

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

CSS 代码

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


英文原稿:CSS3 Dropdown Menu | WebDesignerWall

翻译整理:使用 CSS3 创建下拉菜单 | 孟晨

作者:孟晨
出处:http://www.cnblogs.com/xiaoyao2011/
欢迎任何形式的转载,但请务必注明出处。

作者: 孟晨 发表于 2011-10-03 08:30 原文链接

评论: 1 查看评论 发表评论


最新新闻:
· 德国废弃卫星将坠地球 砸人几率更高(2011-10-03 16:13)
· 《愤怒的小鸟》开发商Rovio遭遇晴天霹雳:公司品牌广告业务副总裁突然离职(2011-10-03 16:11)
· 也许,他是认真的(2011-10-03 16:07)
· 仰天大笑出门去,我辈岂是蓬蒿人(2011-10-03 15:54)
· “弹性社交”能卷土重来吗?(2011-10-03 15:52)

编辑推荐:使用memc-nginx和srcache-nginx模块构建高效透明的缓存机制

网站导航:博客园首页  我的园子  新闻  闪存  小组  博问  知识库

相关 [css3 下拉菜单] 推荐:

使用 CSS3 创建下拉菜单

- We_Get - 博客园-首页原创精华区
     当我在为 WordPress 编写 Notepad 主题 时,顺道学习了一些新的 CSS3 特性,现在此分享. 查看演示可以看到一款类似 Mac 风格的多级下拉菜单,使用 border-radius,box-shadow 和 text-shadow 创建. 在 Firefox,Safari 和 Chrome 浏览器中能够完美地渲染.

支付宝下拉菜单JS代码

- - 网页素材大全_网页素材大全
支付宝下拉菜单JS代码是一款来自支付宝首页的JS下拉菜单特效代码. jQuery火箭图标返回顶部代码. JS淘宝网产品图片局部放大代码. 文字阴影插件shine.js.

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意,但易用性明显提高了许多. 利用这个,我们可以对某个元素进行旋传,缩放,倾斜与位移,并且区分元素类型,无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

揭秘Amazon反应速度超快的下拉菜单

- - 36氪 | 关注互联网创业
如果你以前觉得Amazon这家公司不太在用户体验上下功夫,这篇文章可能会改变你的看法. Amazon主页的左上角有一个商品分类浏览的下拉菜单. 当鼠标从菜单中的选项上滑过时,子菜单的显示速度是超快的. 这个显示速度基本是与鼠标移动同步的,但是绝大多数网站的下拉菜单在显示子菜单时会有一定的延迟,例如:.

综合下拉菜单:下一个网页设计趋势

- - 人人都是产品经理
就目前而言,“综合下拉菜单”这种设计模式还是相对少见的. 但是我确信,不出半年,它将会普及开来. 什么是的 “ 综合下拉菜单 ”. 大型网站的导航系统一直是一个难点. 当然你可以试图创建一个庞大的站点地图一样的导航菜单来链接到所有的页面,但是实际上,当页面越来越多而且不断增加的时候,这种做法将会变成一个不可能完成的任务.

CSS3 代码生成工具:Create CSS3

- - 我爱水煮鱼
CSS3 具有相当多的新增属性,而且包括阴影、动画、过渡等华丽的效果. 但是由于 CSS3 出来并没有很久,各个浏览器厂商还在开发中,有些属性仍然会带有实验性前缀. 而且类似制作动画、渐变的 CSS3 代码也相当复杂,一旦写错就会导致出现问题. 为此,有人开发了一个生成 CSS3 代码的工具 Create CSS3.

CSS3 文字渐变

- slackware - 前端观察
之前,我们有发表过CSS文字渐变效果,但是其实那并不是纯粹的基于CSS的渐变,它需要一张半透明渐变的png图片. 今天我们将介绍两种使用CSS3实现实现文字的方法. 嗯,只有webkit浏览器支持,请暂时无视其它浏览器. 在《CSS的未来:一些试验性CSS属性》中,我们提到了这个属性,相对于Firefox只能用svg做mask,webkit则灵活很多,图片和css3渐变均可.

用css3写个logo

- 丸子 - 崔凯,前端开发
演示地址:http://uicss.cn/css3/maxthon-logo.html. 先画一个外框 width: 240px; height: 240px;border-radius: 120px;. 填充背景色background:#b1e4ff;. 描边border:2px solid #789cb6;.

CSS3 pointer-events介绍

- Pstrey - 前端观察
其实早知道这个属性,但是一直没有去研究过. 今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下. 嗯,其实这是个比较简单的CSS3属性. 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作.

实现 Amazon 超快反应速度下拉菜单的 jQuery 插件

- - 博客园_梦想天空
jQuery 菜单插件,用于实现前几天网上流传很广的 . Amazon 主页的左上角超快反应速度下拉菜单. 当鼠标从菜单中的选项上滑过时,子菜单的显示速度是超快的. 使用 Toolbar.js 实现超酷的 Tooltip 风格工具栏. Textillate.js – 实现 CSS3 文本动画的简单插件.