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 类来添加分割线 (大屏幕上是垂直的线,小屏幕上是水平线):

    实例

相关文章
|
前端开发
顶部导航栏
顶部导航栏
158 0
|
6月前
|
JSON 算法 API
1688商品详情API实战:Python调用全流程与数据解析技巧
本文介绍了1688电商平台的商品详情API接口,助力电商从业者高效获取商品信息。接口可返回商品基础属性、价格体系、库存状态、图片描述及商家详情等多维度数据,支持全球化语言设置。通过Python示例代码展示了如何调用该接口,帮助用户快速上手,适用于选品分析、市场研究等场景。
|
XML Java API
使用 XDocReport 将 .docx 文件转换为 .pdf 文件
本文介绍如何使用 XDocReport 库在 Java 中将 Word 文件转换为 PDF 文件
5909 0
|
Docker 容器
docker 容器重启
【10月更文挑战第30天】docker 容器重启
3062 0
element-ui表格数据样式及格式化
element-ui表格数据样式及格式化
317 2
|
安全 Java jenkins
Java | ProGuard——java代码混淆利器
Java | ProGuard——java代码混淆利器
5218 0
Java | ProGuard——java代码混淆利器
|
安全 Java Android开发
Eclipse Paho MQTT客户端Java源码分析
Eclipse Paho MQTT客户端Java源码分析
702 0
Eclipse Paho MQTT客户端Java源码分析
|
Java API 语音技术
NLS(Natural Language Processing Service)
NLS(Natural Language Processing Service)是阿里云提供的一项语音识别、语音合成和语音交互等服务的产品,它可以帮助开发者快速实现语音交互应用,并提供了多种语音服务API、SDK和工具,方便开发者进行开发和调试。
2010 0
|
缓存 JavaScript 前端开发
基于storybook组件库的技术选型该怎么选??
大家好我是Fly. 最近一直着手组内基建活动, 目前正在做的事组件库的技术文档搭建, 最终还是弃用dumi, 选用了storybook 作为组件库文档的技术方案, 主要是我们项目架构 本身就是自己去搭建的, 没有采用umi 那一套, umi对我们来说太重了, 本身的打包配置分为node 和 web的, 本身就是webpack 5去构建的, 主要是想复用一些webpack的配置。 想着组件库采用 vite 去打包的时候,看了一些文档, webpack5 的 lazyCompilation 配合 code spliting 本身的开发速度和hmr 启动 整体和vite 的体验是差不多的, 甚至
基于storybook组件库的技术选型该怎么选??
|
Java Maven 开发者
SpringBoot 基于 IDEA 搭建一个简单的项目
SpringBoot 基于 IDEA 搭建一个简单的项目
618 0
SpringBoot 基于 IDEA 搭建一个简单的项目