用css制作动态水平按钮菜单

CSS 菜单 – 水平 – 简单的按钮

这篇文章将知道用XHTML 和 CSS 常见一个简单的水平按钮菜单. 下面是最终效果:

Button 1
Button 2
Button 3

Code:

<ul id="Menu">
	<li><a href="">Button 1</a></li>

	<li><a href="">Button 2</a></li>
	<li><a href="">Button 3</a></li>
</ul>

Preview:

Button 1
Button 2
Button 3

2. 现在它看起来像一个列表清单，下一步我们要用CSS删除这些碍眼的属性. 下面是删除了列表项前的”项目符号”和添加了额外的空白间隔(默认 <ul> 的 margin-left 设置为 10px 和 padding 设置为 8px).

Code:

<style>
#Menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
</style>
							
<ul id="Menu">

	<li><a href="">Button 1</a></li>
	<li><a href="">Button 2</a></li>
	<li><a href="">Button 3</a></li>

</ul>

Preview:

Button 1
Button 2
Button 3

3. 现在让我们用 float 样式重新排列这个“清单列表”的菜单.这个取决于你的菜单怎么安排, 你可以自己设定 float于左边或着右边 .

Code:

<style>
#Menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#Menu li{
	float: left;
}
</style>
							

<ul id="Menu">
	<li><a href="">Button 1</a></li>
	<li><a href="">Button 2</a></li>
	<li><a href="">Button 3</a></li>

</ul>

Preview:

Button 1
Button 2
Button 3

4. In order to turn the links into buttons we need to set it’s display property to block. This will allow us to regulate its width and height. After which we can give it some styling. Note that the href property in the link must be set for this to work.

Code:

<style>
#Menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#Menu li{
	float: left;
}

#Menu li a {
	background: #DDD;
	border: 0;
	color: #000;
	display: block;
	font-size: 11px;
	height: 24px;
	width: 90px;
}
</style>
							

<ul id="Menu">
	<li><a href="">Button 1</a></li>
	<li><a href="">Button 2</a></li>
	<li><a href="">Button 3</a></li>

</ul>

Preview:

Button 1
Button 2
Button 3

5. Align the text vertically using the line-height style, and horizontally using the text-align style.

Code:

<style>
#Menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#Menu li{
	float: left;
}

#Menu li a {
	background: #DDD;
	border: 0;
	color: #000;
	display: block;
	font-size: 11px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	width: 90px;
}
</style>
							

<ul id="Menu">
	<li><a href="">Button 1</a></li>
	<li><a href="">Button 2</a></li>
	<li><a href="">Button 3</a></li>

</ul>

Preview:

Button 1
Button 2
Button 3

6. Now we can create some more styling on the button by giving the list elements a border and a background color and then setting a 1px margin on the buttons.

Code:

<style>
#Menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#Menu li{
	background: #FFF;
	border: 1px solid #999;
	float: left;
}

#Menu li a {
	background: #DDD;
	border: 0;
	color: #000;
	display: block;
	font-size: 11px;
	height: 24px;
	line-height: 24px;
	margin: 1px;
	text-align: center;
	width: 90px;
}
</style>
							

<ul id="Menu">
	<li><a href="">Button 1</a></li>
	<li><a href="">Button 2</a></li>
	<li><a href="">Button 3</a></li>

</ul>

Preview:

Button 1
Button 2
Button 3

7. Now we can apply the hover style on the button to change the way they look when you move your mouse over them.

Code:

<style>
#Menu {
	list-style: none;
	margin: 0;
	padding: 0;
}


#Menu li{
	background: #FFF;
	border: 1px solid #999;
	float: left;
}

#Menu li a {
	background: #DDD;
	border: 0;
	color: #000;
	display: block;
	font-size: 11px;
	height: 24px;
	line-height: 24px;
	margin: 1px;
	text-align: center;
	width: 90px;
}

#Menu li a:hover {
	background: #222;
	color: #CC9900;
}

</style>
							
<ul id="Menu">
	<li><a href="">Button 1</a></li>
	<li><a href="">Button 2</a></li>

	<li><a href="">Button 3</a></li>
</ul>

Preview:

Button 1
Button 2
Button 3

8. To get rid of the extra borders in the buttons in the middle, we will need to give all buttons an id and then remove the borders per id.

Code:

<style>
#Menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

#Menu li{
	background: #FFF;
	border: 1px solid #999;
	float: left;
}

#Menu li a {
	background: #DDD;
	border: 0;
	color: #000;
	display: block;
	font-size: 11px;
	height: 24px;
	line-height: 24px;
	margin: 1px;
	text-align: center;
	width: 90px;
}

#Menu li a:hover {
	background: #222;
	color: #CC9900;
}

#Menu li#Button2,
#Menu li#Button3 {
	border-left: 0;
}

</style>
							
<ul id="Menu">

	<li id="Button1"><a href="">Button 1</a></li>
	<li id="Button2"><a href="">Button 2</a></li>
	<li id="Button3"><a href="">Button 3</a></li>

</ul>

Preview:

Button 1
Button 2
Button 3

9. And you’re done.

Button 1
Button 2
Button 3

原帖地址:http://www.globexdesigns.com/resources/css/menu01.php

CSS 菜单 – 水平 – 简单的按钮

这篇文章将知道用XHTML 和 CSS 常见一个简单的水平按钮菜单. 下面是最终效果:

相关文章：

你感兴趣的文章：

标签云：