首页 > 代码库 > 12.2 Tab菜单

12.2 Tab菜单

2024-07-08 20:56:34   224人阅读

在介绍制作”隐藏/显示”方式的不刷新Tab面板之前，先来制作一个比较简单的Tab菜单效果，也就是先从简单的方式引入，为后面的案例做准备。本案例介绍的方法是将每个Tab页作为一个独立的网页文件来实现的。

这个Tab菜单的制作方法与前面介绍的菜单制作方法类似，不同之处在于需要设置一些特殊的CSS效果来实现“Tab”的样式。菜单本身仍然是项目列表的扩展，本例的最终效果如图1所示。本实例的文件位于网页学习网CSS教程资源中“第12章\01\home.htm”。

图1 Tab菜单
图1 Tab菜单

一、搭建HTML结构

首先跟所有的菜单一样建立相应的项目列表，所不同的是因为有多个页面，所以需要给每个项目都定义一个CSS类型，并为<body>标记分配各自的id，代码如下所示。lodidance.com

折叠XML/HTML 代码复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <title>Tab菜单</title>  
  4. <link href="tab.css" type="text/css" rel="stylesheet">  
  5. </head>  
  6. <body id="home">  
  7. <ul id="tabnav">  
  8.     <li class="home"><a href="home.htm">Home</a></li>  
  9.     <li class="dev"><a href="dev.htm">Web Dev</a></li>  
  10.     <li class="design"><a href="design.htm">Web Design</a></li>  
  11.     <li class="map"><a href="map.htm">Map</a></li>  
  12. </ul>  
  13. <div id="content">  
  14.     <ul id="list">  
  15.         <li>1. There are some good news.</li>  
  16.         <li>2. Not only good news.</li>  
  17.         <li>3. The text here are examples.</li>    
  18.         <li>4. Not only good news.</li>  
  19.         <li>5. The text here are examples</li>  
  20.     </ul>  
  21. </div>  
  22. </body>  
  23. </html>  

除了每个页面的具体内容，即“<div id="content">””中包含的部分以外，所有页面的整体框架都是完全相同的。每个页面都采用<link>语句调用相同的CSS外部文件，而页面的具体内容所采用的CSS．则放在页面内用<style>标记控制，代码如下所示。

折叠XML/HTML 代码复制内容到剪贴板
  1. <link href="tab.css" type="text/css" rel="stylesheet">

二、设置整体的样式

在外部的tab.css文件中定义各个CSS属性。首先给正文的内容“#content”添加蓝色的边框，但是只添加左侧、右侧和下端，空出上端。lodidance.com

折叠CSS 代码复制内容到剪贴板
  1. body{   
  2.     margin:10px;   
  3. }   
  4. #content{                               /* 具体内容 */  
  5.     border-left:1px solid #11a3ff;      /* 左边框 */  
  6.     border-right:1px solid #11a3ff;     /* 右边框 */  
  7.     border-bottom:1px solid #11a3ff;    /* 下边框 */  
  8.     padding:5px;   
  9.     font-size:12px;   
  10. }

三、设置Tab的样式

现在设置<ul>标记的CSS属性。除了将项目符号隐藏外，还要为其添加下边框，用来当作正文内容的上边框，代码如下所示。这样在<ul>标记中设置的边框便可以被稍后设置的<li>标记中的边框所覆盖，从而实现Tab的效果。

折叠CSS 代码复制内容到剪贴板
  1. ul#tabnav{   
  2.     list-style-type:none;   
  3.     margin:0px;   
  4.     padding-left:0px;                   /* 左侧无空隙 */  
  5.     padding-bottom:23px;   
  6.     border-bottom:1px solid #11a3ff;    /* 菜单的下边框 */  
  7.     font:bold 12px verdana, arial;   
  8. }

接着设置<li>标记的样式，将所有的列表项水平排列，设置相应的背景颜色和边框等，并通过margin属性适当地调整其位置，代码如下所示。可以看到Tab菜单已经初现雏形。

折叠CSS 代码复制内容到剪贴板
  1. ul#tabnav li{   
  2.     float:left;   
  3.     height:22px;   
  4.     background-color:#a3dbff;   
  5.     margin:0px 3px 0px 0px;    
  6.     border:1px solid #11a3ff;   
  7. }

设置所有超链接的3个伪类别。同样将<a>设置为块元素，并配合页面的整体色调和Tab菜单的大小等，代码如下所示。

折叠CSS 代码复制内容到剪贴板
  1. ul#tabnav a:link, ul#tabnav a:visited{   
  2.     display:block;                      /* 块元素 */  
  3.     color:#006eb3;   
  4.     text-decoration:none;   
  5.     padding:5px 10px 3px 10px;   
  6. }   
  7. ul#tabnav a:hover{   
  8.     background-color:#006eb3;   
  9.     color:#FFFFFF;   
  10. }

四、设置当前页的Tab样式

由于为每个页面的<body>标记都添加了惟一的id，因此可以设置当前页面的菜单项，如home.htm的“Home”菜单等，代码如下所示。关键在于给当前页面的菜单项添加白色的下边框，从而覆盖了<uI>标记中设置的蓝色下边框，实现了Tab菜单的效果。

折叠CSS 代码复制内容到剪贴板
  1. body#home li.home, body#dev li.dev, /* 当前页面的菜单项 */  
  2. body#design li.design, body#map li.map{   
  3.     border-bottom:1px solid #FFFFFF;    /* 白色下边框，覆盖<ul>中的蓝色下边框 */  
  4.     color:#000000;   
  5.     background-color:#FFFFFF;   
  6. }

现在已经完成了Tab菜单的核心部分，下面为当前页面的菜单项添加单独的超链接效果，以区别于其他页面，代码如下所示

折叠CSS 代码复制内容到剪贴板
  1. body#home li.home a:link, body#home li.home a:visited,  /* 当前页面的菜单项的超链接 */  
  2. body#dev li.dev a:link, body#dev li.dev a:visited,   
  3. body#design li.design a:link, body#design li.design a:visited,   
  4. body#map li.map a:link, body#map li.map a:visited{   
  5.     color:#000000;   
  6.     background-color:#FFFFFF;   
  7. }   
  8. body#home li.home a:hover, body#dev li.dev a:hover,   
  9. body#design li.design a:hover, body#map li.map a:hover{   
  10.     color:#006eb3;   
  11.     text-decoration:underline;   
  12. }

最后还可以为每个页面添加相应的内容。内容部分使用的CSS与公共的CSS样式文件分别存放，可以使用<style>嵌入到页面中，代码如下所示。lodidance.com

折叠XML/HTML 代码复制内容到剪贴板
  1. <link href="tab.css" type="text/css" rel="stylesheet">  
  2. <style type="text/css">  
  3.     /*各个页面单独的具体内容所使用的CSS*/   
  4. </style>

本案例重点介绍了如何制作Tab菜单，因此每个页面内部的样式就不再进行设置了，这样整个Tab菜单模块便制作完成了。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表

编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/936.html


联系
我们