12.2 Tab菜单


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

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


图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

12.2 Tab菜单,布布扣,bubuko.com

时间： 2024-11-13 06:03:16

12.2 Tab菜单的相关文章

12.1 Tab菜单与Tab面板简介

这里所说的高级网页组件是指一些网页上的比较复杂的用户界面,例如Tab面板.伸缩面板和折叠面板等组件. Tab风格的面板一直受到广大周站制作者的青昧.Tab面板有时被称为“选项卡”面板,使用鼠标点击各个Tab选项卡就可以在不同页之间切换. 随处可见各式各样的Tab菜单,网易网站首页上可以看到的Tab面板,网址是http://www.163.com. 微软网站上的Tab菜单,网址是http://office.microsoft.com. 网页学习网http://www.lodidance.com首页

TAB菜单操作

1,TAB菜单操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display:none; } .menu{ height:38px; background-color:#eeeeee; line-height:38px; } .a

《转》浅析Ubuntu 12.04右键菜单

这篇文章只分析Ubuntu 12.04右键菜单中的打开程序这一部分,包括新增.删除.更改Open with选项. 先以.csv文件为例(也就是下面菜单的前四行): 第一行下面有个分割线,说明这是该文件的默认打开方式,如果该文件具有可执行属性这里不会显示默认程序了,而是简单的Open一个词,点击后会有提示运行还是查看. 接下来的三行(取决于你设置了几个关联程序)就是关联程序了.点击其中的最后一行"Open With Other Application..."就会打开选择程序列表,这点和W

简易版CSS3 Tab菜单 实用的Tab切换

今天我们要来分享一款非常简易而又实用的CSS3 Tab菜单,Tab菜单没有非常华丽的动画,但是代码非常简洁易懂,也可以在大部分场合使用,因此也非常实用,如果你需要加入动画效果,也可以自己方便地修改这款Tab菜单来实现,之前也分享过类似的Tab菜单,可以看Tab菜单类目. 在线预览   源码下载

简易CSS3 Tab菜单 Tab切换滑块动画

今天要分享一款简易的CSS3 Tab菜单,这款Tab菜单在切换的时候内容块出现飞入飞出的动画效果,尽管看起来非常简单,但是你完全可以在上面定制自己喜欢的Tab菜单.前面也分享过一些Tab菜单,像CSS3华丽的Tab菜单 带小图标动画就很酷. 在线预览   源码下载

zepto.js swipe实现触屏tab菜单

今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功能.前几天,有朋友告诉我百度基于zepto.js做了一个webapp的UI,大家也可以看下:“http://gmu.baidu.com/”,有点像jquery ui的东西,大家有兴趣可以学习啊... 我们今天,用zepto.js的swipe来实现新浪手机网的tab菜单,大家可以先看下新浪的手机版“h

Android 设置界面修改为Iphone的tab菜单风格

好久没有写博客了!最近做了Android 设置的列表菜单风格改为Iphone的tab菜单风格的尝试!我知道,有许多朋友有自己的方式已经实现了这个界面风格的开发,今天大家来看看我的做法吧! 做这个开发前,首先要看看Android默认的设置列表菜单风格的实现!由 AndroidManifest.xml可以知道Settings这个Activity是我们关注的焦点!所以我们来到Settings.java来一探究竟,从中我们可以清除的知道他其实是一个PreferenceActivity,而Preferen

打造简易可扩展的jQuery/CSS3 Tab菜单

原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜单比较假单,你也可以用CSS代码定制你自己需要的外观. 我们可以在这里看到这款Tab菜单的DEMO演示. 看完演示,再来解读一下这款Tab菜单的源代码,主要由CSS代码和jQuery代码两块. 先是上简单的HTML代码: <figure class="tabBlock"> &l

8款超酷实用的CSS3 Tab菜单集合

1.CSS3华丽的Tab菜单 带小图标动画 之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG Tab滑块菜单,结合SVG,Tab菜单实现非常灵活.今天我们要再来分享一款基于CSS3的华丽Tab菜单,这款Tab菜单的菜单项是一个个小图标,鼠标滑过时,菜单项展示对应文字,并出现展开的动画. 在线演示 源码下载 2.响应式CSS3 Tab菜单 带小图标菜单 这次要介绍的这款响应式CSS3 Tab菜单非常不错,它看起来挺简单的,而且设计也干净利落,但是Tab菜单的实用性很强.每一个ta