基于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进度条效果
Feb 22 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 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
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
Python实现简易Web爬虫详解
2018/01/03 Python
Python读写docx文件的方法
2018/05/08 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python JSON编解码方式原理详解
2020/01/20 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
财务主管自我鉴定
2014/01/17 职场文书
装修施工安全责任书
2014/07/24 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2015新员工工作总结范文
2015/10/15 职场文书