WEB入门.九导航菜单

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

学习内容

水平导航菜单
垂直导航菜单
下拉式导航菜单

能力目标

制作tab标签导航菜单
制作带箭头的导航菜单
制作带信息提示的导航菜单
制作垂直下拉导航菜单
制作水平下拉导航菜单

本章简介

上一章节中讲解了 background 属性的用法，以及两种主流的背景特效——页面图片整合技术以及滑动门技术，设计师可以使用这两种技术制作出多种页面背景特效，如平滑投票、Tab 导航菜单等。

在Web 应用中，除了布局设计外，页面导航栏的设计也是站点设计中的一个重要组成部分，网站中的页面导航栏用于使用户在浏览时有明确的方向，可以快速地链接到相关内容页面，从而节省用户查找页面的时间，提高访问效率。所以，页面设计时需要选择合适的导航菜单，从而使页面的视觉效果更加清晰，操作更加方便、快捷。页面导航的形式主要包括水平导航菜单、垂直导航菜单以及下拉式导航菜单等，本章内容即将详细地讲解上述导航菜单的制作过程。

核心技能部分

5.1 水平导航菜单

门户网站中主导航菜单通常使用水平导航菜单，这是因为门户网站中的内容比较多，而且每个频道都有不同的样式区别。因此在页面的顶部设计一个风格而且不占用过多空间的水平导航菜单是最理想的选择。水平导航菜单分为横向文本导航和tab导航两种风格。

5.1.1 横向文本导航

横向文本导航适用于页面频道丰富且风格多样的大型网站，如网易、腾讯、MSN等，图 5.1.1即为网易首页。

横向文本导航实现思路：

使用 div搭建导航框架。网易的导航菜单主要分为站标和内容两部分，站标区不覆盖其他文字，可直接使用 img标签插入网易站标。使用 ul和 li搭建内容部分，ul 中使用两个 li方法分行显示内容块，再使用若干超链接定义菜单。

实现步骤：

（1）使用 div和ul搭建导航菜单框架，代码如下：

<div class="globalMenu">
<div class="title">
    网站logo
</div>
<div class="content">
<div class="menu s1 stroke">
   <ul>
       <li>第一栏第一行</li>
       <li class="lineH">第一栏第二行</li>
   </ul>
</div>
<div class="menu s1 stroke">
   <ul>
       <li>第二栏第一行</li>
       <li class="lineH">第二栏第二行</li>
   </ul>
</div>
</div>
</div>
（2）          向结构中添加内容，代码片断如下：
<ul>
   <li>
    <ahref="#" class="tip">新闻</a>　
    <ahref="#">军事</a>
    <ahref="#">图片</a>
    <a href="#">评论</a>
   </li>
    <liclass="lineH">
    <ahref="#" class="tip">体育</a>　
    <ahref="#">篮球</a>
    <ahref="#">足球</a>
    <ahref="#">跳水</a>
   </li>
</ul>

（3）定义每个组成部分的样式规则。globalMenu为导航栏容器样式，采用 ul 和 li将其分隔两行；title 为网站 logo样式；content为导航内容样式。其样式代码如下

