草庐IT

Foundation 麦哲伦(Magellan)导航

runoob 2023-04-06 原文

Foundation 麦哲伦(Magellan)导航


如何创建麦哲伦导航

麦哲伦导航就是一个导航索引,创建方式如下:

实例

<div data-magellan-expedition="fixed">
  <dl class="sub-nav">
    <dd data-magellan-arrival="page1"><a href="#page1">Page 1</a></dd>
    <dd data-magellan-arrival="page2"><a href="#page2">Page 2</a></dd>
  </dl>
</div>

<h3 data-magellan-destination="page1">Page1</h3>
<a name="page1"></a>
...

<h3 data-magellan-destination="page2">Page2</h3>
<a name="page2"></a>
...

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

尝试一下 »

实例解析

在 <div> 元素上添加 data-magellan-expedition="fixed" 属性来创建麦哲伦导航。

然后在 <dd><li> 上添加 data-magellan-arrival="value" 属性,后面添加一个与该属性值一样的链接(page1)。

使用 data-magellan-destination="value" 属性来控制麦哲伦导航的目标, 后面紧跟的 <a> 元素添加 name="value" 属性。两个属性的值必须与 data-magellan-arrival 的值一致 (page1)。

最后,初始化 Foundation JS ,用户在滚动页面时导航就会根据当前显示的内容自动切换。


麦哲伦导航头部工具条

麦哲伦导航使用头部工具条实例:

实例

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

    <section class="top-bar-section">
      <ul class="left">
        <li data-magellan-arrival="page1"><a href="#page1">Page 1</a></li>
        <li data-magellan-arrival="page2"><a href="#page2">Page 2</a></li>
      </ul>
    </section>

  </nav>
</div>

<h3 data-magellan-destination="page1">Page1</h3>
<a name="page1"></a>
...

<h3 data-magellan-destination="page2">Page2</h3>
<a name="page2"></a>
...

尝试一下 »

麦哲伦导航内边距

默认情况下,麦哲伦导航的 <div> 元素有 10px 的内边距。可以使用 CSS 移除它:

实例

[data-magellan-expedition], [data-magellan-expedition-clone] {
    padding: 0;
}

尝试一下 »

麦哲伦导航选项

使用 data-options 属性修改麦哲伦导航的设置, 例如 <div data-magellan-expedition="fixed" data-options="destination_threshold:60">:

名称 类型 默认 描述 实例
active_class string active 指定激活链接的类 尝试一下
threshold number 0 指定导航在什么时候需要固定位置。会根据滚动条滚动计算,默认为 0 (auto)。 尝试一下
destination_threshold number 20 设该值设定了导航链接显示为激活(蓝色背景)时导航列表距离顶部的值。 尝试一下
fixed_top number 0 指定了导航条距离头部的像素值 尝试一下

有关Foundation 麦哲伦(Magellan)导航的更多相关文章

  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. ruby-on-rails - 如何在不创建空模型的情况下创建 rails_admin 导航标签? - 2

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

  4. 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/

  5. 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

  6. 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

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

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

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

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

  9. 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

  10. ruby - 在 Ruby 中将 [] 与安全导航运算符一起使用 - 2

    我目前有一段代码如下:ifmatch=request.path.match(/\A\/(?(?!admin|assets)\w+)/)match[:slug]end有没有办法使用安全导航运算符(在2.3.0中引入)来避免这种if条件? 最佳答案 只需使用普通(无糖)形式即可。request.path.match(/\A\/(?(?!admin|assets)\w+)/)&.[](:slug) 关于ruby-在Ruby中将[]与安全导航运算符一起使用,我们在StackOverflow上找到

随机推荐