草庐IT

Foundation 顶部导航栏

runoob 2023-04-06 原文

Foundation 顶部导航栏

顶部导航栏放在页面头部：

实例

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <!-- 如果你不需要标题或图标可以删掉它 -->
      <h1><a href="#">WebSiteName</a></h1>
    </li>
      <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。
      如果需要只显示图片，可以删除 "Menu" 文本 -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </section>
</nav>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

尝试一下 »

实例解析

使用 <nav class="top-bar" data-topbar> 创建标准工具条。 .title-area 类定义了网站logo区域 (必须防止 li.name 内) 。屏幕变小后你就可以看到一个 "menu" 按钮。 Foundation 的菜单会根据屏幕尺寸自动折叠和延展：

小屏幕上，由于尺寸的原因很多选项会被隐藏。 li.toggle-topbar menu.icon 类创建了一个菜单的按钮，点击它可以显示被隐藏的选项。
提示: 重置浏览器窗口查看效果。

.top-bar-section 定义了导航的链接部分。 .left 类指定链接左对齐。 .active 类用于显示选中的项，背景为蓝色。

提示: 如果你想导航链接右对齐可以将 .left 修改为 .right :

实例

<section class="top-bar-section">
  <ul class="right">...

尝试一下 »

你可以同时设置左边对齐与右边对齐：

实例

<section class="top-bar-section">
  <ul class="left">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
  </ul>
  <ul class="right">
    <li><a href="#">Sign Up</a></li>
    <li><a href="#">Login</a></li>
  </ul>
</section>

尝试一下 »

导航栏可以通过 .divider 类来添加分割线 (大屏幕上是垂直的线，小屏幕上是水平线):

实例

<ul class="left">
  <li class="active"><a href="#">Home</a></li>
  <li class="divider"></li>
  <li><a href="#">Page 1</a></li>
  <li class="divider"></li>
  <li><a href="#">Page 2</a></li>
  <li class="divider"></li>
  <li><a href="#">Page 3</a></li>
  <li class="divider"></li>
</ul>

尝试一下 »

导航栏的下拉菜单

顶部导航栏可以设置下拉菜单。

可以通过在 <li> 元素上添加 .has-dropdown 类来设置下拉菜单:

实例

<section class="top-bar-section">
  <ul class="left">
    <li class="active"><a href="#">Home</a></li>
    <li class="has-dropdown">
      <a href="#">Dropdown</a>
      <ul class="dropdown">
        <li><a href="#">First link in dropdown</a></li>
        <li><a href="#">Second link in dropdown</a></li>
        <li class="active"><a href="#">Active link in dropdown</a></li>
      </ul>
    </li>
  </ul>
</section>

尝试一下 »

分割线

使用 .divider 类来设置下拉菜单的分割线:

实例

<ul class="dropdown">
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Orange</a></li>
  <li class="divider"></li>
  <li><a href="#">Kale</a></li>
  <li><a href="#">Spinach</a></li>
</ul>
尝试一下 »

下拉菜单标签

在 <li> 内添加 <label> 元素来设置下拉菜单的标签(标题):

实例

<ul class="dropdown">
  <li><label>Fruit</label></li>
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Orange</a></li>
  <li class="divider"></li>
  <li><label>Vegetable</label></li>
  <li><a href="#">Kale</a></li>
  <li><a href="#">Spinach</a></li>
</ul>
尝试一下 »

内嵌下拉菜单

下拉菜单可以再嵌入一个下拉菜单：

实例

<section class="top-bar-section">
  <ul class="left">
    <li class="has-dropdown">
      <a href="#">Dropdown</a>
      <ul class="dropdown">
        <li><label>Level 1</label></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="has-dropdown">
          <a href="#">New dropdown</a>
          <ul class="dropdown">
            <li><label>Level 2</label></li>
            <li><a href="#">2nd level dropdown</a></li>
            <li><a href="#">2nd level dropdown</a></li>
            <li class="has-dropdown">
              <a href="#">New dropdown</a>
              <ul class="dropdown">
                <li><label>Level 3</label></li>
                <li><a href="#">3rd level dropdown</a></li>
                <li><a href="#">3rd level dropdown</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</section>

尝试一下 »

可点击

默认情况下导航栏的下拉菜单在鼠标移动过去后显示，我们可以使用 data-options="is_hover: false" 属性来设置导航栏在鼠标在点击后显示:

实例

<nav class="top-bar" data-topbar data-options="is_hover: false">

尝试一下 »