<style type="text/css">
body {margin-top:250px;font-size:12px; }
div,img,ul,ol{margin: 0; padding: 0; border: 0; }
/* 超链接样式 */
a:link {color: #1f3a87;text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
/* 导航容器*/
.globalMenu{
    margin:0auto;
    width:550px;
    height:45px;
    background:#fff;
    border:1pxsolid #CBCBCB;
}
/*导航Logo部分*/
.globalMenu .title{
    float:left;
    width:140px;
    padding:6px0 0;
    text-align:center;
}
/*导航内容部分*/
.globalMenu .content{
    float:left;
    width:400px;
    margin:5px0 0;
}
/*定义菜单栏样式*/
.globalMenu .content .menu{
    float:left;
    overflow:hidden;
    height:36px;
    width:150px;
    border-right:1pxsolid #ccc;/*定义菜单栏目的右边框*/
}
.globalMenu .content .menu li{
    text-align:left;
    padding:2px0 0 10px;
    list-style-type:none;
}
.globalMenu .content .lineH{
    line-height:22px;
}
.globalMenu .content .tip{
    font-weight:bold;
}
</style>

5.1.1 Tab导航

导航菜单文本内容较少时，建议使用tab导航。这样可以强化页面视觉效果，拍拍购物网站即采用该导航形式，如图 5.1.3所示。

实现思路：

使用 div搭建菜单容器，采用无序列表ul 和 li标签实现菜单结构，a标签定义内容；使用float属性定义 li标签为浮动元素，display属性结合width、height定义超链接大小。

实现步骤：

（1）定义导航菜单结构，代码如下：

<body>
<div id="navlist">
<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">商城</a></li>
    <li><a href="#">全球购</a></li>
    <li><a href="#">拍卖</a></li>
    <li><a href="#">礼物</a></li>
    <li><a href="#">促销</a></li>
</ul>
</div>
</body>

（2）定义无序列表样式规则，代码如下：

<style type="text/css">
#navlist ul{
    list-style-type:none;
}
#navlist li{
    float: left;
}
#navlist li a{
    color: #000000;
    text-decoration: none;
    display: block;
    padding-top: 4px;
    width: 97px;
    height: 22px;
    text-align: center;
    background-color: #ECECEC;
    margin-left: 2px;
}
#navlist li a:hover{
    background-color: #BBBBBB;
    color: #FFFFFF;
}
</style>

5.1 垂直导航菜单

垂直导航是网站导航的另一种重要形式，它是指将导航菜单安放于页面左右两侧并进行自上而下排列的导航形式。一些大型购物网站如当当网、淘宝网等采用该导航形式进行商品分类，如图5.1.5所示。

垂直导航菜单形式多样，以下列举两种常见的垂直导航：箭头导航和提示信息导航。

5.1.1 箭头导航

箭头导航的主要优点在于导航的直观性，如图 5.1.6、图 5.1.7所示。

实现思路：

在 CSS 中，设置 span标签的宽度和高度为 0；加粗边框，设置上下边框的颜色为白色，左右边框的颜色为深色，实现代码如下。

5.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>箭头效果</title>
<style type="text/css">
span{
    display:block;/*设置为块级元素*/
    position:absolute;/*使用绝对定位*/
    height:0;
    width:0;
    border:solid50px #fff;/*设置默认的边框样式*/
    overflow:hidden;/*隐藏超出范围的内容*/
    border-left-color:#f00;/*左边框的颜色*/
    border-right-color:#f00;/*右边框的颜色*/
}
</style>
</head>
<body>
<span></span>
</body>
</html>
箭头导航由若干超链接构成，每个超链接文本前后添加绝对定位的 span标签，以设置左右箭头span标签在链接状态下隐藏、悬停状态下显示。
实现步骤：
（1）       制作导航菜单结构，代码如下：
<body>
<div id="menu">
    <a href="#"><spanclass="left"></span>首页<span class="right"></span></a>
    <a href="#"><spanclass="left"></span>相册<span class="right"></span></a>
    <ahref="#"><span class="left"></span>日志<spanclass="right"></span></a>
    <a href="#"><spanclass="left"></span>留言<span class="right"></span></a>
    <a href="#"><spanclass="left"></span>朋友<span class="right"></span></a>
</div>
</body>
（2）       编写span和a标签样式规则，代码如下：
<style type="text/css">
#menu {
    font-family:Arial;
    font-size:16px;
    width:140px;
    margin:0 auto;
    border: 3px double #ccc;
}
#menu a {
    text-decoration:none;/*文字无下划线*/
    text-align:center;/*文字水平居中对齐*/
    display:block;/*设置为块级元素*/
    padding:4px;/*内边距*/
    background-color:#fff;
    border:1px solid  #fff;
    position:relative;/*使用相对定位*/
    width:130px;
}
#menu a span {
    display:none;
}
#menu a:hover span {
    display:block; /*设置为块级元素*/
    position:absolute;/*使用绝对定位*/
    height:0;/*高度为0*/
    width:0; /*宽度为0*/
    border:solid 8px #fff;/*设置默认的边框样式*/
    top:4px;/*竖直方向的定位*/
    overflow:hidden;
}
#menu a:hover span.left {
    border-left-color:#00f;
    left:8px;
}
#menu a:hover span.right {
    border-right-color:#00f;
    right:8px;
}
</style>

