CSS 横向菜单的制作

html代码

利用CSS的浮动属性,可以很容易的制作网上常见的横向菜单。

打开我们的小例子index.html,我们将利用CSS的浮动属性把导航菜单做成横向菜单。导航部分的htnl代码如下:

<div id="header">
  <h1 class="logo"><a href="index.html" title="首页"><img src="images/logo.gif" alt="首页" /></a></h1>
  <div id="menu"><!--nav start-->
    <h2><a href="index.html">首页</a></h2>
    <h2><a href="blog.html">博客</a></h2>
    <h2><a href="guestbook.html">留言板</a></h2>
  </div><!--nav end-->
</div><!--header end-->

可以看出,首先是一个 id="header" 的div,包含了网站的logo图标和 id="menu" 网站菜单div。<h1>标签标出了网站首页,多个<h2>标签列出了网站的菜单。

如下图所示,没有定义CSS,就是普通的由上至下文档流方式:

菜单文档流示意图

注意我们在《改进的小例子-5》中已经做了全局基本设定,所以上图显示的是设定后的效果。

定义header及logo

如果您只是想了解横向菜单的制作,这一步可以略过。教程里有这一步,是为了同时完善整个例子的header标签。

定义header及logo:

/*header*/
#header{
    width: 100%;
    height: 70px;
    background: url(../images/header_bg.gif) repeat-x bottom;
    float: left;
}
.logo{
    width:310px;
    height:60px;
    margin: 5px 0 0 10px;
    float: left;
}

语法分析

  1. 首先定义header的宽度及高度,为了增加层次感,还给header标签设定了背景图案
  2. 定义了.logo,用于定义网站logo图片的位置

效果如下所示:

菜单效果示意图

从图上可以看出,由于浮动的效果,menu这个div已经包含在header内了而不是普通的文档流布局。

定义menu

/*munu*/
#menu{
    width: 500px;
    height: 38px;
    margin: 16px auto 0 20px;
    float: right;
}
#menu h2{
    width: 100px;
    text-align: center;
    float: left;
}

语法分析

  1. 首先定义menu的宽度及高度,并且向右浮动
  2. 定义了每一个h2标签的宽度,文字居中,然后关键的使用float属性让3个h2标签横向排列

效果如下所示:

菜单效果示意图

从图上可以看出,已经基本达到了横向菜单的效果,下面就对菜单做进一步装饰。

定义<a>标签

#menu a{
    width: 99px;
    line-height: 24px;
    font-weight: normal;
    color: #FFFFFF;
    background: #ff3300;
    display: block;
}
#menu a:hover{
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
    background: #800000;
}

语法分析

  1. 首先定义<a>标签的效果,定义宽度,选择合适的行高,字体颜色,背景色等
  2. 定义<a>标签关键的一步是display: block属性设置,它让<a>标签以块级元素显示,这样定义的宽度才有效
  3. 下面定义了一个伪类,显示鼠标放上去的效果(下图紫色为鼠标放上去菜单效果)
  4. 可以利用背景图片代替背景色以制作出更炫的效果

效果如下所示:

菜单效果最终示意图

至此,已经完成了横向菜单的制作,您可以发挥自己的想象,制作出更漂亮的菜单效果来。有的网站不是用h2标签而以li标签列出菜单列表,其制作原理是一样的。

评论于2016-12-18日起不再显示。

5idev.com(我爱开发网) — 提供最好的 XHTML教程DIV+CSS教程JavaScript教程PHP教程ThinkPHP教程