基于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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 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
php的计数器程序
2006/10/09 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
javascript天然的迭代器
2010/10/29 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
React中的render何时执行过程
2018/04/13 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
Python中apply函数的用法实例教程
2014/07/31 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
深入理解redis中multi与pipeline
2021/06/02 Redis
volatile保证可见性及重排序方法
2022/08/05 Java/Android