上述代码中，链接要求设置为相对定位，为绝对定位的span标签提供定位参考，效果如图 5.1.8所示；否则，span标签就近寻找包含块为基准进行定位，如本例中超链接没有设置为相对定位，span标签将以body为基准定位

带提示信息导航

#menu a:hover span.intro {

font-size:12px;

display:block;

position:absolute; /*绝对定位*/

left:150px;

top:0px;

padding:5px;

width:100px;

height:auto;

background-color:#eee;

color:#000;

border:1px dashed #234;

}

注意：提示框不能挤压其他元素，制作方式应与箭头类似；采用绝对定位，并保证脱离标准文档。

5.1 下拉式导航菜单

当页面版式比较紧凑时，页面设计适合使用下拉式导航菜单。该菜单形式充分利用现有空间并分类显示页面内容，如娃哈哈企业网等采用该菜单形式，如图 5.1.11所示。

5.1.1 垂直列表下拉导航

垂直列表下拉导航如图 5.1.12所示。ily:"Times New Roman";mso-hansi-font-family:"Times New Roman";mso-bidi-font-family:"Times New Roman";mso-font-kerning:1.0pt;mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA'>所示。

实现思路：

垂直列表下拉导航采用无序列表嵌套定义的方式实现，嵌套ul作为二级子菜单；一级菜单中定义li为浮动元素且向左浮动，并保证在一条水平线上。

实现步骤：

（1）定义垂直列表下拉导航结构，代码如下：

<div class="menu">
   <ul>
       <li><a href="#" >首页</a></li>
       <li><a href="#" >新闻</a>
           <ul>
               <li><a href="#">国际新闻</a></li>
               <li><a href="#">国内新闻</a></li>
               <li><a href="#">体育新闻</a></li>
          </ul>
     </li>
       <li><a href="#" id="current">财经</a>
           <ul>
               <li><a href="#">股票市场</a></li>
                <li><a href="#">证券行情</a></li>
                <li><a href="#">保险代理</a></li>
           </ul>
     </li>
       <li><a href="#">联系我们</a></li>
   </ul>
</div>
（2）       定义一级菜单样式规则，代码如下：
.menu{
    border:none;
    font-family:verdana,geneva,arial,helvetica,sans-serif;
    font-size:14px;
    font-weight:bold;
    color:8e8e8e;
}
.menu ul{
    background:url(menu-bg.gif)top left repeat-x;
    height:43px;
    list-style:none;
}
.menu li{
    float:left;
}
.menu li a{
    color:#666666;
    display:block;
    font-weight:bold;
    line-height:43px;
    padding:0px25px;
    text-align:center;
    text-decoration:none;
}
.menu li a:hover{
    color:#000000;
}
（3）       定义二级菜单样式规则，代码如下：
.menu li ul{
    background:#e0e0e0;
    border-left:2pxsolid #0079b2;
    border-right:2pxsolid #0079b2;
    border-bottom:2pxsolid #0079b2;
    display:none;
    height:auto;
    position:absolute;
    width:130px;
    z-index:200;
}
.menu li:hover ul{
    display:block;
}
.menu li li {
    display:block;
    width:130px;
}
.menu li ul a{
    display:block;
    font-size:12px;
    text-align:left;
}
.menu li ul a:hover{
    background:#949494;
    color:#000000;
}
当鼠标悬停于一级菜单时，使用display：block；显示嵌套的无序列表。
（4）       设置当前选中菜单样式，代码如下：
.menu #current{
    background:url(current-bg.gif)top left repeat-x;
    color:#ffffff;
}

5.1.1 水平列表下拉导航

水平列表下拉导航

实现思路：

水平列表下拉导航在垂直列表导航菜单基础上实现，使用float:left；设置嵌套 li 为浮动元素，并保证所有li元素水平显示。

实现步骤：

（1）水平列表下拉导航结构与垂直列表下拉导航菜单的结构相同。

