基于css3仿造window7的开始菜单


Posted in HTML / CSS onJune 17, 2010

 基于css3仿造window7的开始菜单

相当逼真,css3果然强悍。
友情提示:请勿在IE下浏览。
来看下原作者的设计草图:
基于css3仿造window7的开始菜单
简明创建过程
第一步 :创建如下菜单结构

复制代码
代码如下:

<div id="startmenu">
<ul id="programs">
<li><a href="#"><img src="firefox-32.png" alt="" />Mozilla Firefoxa></li>
<li><a href="#"><img src="chrome.png" alt="" />Google Chromea></li>
<li><a href="#"><img src="safari.png" alt="" />Safaria></li>
<li><a href="#"><img src="opera.png" alt="" />Operaa></li>
<li><a href="#"><img src="ie.png" alt="" />Internet Explorera></li>
<li><a href="#"><img src="rss_32.png" alt="" />RSS Feedsa></li>
<li><a href="#"><img src="twitter_32.png" alt="" />Twittera></li>
<li><a href="#"><img src="delicious_32.png" alt="" />Deliciousa></li>
<ul>
<ul id="links">
<li class="icon"><img src="folder.png" alt="" /></li>
<li><a href="#"><span>Documentsspan>a></li>
<li><a href="#"><span>Picturesspan>a></li>
<li><a href="#"><span>Musicspan>a></li>
<li><a href="#"><span>Computerspan>a></li>
<li><a href="#"><span>Networkspan>a></li>
<li><a href="#"><span>Connect tospan>a></li>
<ul>
div>

win7的开始菜单有二个部分,左侧程序菜单,右侧系统菜单。

第二步:菜单容器css

复制代码
代码如下:

#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)); }

有几个关注的点,可以留意下:

-moz-border-radius:5px;-webkit-border-radius:5px;圆角效果,这是css3中应用最广的
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;阴影效果
background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));渐变背景
第三步:菜单左侧部分的css

复制代码
代码如下:

#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;}

这里值得留意的是鼠标经过菜单项的效果设置,也就是#programs a:hover里的样式,这是难点,也是css3的强大之处,依旧是圆角、阴影、渐变背景。

第四步:菜单右侧的CSS部分

复制代码
代码如下:

#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中非常灵活,下次有机会,发篇css3渐变背景的详细教程。
英文原文:http://www.jankoatwarpspeed.com/post/2010/04/06/windows-7-start-menu-css3.aspx
代码打包下载(请不要在IE下测试)
HTML / CSS 相关文章推荐
css3的transform中scale缩放详解
Dec 08 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
Aug 18 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 #HTML / CSS
CSS3 开发工具收集
Apr 17 #HTML / CSS
收集的7个CSS3代码生成工具
Apr 17 #HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 #HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 #HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 #HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 #HTML / CSS
You might like
zf框架的数据库追踪器使用示例
2014/03/13 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Python内置异常类型全面汇总
2020/05/28 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
工厂保洁员岗位职责
2013/12/04 职场文书
仓库门卫岗位职责
2013/12/22 职场文书
旷课检讨书大全
2014/01/21 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
委托证明模板
2014/09/16 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Python 文字识别
2022/05/11 Python