您的位置：首页 > Web前端 > CSS

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

2008-07-28 17:23 501 查看

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

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

.MainMenu ul {
height: 28px;
list-style: none;
margin: 0 auto;
padding: 0;
width: 280px;
}

.MainMenu ul li {
list-style: none;
background: #FFF;
border: 1px solid #999;
float: left;
}

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

.MainMenu ul li#Button2,.MainMenu li#Button3 {
border-left: 0;
}

.MainMenu ul li a:hover {
background: #222;
color: #CC9900;
}

Button 1

Button 2

Button 3

1.记住在所有的利用 CSS/XHTML设计的代码中我们都要尽量保持代码的最少化.首先让我们建立我们需要的最基本的html代码, 注意，这里要符合Web 2.0 的标准,所有的菜单创建都要用<ul>标签：

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:

#Menu02 ul li {
list-style: none;
margin: 0;
padding: 0;
}

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:

#Menu03 ul {
list-style: none;
margin: 0;
padding: 0;
}

#Menu03 ul li {
list-style: none;
float: left;
}

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:

#Menu04 ul {
list-style: none;
margin: 0;
padding: 0;
}

#Menu04 ul li {
list-style: none;
float: left;
}

#Menu04 ul li a {
background: #DDD;
border: 0;
color: #000;
display: block;
font-size: 11px;
height: 24px;
width: 90px;
}

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:

#Menu05 ul {
list-style: none;
margin: 0;
padding: 0;
}

#Menu05 ul li {
list-style: none;
float: left;
}

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

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:

#Menu06 ul {
list-style: none;
margin: 0;
padding: 0;
}

#Menu06 ul li {
list-style: none;
background: #FFF;
border: 1px solid #999;
float: left;
}

#Menu06 ul 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;
}

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:

#Menu07 ul {
list-style: none;
margin: 0;
padding: 0;
}

#Menu07 ul li {
list-style: none;
background: #FFF;
border: 1px solid #999;
float: left;
}

#Menu07 ul 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;
}

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

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:

#Menu08 li {
list-style: none;
background: #FFF;
border: 1px solid #999;
float: left;
}

#Menu08 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;
}

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

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

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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航