（2）定义嵌套ul 的样式规则，代码如下：

.menu li ul{
    background:#e0e0e0;
    border-left:2pxsolid #0079b2;
    border-right:2pxsolid #0079b2;
    border-bottom:2pxsolid #0079b2;
    display:none;
    height:auto;
    position:absolute;/*绝对定位*/
    width:225px;
    z-index:200;
}
.menu li:hover ul{
    display:block;/*块状显示*/
    width:auto;/*宽度自适应*}
.menu li ul li {
    float:left;
    border-left:1pxsolid white;
    line-height:1.5em;/*设置高度为1.5个字宽*/
}

定义嵌套ul 的样式规则时，需要设置ul为绝对定位，并脱离标准文档流，否则一级菜单宽度将被改变

本章总结

在这一章里制作2个垂直方向的导航菜单。需要读者特别注意的有几个CSS基础知识和技巧。

（1）相邻盒子的margin的垂直方向相遇的“塌陷”现象，水平方向则没有该现象。

（2）在一些列盒子排列之后，如何对头尾盒子进行单独的样式设置，可以为它们单独设置类别，或者是伪类，但需要注意浏览器对伪类的支持情况。

（3）通过粗边框的颜色设置可以产生出斜角效果，如果充分利用可以产生有趣的效果。

（4）为了防止鼠标指针经过时造成边框的跳动，可以在通常状态添加与背景色相同的边框。

（5）相对定位的含义是以自身原来所在的位置为基准进行偏移。

（6） “包含块”的定义方法，绝对定位是以包含块为基准进行偏移。

为了使某个盒子绝对定位，它的上一级元素可以设为相对定位，从而变成“包含块”。

任务实训部分

实训任务1：双竖线菜单

训练技能点

Ø 利用border-left：和border-right制作双竖线菜单

需求说明

实现思路

（1）每个菜单的左右两个边都有一条竖线，当鼠标指针划过时，竖线由灰色变为黑色。

（2）菜单文字变为红色。

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>双竖线菜单</title>
</head>
<style type="text/css">
    #menu
    {
      width:120px;
      background:#ccc;
      font-family:Arial;
      font-size:14px;
      padding:8px;
      margin:0 auto;
    }
    #menu a,#menu a:visited
    {
      display:block;
      background-color:#fff;
      padding:4px 8px;
      color:#000;
      text-decoration:none;
      margin:8px 0;
      border-left:8px solid #9ab;
      border-right:8px solid #9ab;
    }
    #menua#first,#menu a#last
    {
      margin:0px;
    }
    #menua:hover
    {
      color:#f00;
      border-left:8px solid #000;
      border-right:8px solid #000;
    }
</style>
<body>
<div id="menu">
       <a href="#"id="first"> Home </a>
       <a href="#"> Contact</a>
       <a href="#"> Web Dev</a>
       <a href="#"> WebDesign</a>
       <a href="#"id="last"> Map</a>
</div>
</body>
</html>

实训任务2：双斜角横线菜单

训练技能点

Ø 使用相对流动定位设置页面元素位置

Ø 使用background-position属性定位背景

Ø 使用background-repeat属性设置平铺效果

需求说明

双斜角横线菜单

实现思路

（1）与上一个案例不同之处在于，这里为了使菜单的文字之间有一定空白，并且使文字在菜单项中垂直居中，没有采用padding来实现。

关键代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>双斜角横线菜单</title>
</head>
<style type="text/css">
     #menu
     {
       width:9em;
       margin:0auto;
       font-family:Arial;
       font-size:14px;
       border:solid 1px #aaa;
     }
     #menu a,#menu a:visited
     {
       display:block;
       text-decoration:none;
       color:#000;
       line-height:1.4em;
       border:0.5em solid #fff;
     }
     #menu a:hover
     {
       color:#fff;
       background-color:#aaa;
       border-color:#ddd #aaa;
     }
</style>
<body>
<div id="menu">
    <ahref="#"> Home</a>
    <ahref="#"> Contact Us</a>
    <ahref="#"> Web Dev</a>
    <ahref="#"> Web Design</a>
    <ahref="#"> Map</a>
