用 CSS3 制作的 Windows7 开始菜单

作者: 蒋老师 分类: 网站源码 发布时间: 2018-10-28 19:24

  这是我在旧博客中转过来的一篇文章,几年前看到了一位老外用纯 CSS3 做出来了 Windows7 开始菜单,非常喜欢,原准备要翻译一下,结果在网上一搜索,发现有人抢先翻译出来了,正好懒得动手了。这个翻译可能是炫意 HTML5 做的,刚才检查了一下,原作者的网站上已经没有这篇文章了,不知道是什么原因。不过也可以理解,这篇文章出现得很早,这么多年了,网站出现了一些问题也算正常。

  不管怎样,还是要向原作者和译者表示感谢。现在提供的这个,文章中的代码直接使用了原作者的,没有作任何处理,基本上是原汁原味的。下面是译文:

  我对使用少量 CSS3 代码来实现很多效果这一过程非常的着迷,很多 UI 元素都需要用图片来展示其漂亮的外观,但是你可能不知道,单纯的 CSS3 代码也是可以实现的。下面我就用纯 CSS3 来制作 Windows 7 开始菜单(额外需要几个小图标),从而来证明这个观点。

  如果我们分解这个 Windows 7 开始菜单,我们会得到 1 个 div,2 个 ul 列表,1 组链接以及一些 icon 小图标,我们可以一起来看看具体的效果。下面是简单的制作过程及部分代码:

#startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;
             -moz-border-radius:5px;-webkit-border-radius:5px; position:relative;
             box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
             background-color:#619bb9;
             background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
             background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%,#2e4b5a), to(#5cb0dc)); }

菜单容器(Container)

  这个容器命名为 startmenu ,里面包含了 2 个 ul 列表。同时用 3 种颜色实现线性渐变:顶部是浅蓝色,中间是深蓝色,底部是接近浅蓝色的其他颜色。接着用 rgba() 实现透明度,rgba() 有四个参数,前 3 个表示红、绿、蓝,第 4 个表示透明度,两条边线使用了 box-shadow 属性。

程序菜单(Programs Menu)

  这是一个白色背景的 ul 列表,两条边线用了 border 和 box-shadow 属性。程序链接包含了几个小图标以及程序名称,同时做了一个鼠标滑过渐变投影的效果。

#programs, #links {float:left; display:block; padding:0; list-style:none;}
#programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px;
            box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;
            -moz-border-radius:3px;-webkit-border-radius:3px;}
#programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px; 
              color:#4b4b4b; text-decoration:none; min-width:220px;}
#programs a:hover {border:solid 1px #7da2ce; 
             -moz-border-radius:3px; -webkit-border-radius:3px;
             box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
             background-color:#cfe3fd;
             background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
             background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}
#programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}

链接菜单(Link Menu)

  上面提到的链接菜单非常简单,但是这里我们可以做出更炫的鼠标滑过效果。每一个链接菜单都有3种颜色的水平渐变:左边和右边是深蓝色,中间用稍微淡一点的蓝色。现在,不像程序菜单中的链接那样,这个链接内部用来包含菜单的文字,同时 span 元素还拥有多种垂直线性渐变。

#links {margin:7px; margin-top:-30px;}
#links li.icon {text-align:center;}
#links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;
              color:#fff; text-decoration:none; min-width:120px;}
#links a:hover {border:solid 1px #000;
             -moz-border-radius:3px; -webkit-border-radius:3px;
             box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
             background-color:#658da0;
             background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));
             background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384)); 
             }
#links a span { padding:5px; display:block; }
#links a:hover span  { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));
            background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent), 
            color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }

  下面是效果截图,你也可以去看在线示例和下载源码。

  这个 CSS3 制作的 Windows 7 开始菜单例子可以在 Firefox 3.6+, Safari 和 Chrome 浏览器中运行,Opera 和 IE 中的效果就不行了,也许我可以继续优化一下,欢迎大家提出建议和意见。

  演示地址:http://www.xyhtml5.com/examples/css3-windows-7-menu/index.html

  源文件下载:https://pan.baidu.com/s/1xND82leTdxomv7zAeRGmdA 提取码: p7py

  英文原文:http://www.jankoatwarpspeed.com/post/2010/04/06/windows-7-start-menu-css3.aspx
  译文源地址:http://www.xyhtml5.com/css3-windows7-start-menu.html