导航栏上的按钮及图标

你可以在导航栏上放置图标和按钮：

实例

<li><a href="#" class="button">Button Link</a></li>

尝试一下 »

你可以在导航栏上放上图标，更多图片样式可以查看 Foundation 图标教程:

实例

<head>
<!-- Foundation 图标样式 -->
<link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
</head>

<ul class="left">
  <li class="active"><a href="#"><i class="fi-home"></i> Home</a></li>
  <li><a href="#"><i class="fi-torso"></i> Sign Up</a></li>
  <li><a href="#"><i class="fi-magnifying-glass"></i> Search</a></li>
</ul>

尝试一下 »

固定导航栏

导航栏可以固定在页面顶部。

页面滚动时导航栏在顶部是不会动的。

要固定导航栏只需要将导航栏放在 <div class="fixed"> 内即可:

实例

<div class="fixed">
  <nav class="top-bar" data-topbar>
    ...
  </nav>
</div>

尝试一下 »

导航栏绝对定位

我们可以将导航栏放在 <div class="sticky"> 内来设置导航栏的绝对定位，当滚动条滚到到该区域时，该导航栏就像固定导航栏一样在顶部不动:

实例

<div class="sticky">
  <nav class="top-bar" data-topbar>
    ...
  </nav>
</div>

尝试一下 »

当你使用 .sticky 类时，顶部导航栏在所有屏幕尺寸上将固定不动。如果你需要在指定屏幕上设定只需要在 <nav> 上添加 data-options="sticky_on: small|medium|large" 属性即可：

实例

<div class="sticky">
  <!-- 只有在大屏幕上 -->
  <nav class="top-bar" data-topbar data-options="sticky_on: large">
    ..
   </nav>
</div>

或者通过数组设置多个屏幕尺寸：

实例

<div class="sticky">
  <!-- 小屏幕和大屏幕 (没有中等屏幕)-->
  <nav class="top-bar" data-topbar data-options="sticky_on: [small, large]">
    ..
   </nav>
</div>
Foundation顶部spanclassnbsp