</div>
</body>
</html>

实训任务3：立体菜单

训练技能点

Ø 使用DIV+UL搭建垂直菜单框架

需求说明

立体菜单，效果如图��;mso-ascii-font-family:"Times New Roman";mso-hansi-font-family:"Times New Roman"'>使用background-position属性定位背景

Ø 使用background-repeat属性设置平铺效果

需求说明

双斜角横线菜单

实现思路

（1）使用DIV+CSS搭建页面框架。

（2）使用DIV+UL搭建导航菜单框架。

（3）使用<div style=”clear:both”></div>实现浮动清除。

关键代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=gb2312" />
<title>立体菜单</title>
</head>
<style type="text/css">
      #menu
      {
        font-family:Arial;
        font-size:14px;
      }
      #menu a,#menu a:visited
      {
        text-decoration:none;
        text-align:center;
        color:#fff;
        display:block;
        width:10em;
        padding:0.25em;
        margin:0.5em auto;
        background-color:#8ab;
        border:2px solid #fff;
        position:relative;
      }
      #menu a:hover
      {
        top:2px;
        left:2px;
        border-color:#345 #cde #def #678;
      }
</style>
<body>
    <divid="menu">
         <a href="#"> Home</a>
         <a href="#"> ContactUs</a>
         <a href="#"> Web Dev</a>
         <a href="#"> WebDesign</a>
         <ahref="#"> Map</a>
    </div>
</body>
</html>

实训任务4：制作淘宝商城二级菜单

需求说明

完成淘宝商城二级菜单/b>

Ø 使用background-repeat属性设置平铺效果

需求说明

双斜角横线菜单

提示：

（1）搭建二级菜单框架，代码如下：

  <ulclass="menu">
      <li>
          <strong>珠宝饰品</strong>
          <div class="subcontent" style="z-index:199; top:-20px;color:#C3C;">
              <ul>
                   <li><a href="#">品牌手表/卡西欧</a></li>
                   <li><a href="#">流行手表/时尚腕表</a></li>
                   <li><a href="#">男生手表</a></li>
                   <li><a href="#">女生手表</a></li>
                   <li><a href="#">珠宝钻石</a></li>
                   <li><a href="#">天然翡翠</a></li>
                   <li><a href="#">18K黄金/18k白金</a></li>
                   <li><a href="#">宝石/红宝石/蓝宝石</a></li>
                   <li><a href="#">铂金/钯金</a></li>
                   <li><a href="#">饰品/流行首饰/日韩货</a></li>
              </ul>
             <b style="top:25px;"></b>
          </div>
      </li>
      <li><strong>运动护卫</strong></li>
      <li><strong>手机数码</strong></li>
      <li><strong>家居生活</strong></li>
      <li><strong>家纺床品</strong></li>
      <li><strong>家电家具</strong></li>
      <li><strong>图书音像</strong></li>
      <li><strong>服饰鞋包</strong></li>
      <li><strong>丝质衣服</strong></li>
      <li><strong>绸缎衣服</strong></li>
       <li><strong>时尚经典</strong></li>
      <li><strong>黑色世界</strong></li>
      <li><strong>紫色蓝宝</strong></li>
</ul>

（2）定义subcontent的样式规则，参考代码如下：

/*二级菜单样式*/
.subcontent {
    font-size:12px;
    width:200px;
    display:none;
    position:absolute;/*绝对定位，是subcontent脱离标准文档流*/
    left:146px;
    top:-6px;
    background-color:#FFF  ;/*灰色*/
    border:2pxsolid #e27687;/*红色*/
    z-index:200;
}

（3）定义b标签的样式规则，覆盖subcontent的左边框，使subcontent产生箭头效果，代码如下：

/*覆盖subcontent的左边框 使subcentent产生箭头效果*/
.subcontent b{
    background:url(images/sc.png)no-repeat -620px -150px;
    display:block;
    height:17px;
    left:-7px;
    position:absolute;
    top:5px;
    width:18px;
}

（4）定义鼠标悬停样式，鼠标悬停时显示subcontent，代码如下：

#header #all-items .menu li:hover div{

display:block;

}