Foundation 麦哲伦(Magellan)导航3

简介: 麦哲伦导航默认有10px内边距,可通过CSS移除。使用`data-options`属性可调整设置,如`active_class`、`threshold`、`destination_threshold`和`fixed_top`等,以控制导航的行为和样式。

麦哲伦导航内边距
默认情况下,麦哲伦导航的

元素有 10px 的内边距。可以使用 CSS 移除它:

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

尝试一下 »
麦哲伦导航选项
使用 data-options 属性修改麦哲伦导航的设置, 例如

:

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

相关文章
Foundation 下拉菜单6
分割按钮是在普通按钮基础上添加 `.split` 类,生成一个带有下拉箭头的按钮。点击按钮可展开下拉菜单,实现更多操作选项。示例代码展示了如何创建一个分割按钮及关联的下拉菜单。
|
2月前
|
前端开发
Foundation 图标1
Foundation 图标提供了 283 个可自定义样式的图标,适用于文本、按钮、工具条、导航栏和表单等。使用方法简单,只需在 HTML 中添加相应的类名即可。例如:`<i class="fi-name"></i>`。需在 `<head>` 部分引入样式文件。
|
1月前
|
索引
Foundation 麦哲伦(Magellan)导航1
Foundation 麦哲伦(Magellan)导航是一种固定的导航索引,用于页面内跳转。通过在 HTML 中添加特定的 `data` 属性和链接,可以轻松创建导航条目。
Foundation 麦哲伦(Magellan)导航2
麦哲伦导航头部工具条示例:通过固定顶部栏实现页面内导航,包含两个导航链接分别指向“Page 1”和“Page 2”,并使用`data-magellan-destination`属性标记目标位置。
Foundation 侧边栏1
Foundation 框架使用 `<ul class="side-nav">` 创建侧边栏导航。
Foundation 下拉菜单4
下拉菜单默认位于底部
Foundation 下拉菜单2
通过添加 .tiny、.small、.medium、.large 或 .mega 类,可以调整下拉菜单的宽度。在小屏幕上,所有下拉菜单的宽度为 100%。示例:.tiny(200px)、.small(300px)、.medium(500px)、.large(800px)、.mega(100%)。
|
1月前
|
容器
Foundation 图标4
该示例展示了如何使用 `<label>` 元素为图标添加描述。每个图标按钮包含一个图标和一个标签,分别表示“主页”、“分享”、“信息”、“邮件”和“搜索”。整个图标栏通过 `div` 容器和类名 `icon-bar five-up` 进行布局。
Foundation 图标2
以下示例展示了图标的不同用法:云图标、作为链接的云图标、样式化的云图标、主页图标、按钮上的主页图标、绿色按钮上的主页图标以及浅蓝色大链接按钮上的主页图标。
|
1月前
|
设计模式
Foundation 侧边栏3
使用网格设计模式可以方便地设置侧边导航栏。例如,在一个包含“Home”、“Learn HTML”等选项的页面中,可以通过网格布局实现侧边导航栏和主要内容区域的排列。