Foundation 顶部导航栏1

简介: 顶部导航栏位于页面头部,包含网站Logo、菜单按钮及导航链接。在小屏幕上,菜单按钮可展开隐藏的选项。通过`.left`和`.right`类可设置链接对齐方式,`.divider`类用于添加分割线。

Foundation 顶部导航栏
顶部导航栏放在页面头部:

实例








尝试一下 »
实例解析
使用 创建标准工具条。 .title-area 类定义了网站logo区域 (必须防止 li.name 内) 。屏幕变小后你就可以看到一个 "menu" 按钮。 Foundation 的菜单会根据屏幕尺寸自动折叠和延展:

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

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

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

实例


  • ...
    尝试一下 »
    你可以同时设置左边对齐与右边对齐:

    实例





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

    实例

相关文章
|
5月前
|
JSON 算法 API
1688商品详情API实战:Python调用全流程与数据解析技巧
本文介绍了1688电商平台的商品详情API接口,助力电商从业者高效获取商品信息。接口可返回商品基础属性、价格体系、库存状态、图片描述及商家详情等多维度数据,支持全球化语言设置。通过Python示例代码展示了如何调用该接口,帮助用户快速上手,适用于选品分析、市场研究等场景。
|
前端开发
顶部导航栏
顶部导航栏
138 0
|
XML Java API
使用 XDocReport 将 .docx 文件转换为 .pdf 文件
本文介绍如何使用 XDocReport 库在 Java 中将 Word 文件转换为 PDF 文件
5757 0
|
JavaScript 前端开发 API
vue element plus Cascader 级联选择器
vue element plus Cascader 级联选择器
1203 0
|
11月前
|
存储 JSON 前端开发
数据库有成千上万的表是怎么回事?
大型数据库经过多年运行常积累数以万计的数据表,其中很多是中间表,占用大量资源,导致数据库膨胀。这些中间表大多为数据呈现服务,因前端报表频繁修改而不断增加。SPL 通过独立计算引擎,将中间数据移至文件系统,减少数据库负担,提高性能,优化资源利用。
|
11月前
|
存储 人工智能 自然语言处理
高效档案管理案例介绍:文档内容批量结构化解决方案解析
档案文件内容丰富多样,传统人工管理耗时低效。思通数科AI平台通过自动布局分析、段落与标题检测、表格结构识别、嵌套内容还原及元数据生成等功能,实现档案的高精度分块处理和结构化存储,大幅提升管理和检索效率。某历史档案馆通过该平台完成了500万页档案的数字化,信息检索效率提升60%。
353 5
|
11月前
|
前端开发 JavaScript Java
如何捕获和处理HTTP GET请求的异常
如何捕获和处理HTTP GET请求的异常
|
11月前
|
移动开发 前端开发 JavaScript
从基础到进阶的全方位指南(升级版)
从基础到进阶的全方位指南(升级版)
90 5
|
11月前
|
Docker 容器
docker 容器重启
【10月更文挑战第30天】docker 容器重启
2783 0
element-ui表格数据样式及格式化
element-ui表格数据样式及格式化
282 2