在网上看到很多做的非常漂亮的menu,感觉非常不错,今天就在这儿学做一个menu。
其效果如图1所示:(源代码在最下方,可以下载)
图 1
并且,该菜单仅仅用到了html和CSS,以下是其源码:
html源码:(很简单,不解释)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">WEb design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
html的代码如上所示。
CSS的代码如下所示:
@charset "utf-8"; /* CSS Document */ /* Main */ #menu{ /*通过ID,寻找ID为menu的DOM*/ width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #111; background: -moz-linear-gradient(#444, #111); /*【注释】1:线性渐变在Mozilla下的应用(即,采用Mozilla内核的浏览器,例如:Firefox、Flock等浏览器),本句话是指:采用线性渐变方式,起点颜色是#444,终点颜色是#111*/ /*【注释】2:线性渐变在Mozilla下的语法为: --moz-linear-gradient([<point>||<angle>,]?<stop>,<stop> [,<stop>]*) 共有三个参数:第一个代表线性渐变的方向,top是从上到下,left为从左至右,如果定义为left top,则代表从左上角至右下角。 第二个、第三个参数分别代表起点颜色和终点颜色。也可以在他们之间插入更多的颜色,表示多种颜色的渐变。 */ background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); /*【注释】和上句话相同,只不过是指:线性渐变在Webkit下的应用(采用webkit内核的浏览器,例如safari、google浏览器)*/ /*【注释】:不过google在最新版本28.0.1469.0中已经将Webkit内核替换为Blink内科,不过Blink内核也是基于webkit内核引擎开发所得 时间:2013年4月15日19:09:11 */ /*【注释】:CSS说明: -webkit-gradient(<type>,<point> [,<radius>]?,<point> [,<radius>]? [,<stop>]*) -webkit-gradient是webkit引擎对渐变实现的参数,是老式语法书写规则,最新式的语法书写规则是下面的-webkit-linear-gradient。 其共有5个参数: 第一个参数:代表类型,可以是线性渐变(linear)或径向渐变(radial) 第二个参数、第三个参数:是一对值,非别代表渐变起点和渐变终点。可以用坐标形式标识,也可以用关键值表示。 第四、五个参数:分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为终点。第二个表示该点的颜色。 */ background: -webkit-linear-gradient(#444, #111); /*【注释】:这个不进行详细的介绍,和-moz-linear-gradient一样 语法形式: -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) */ background: -o-linear-gradient(#444, #111); /*【注释】:不解释,同上。只不过是在Opera引擎下的应用。 语法形式: -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]) */ background: -ms-linear-gradient(#444, #111); /*【注释】同上,是针对微软的IE9及以上浏览器*/ background: linear-gradient(#444, #111); /*【注释】同上,这是无前缀的渐变,IE10也支持无前缀的渐变 参考文献:msdn上的文章: 题名:IE10 中的无前缀 CSS3 渐变 网址:http://blogs.msdn.com/b/ie_cn/archive/2012/06/27/css-gradients-in-ie10-release-preview.aspx */ -moz-border-radius: 50px; border-radius: 50px; /*【注释】:上面两个是将正方形的四个直角进行切割,变得圆滑*/ -moz-box-shadow: 0 2px 1px #9c9c9c; -webkit-box-shadow: 0 2px 1px #9c9c9c; box-shadow: 0 2px 1px #9c9c9c; /*【注释】:上面的三个实现了对象实现图层阴影效果 具体的语法为: box-shadow:inset x-offset y-offset blur-radius spread-radius color 其中:第一个参数(inset):此处可有可无,即inset可以删掉。没有inset是指,投影在对象的外部,也是我们常见的,为默认值;若为inset,则,投影在对象的内部。 第二个参数:水平方向的偏移量。其值可正可负,若为正,代表投影在对象右侧;为负,在左侧; 第三个参数:垂直方向的偏移量。其值可正可负,若为正,代表投影在对象底侧;为负,在顶侧; 第四个参数:阴影模糊半径。其值只能为>=0,值越大,阴影越模糊。 第五个参数:阴影扩展半径。其值可正可负,值越大,阴影越大 第六个参数:阴影颜色。如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。 各个浏览器对box-shadow的支持度: IE9及以上、google浏览器2.0及以上、firefox3.5及以上,opera10.6及以上、safari4 */ } #menu li{ float: left; padding: 0 0 10px 0; position: relative; } #menu a{ float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; /*【注释】:呵呵,先说一个题外话:transformers是"变形金刚"电影的英文名称 言归正传: text-transform -- 定义文本的大小写状态,此属性对中文无意义 其取值有5种: capitalize: 首字母大写 uppercase: 大写 lowercase: 小写 none: 正常无变化 inherit: 继承 */ font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a{ color: #fafafa; } *html #menu li a:hover{ /* IE6 */ color: #fafafa; } #menu li:hover > ul{ display: block; } /* Sub-menu */ #menu ul{ list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 5px; border-radius: 5px; } #menu ul li{ float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; } #menu ul li:last-child{ -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a{ padding: 10px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } *html #menu ul a{ /* IE6 */ height: 10px; width: 150px; } *:first-child+html #menu ul a{ /* IE7 */ height: 10px; width: 150px; } #menu ul a:hover{ background: #0186ba; background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child a{ -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #menu ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } #menu ul li:first-child a:hover:after{ border-bottom-color: #04acec; } #menu ul li:last-child a{ -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Clear floated elements */ #menu:after{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html #menu { zoom: 1; } /* IE6 */ *:first-child+html #menu { zoom: 1; } /* IE7 */