`
mrstanglu
  • 浏览: 41157 次
  • 性别: Icon_minigender_2
  • 来自: 郑州
社区版块
存档分类
最新评论

高级CSS技巧-Tab选项卡导航菜单

阅读更多
  • 任何的tab导航,都可以采用下面的方式来实现。看一下下面的Tab menu效果。

     

     

    我们需要准备tab左面背景和中右部背景图片(不过我个人偏向于把中间的背景和右边的背景分开,我认为那样可以实现中部背景循环,就算文字长一米也无所谓了,不过这太夸张了,考虑中国没有哪个菜单文字会超过6个字,英文也很少有太长的tab,所以两张图片完全够用了。)以及他们的鼠标悬停时的图片。采用图片的滑动门技术,因此把图片做成一张图,如下。

     

     

    css代码和xhtml代码如下:

    <style type="text/css">

    /*- Menu Tabs--------------------------- */

        #tabs {
          width:100%;
          background:#F4F4F4;
          font-size:93%;
          line-height:normal;
          }
        #tabs ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
          }
        #tabs li {
          display:inline;
          margin:0;
          padding:0;
          }

    显示tab菜单左侧
        #tabs a {
          float:left;
          background:url("tab.gif") no-repeat left top;
          margin:0;
          padding:0 0 0 4px;
          text-decoration:none;
          }

    tab菜单中右侧
        #tabs a span {
          float:left;
          display:block;
          background:url("tab.gif") no-repeat right -96px;
          padding:5px 15px 4px 6px;
          color:#666;
          }

        /* Commented Backslash Hack hides rule from IE5-Mac \*/
        #tabs a span {float:none;}
        /* End IE5-Mac hack */

    鼠标悬停时的图片显示,采用滑动门技术给图片定好位就行了。
        #tabs a:hover span {
          background-position:100% -138px;
          color:#000;
          }
        #tabs a:hover {
          background-position:0% -42px;
          }

    </style>

    <h2>Tab Menu</h2>
    <div id="tabs">
    <ul>
        <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
        <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
        <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
        <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
        <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
        <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
        <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
    </ul>
    </div>

    通过这种方式,我们可以做各种自己喜欢的tab样式,只要变换一下图片就行了。

  • 分享到:
    评论

    相关推荐

      TAB选项卡后台菜单效果

      "TAB选项卡后台菜单效果"是一个专为后台管理系统设计的功能,它旨在提供高效、直观且易于导航的操作界面。在这个主题下,我们将深入探讨选项卡在后台菜单中的应用、实现方式以及它们对用户体验的影响。 选项卡是一...

      layui Tab选项卡切换跟随特效(源码)

      2. CSS样式:layui框架提供了一套完整的CSS样式表,用于美化Tab选项卡的外观。这包括颜色、字体、边框、背景等视觉效果。开发者可以通过自定义CSS类或者修改layui的默认样式来自定义选项卡样式。 3. JavaScript交互...

      css-ul-tab菜单制作

      Tab菜单是一种常见的网页导航设计,它通过不同的选项卡来展示不同的内容区域。用户点击一个选项卡时,相应的内容会显示出来,而其他选项卡的内容则隐藏。这种设计既节省空间又易于操作。 制作CSS Tab菜单涉及以下几...

      CSS+JS选项卡式导航菜单

      **标题:“CSS+JS选项卡式导航菜单”** 在网页设计中,选项卡式导航菜单是一种常见的用户界面元素,它允许用户在多个相关但独立的内容区域之间切换,而无需加载新的页面。这种设计模式提高了用户体验,因为它使得...

      HTML制作多级菜单_一级下拉菜单导航菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip

      这个压缩包“HTML制作多级菜单_一级下拉菜单导航菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip”显然是为了演示如何实现这样的功能。下面将详细解释其中涉及的主要知识点。 首先,我们关注的是HTML...

      html css js tab选项卡

      在Tab选项卡的设计中,我们可以使用`&lt;div&gt;`元素来创建每个选项卡的容器,而`&lt;ul&gt;`和`&lt;li&gt;`元素则用来创建选项卡的导航菜单。例如: ```html &lt;ul class="tab-nav"&gt; &lt;li&gt;&lt;a href="#tab1"&gt;选项卡1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a...

      纯CSS3实现TAB选项卡切换.zip

      本项目“纯CSS3实现TAB选项卡切换”旨在利用CSS3特性,不依赖JavaScript,实现一种平滑的选项卡切换效果,具有淡入淡出的过渡动画。这个效果在网页设计中十分常见,常用于展示多个相关但内容互斥的部分,如产品介绍...

      tab选项卡 很经典的选项卡

      "Tab选项卡"是这种交互模式的一种实现方式,通常在网页顶部或侧边设置,每个标签代表一个独立的内容区域。本文将深入探讨“经典”的选项卡设计及其重要特性。 一、选项卡的基本结构与功能 1. 标签:每个选项卡都...

      JS选项卡导航菜单,超漂亮的

      在网页设计中,JS选项卡导航菜单是一种常见的交互元素,用于组织和展示大量内容,同时保持页面整洁。这种菜单利用JavaScript技术实现动态切换,让用户能够轻松地在不同的内容板块之间进行导航。本教程将深入探讨如何...

      4种不同风格jQuery自定义tab选项卡特效.zip

      导航菜单可应用于头部和侧边,Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能。面包屑结构简单,支持自定义分隔符。这是tab选项卡切换的源代码,由于内容较多,所以只截取了大致的结构。其实第二个盒子...

      jQuery+CSS3响应式TAB选项卡幻灯片切换代码

      本示例中的"jQuery+CSS3响应式TAB选项卡幻灯片切换代码"正是这种理念的具体应用,旨在创建一个既美观又实用的交互式界面。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax...

      简易实用的jQuery Tab选项卡菜单插件

      **jQuery Tab选项卡菜单插件**是一种常见的网页交互元素,用于组织和展示多部分内容,如文本、图片或视频。在网页设计中,Tab组件能够帮助用户更有效地浏览和导航,提高用户体验。本插件以其简易实用的特点,成为...

      很不错的js实现选项卡菜单

      8. **可访问性**:一个优秀的选项卡菜单应该考虑无障碍性(accessibility),确保键盘导航的可用性,以及配合屏幕阅读器使用。 9. **优化性能**:为了提高页面加载速度,可以使用懒加载(lazy loading)技术,只在...

      css3超酷3D旋转导航菜单特效

      本案例中,我们关注的是"css3超酷3D旋转导航菜单特效",这是一个利用CSS3 3D Transforms技术实现的创新性交互设计。这个特效使得网站的导航菜单在用户悬停时展现出立体的旋转效果,增强了用户体验和视觉吸引力。 ...

      Keypress选项卡tab标签类型导航菜单

      "Keypress选项卡tab标签类型导航菜单"是一个实现这种功能的设计,它提供了高效且直观的用户体验。在本项目中,我们将深入探讨Tab标签的使用、设计原理以及实现技术。 首先,Tab导航菜单的基本概念是将多个相关的...

      Div+Css的Tab菜单

      - 通常包含一个父级Div,用于包裹所有Tab选项卡,以及一个内容区Div,用于展示被选中Tab对应的内容。 - 每个Tab作为一个单独的Div,可以通过JavaScript或CSS来切换其激活状态。 - 内容区Div根据Tab的切换,动态...

      javascript实现简易的tab选项卡切换效果

      在网页设计中,选项卡(Tab)是一种常见的用户界面元素,用于组织和展示大量内容,让用户可以方便地在不同部分之间切换。JavaScript 是一种强大的客户端脚本语言,它允许我们动态地更新页面内容,实现交互性的功能,...

      NO JS css3 Tab页签切换效果选项卡切换源码下载

      “NO JS css3 Tab页签切换效果选项卡切换源码下载”这个标题表明,这是一个不依赖JavaScript的CSS3实现的选项卡切换效果的源代码资源。"NO JS"强调了此代码主要利用CSS3技术,而非常见的JavaScript进行交互设计。...

      HTML5 JQUERY css3 Tab网页选项卡.rar

      这个名为“HTML5 JQUERY css3 Tab网页选项卡”的压缩包内容,显然是一个使用这些技术实现的网页选项卡组件。选项卡在网页设计中非常常见,常用于组织和展示大量内容,让用户能够轻松切换不同的视图。 首先,HTML5 ...

      Tab选项卡 html js

      在Web开发中,Tab选项卡经常被用于导航菜单、产品展示、文章分类等场景。 ### 二、HTML结构设计 在HTML中,构建Tab选项卡的基本结构非常重要。通常情况下,我们需要为每个Tab选项卡创建一个包含标题和内容的容器。...

    Global site tag (gtag.js) - Google Analytics