有关Foundation 顶部导航栏的更多相关文章

  1. ruby-on-rails - 在 Rails 3 中向 Active Admin 添加全局导航项的最佳方法是什么 - 2

    我正在尝试将全局导航菜单项添加到我的ActiveAdmin安装(在“仪表板”导航按钮旁边)。ActiveAdmin说这在他们的网站上是可能的，但他们没有任何关于如何实现它的文档。有谁知道如何做到这一点？编辑:抱歉，我应该更清楚。我想添加一个指向由任意文本/链接对组成的全局导航的链接。IE，如果我想添加一个链接到http://google.com在事件管理员的全局导航中使用文本“Google”，我将如何实现？ 最佳答案 ActiveAdmin.register_page"Google"domenu:priority=>1,:label

  2. 千耘农机导航的“星地一体”能力究竟是什么？ - 2

    伴随农业机械化和智能化的发展，越来越多的人开始使用农机自动驾驶系统助力耕作，千耘农机导航的“星地一体”能力可有效解决信号受限的问题，实现作业提效。究竟什么是“星地一体”，又是如何解决智能化农机作业的痛点的？下面为大家揭秘。农机效率通常受限于通信网络目前虽然我国通讯网络的人口覆盖率达到99%，但地面移动通讯网络覆盖率仍小于国土面积的40%，而很多农田所在区域恰是山区、戈壁滩等偏远地区。两省交界地也会出现通信信号不稳定的状况；而国内大部分农机自动驾驶系统非常依赖通信网络，当通信网络弱的时候会出现系统掉线的现象，必须得携带小基站才能正常使用，极为繁琐。Q:什么是千耘农机导航“星地一体”能力？A:是星

  3. 微信小程序顶部标题栏与胶囊对齐 - 2

    介绍    最近在做微信小程序时，顶部标题栏总是与胶囊对不齐。往往是在这款手机上对齐了，在另外一款手机差很多。我在查阅资料后，提出了一种方法解决这个问题，即：在页面onLoad或组件created时，利用微信小程序提供的API，获取系统状态栏高度和胶囊信息，进而动态调整顶部标题栏样式。在苹果、小米、荣耀手机做验证，能做到精准对齐。理论        胶囊样式应该是垂直居中，有1px的border，border-radius为18px。        若要使顶部标题栏与胶囊对齐，则其高度必须是导航栏高度，标题栏内容也要垂直居中，顶部标题栏的外边距或内边距必须是状态栏高度。        如果顶部

  4. ruby-on-rails - 如何在不创建空模型的情况下创建 rails_admin 导航标签？ - 2

    在railsadmin中，您可以像这样为模型及其子项定义导航标签:#inrails_admin.rbconfig.modelOrderdonavigation_label'Ordersrelated'endconfig.modelOrderProductsdoparentOrderend有没有办法在不创建模型的情况下向导航菜单添加标签(即仅用于分组)？ 最佳答案 根据wiki，您可以像这样将静态链接附加到导航:RailsAdmin.configdo|config|config.navigation_static_links={'Go

  5. ruby-on-rails - 如何使用 rails 3.1 覆盖 Zurb Foundation css 属性？ - 2

    大家好，我正在开发一个新的Rails应用程序，我刚刚开始使用Foundation。我是用安装的railsgfoundation:install一切都按预期工作(我的意思是我可以在我的源代码中看到css，还有它的视觉效果；p)我只是不明白如何覆盖ZurbFoundation的默认属性...我在网上看到我应该编辑一些foundation.css或app.css但我的应用程序文件夹中似乎没有任何类似的文件....我通过编辑gemfile然后进行捆绑安装来完成安装。干杯 最佳答案 是的，如果您对app/assets/stylesheets/

  6. ruby - 为什么 Ruby 使用自己的安全导航运算符语法？ - 2

    Ruby2.3.0引入了安全导航语法，它通过引入一个新的运算符来简化链式方法调用的nil处理，该运算符仅在先前语句的值不是nil。这是一个已经存在于C#、Groovy和Swift中的特性。例如inGroovy,语法是foo?.bar这基本上意味着结果值是foo.bar除非foo是null，在这种情况下返回值也是null因此不会抛出异常。还有C#(称为空条件运算符)和Swift(称为可选链接表达式)使用此表示法。所以语法在其他语言中似乎是相当标准的。现在，为什么在Ruby中语法是foo&.bar代替？ 最佳答案 此答案基于thedis

  7. ruby - 如何在 Middleman 中生成导航？ - 2

    我只是习惯了Middleman和一般的ruby。生成具有事件状态的导航的最佳方式是什么？ 最佳答案 在当前版本的MM(2.x，尽管3.0接近)中，您可以通过向config.rb添加以下内容并在您的导航文件中进行一些调整来实现。这是aworkingversion以防我遗漏一些关键位:首先创建一个辅助函数:helpersdodefnav_active(page)@page_id==page?{:class=>"Active"}:{}endend然后，在navbarincludefile(在本例中它是一个haml文件)您可以使用nav_a

  8. ruby - 是否可以从功能文件导航到 VSCode 中的步骤定义 - 2

    我主要将RubyMine用于Cucumber/Ruby，现在，我开始使用VSCode，使用它可以运行和调试测试用例。我找不到从功能导航到步骤定义的方法。我尝试搜索扩展程序，但cucumber-step-mapper没有帮助。是否有任何配置可以实现从功能到步骤定义的导航？ 最佳答案 您可以安装Cucumber(Gherkin)FullSupport来自VSCodeMarketplace的扩展:安装完成后，重新加载VSCode。现在为了使其适用于Ruby，您需要:按Ctrl+,打开用户设置向下滚动到CucumberAutoComplet

  9. ruby-on-rails - 如何在 Ruby on Rails 中实现特定于部分的导航？ - 2

    我有一个Ruby/Rails应用程序，它有两个或三个主要“部分”。当用户访问该部分时，我希望显示一些子导航。所有三个部分都使用相同的布局，因此我无法将导航“硬编码”到布局中。我可以想到几种不同的方法来做到这一点。我想为了帮助人们投票，我会把它们作为答案。还有其他想法吗？或者你投票给什么？ 最佳答案 假设每个部分都有自己的Controller，您可以使用partials轻松地做到这一点。假设您有三个部分，分别称为Posts、Users和Admin，每个部分都有自己的Controller:PostsController、UsersCon

  10. ruby - pry 导航工作意外 - 2

    我把binding.pry放在我的脚本中，但是现在当它停在断点处时，是向我显示该信息。出乎我的意料，如何解决？帧数:0/11From:/Users/me/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/pry-nav-0.2.4/lib/pry-nav/tracer.rb@line21PryNav::Tracer#run:12:defrun(&block)13:#Forperformance,disableanytracerswhileintheconsole.14:#Unfortunatelydoesn'tworkin1.9.2becau

随机推荐