基于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闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 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数组总结篇(一)
2008/09/30 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Django内容增加富文本功能的实例
2017/10/17 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python如何实现视频转代码视频
2019/06/17 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
《寓言两则》教学反思
2014/02/27 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
海上钢琴师观后感
2015/06/03 职场文书
公诉意见书范文
2015/06/05 职场文书
计算机教师工作总结
2015/08/13 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL