HTML与CSS3编写menu

南山忍者

浏览: 86086 次
性别:
来自: 北京

最近访客更多访客>>

zhouguangrui

loris_jand

hillsoul

guolang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

html CSS3 menu 菜单

在网上看到很多做的非常漂亮的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 */