# 响应式导航栏制作教程 | Creght 可视化文档

> 本教程将通过组件化思维，引导你创建一个响应式导航栏——只需设计一次，即可让它在桌面端、平板端和移动端之间无缝适配。 概览 完成本教程后，你将拥有一个具备以下功能的导航栏： 桌面端、平板端和移动端三种响应式布局 菜单项的悬停交互 可自定义的文…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)帮助文档](/help.md)

[更新历史](/blogs.md)

[AI](/docs/ai/quick-create-first-website.md) [可视化](/docs/get-start.md)

入门

- [两分钟了解 Creght](/docs/get-start.md)
- [如何注册 Creght](/docs/signup.md)
- [快速制作网站](/docs/create-site.md)
- [模板](/docs/tpls.md)

设计

- [编辑器](/docs/editor.md)
- [基本操作](/docs/operating.md)
- [什么是布局](/docs/layout.md)
- [什么是定位](/docs/position.md)
- [什么是尺寸](/docs/size.md)
- [断点](/docs/breakpoint.md)
- [弹窗](/docs/popover.md)
- [组件](/docs/components.md)
- [添加第三方字体](/docs/tp-font.md)
- [副本与深拷贝](/docs/deep-copy.md)

CMS

- [内容管理 \- CMS](/docs/cms.md)
- [CMS 导入微信公众号文章](/docs/wxmp.md)

网站设置

- [页面设置](/docs/page-setting.md)
- [如何升级套餐](/docs/manage-plan.md)
- [SEO 设置](/docs/seo-setting.md)
- [小文件](/docs/verification-file.md)
- [绑定自定义域名](/docs/custom-domain.md)
- [如何进行网站备案](/docs/beian.md)
- [服务器节点说明](/docs/website-node.md)
- [如何切换站点](/docs/pxrp79jqtnyq.md)
- [多语言本地化](/docs/localization.md)

AI

- [关于 Creght AI](/docs/creght-ai.md)

工具

- [从 Figma 设计稿到可交互网站](/docs/figma-to-creght.md)
- [Figma 转响应式布局的 3 大核心指南](/docs/figma-autolayout.md)
- [Figma 设计稿一键转响应式网站](/docs/response-site.md)
- [Figma 转响应式网站-交互篇](/docs/figma03.md)
- [使用 FFmpeg 压缩视频](/docs/ffmpeg.md)
- [如何将 Clarity 添加到您的网站](/docs/clarity.md)
- [按钮 Hover 动效制作教程](/docs/button.md)
- [响应式导航栏制作教程](/docs/nav.md)
- [折叠面板](/docs/collapse.md)

工具/

# 响应式导航栏制作教程

本教程将通过组件化思维，引导你创建一个响应式导航栏——只需设计一次，即可让它在桌面端、平板端和移动端之间无缝适配。

## **概览**

完成本教程后，你将拥有一个具备以下功能的导航栏：

- 桌面端、平板端和移动端三种响应式布局
- 菜单项的悬停交互
- 可自定义的文字和链接属性
- 适用于移动端的可折叠汉堡菜单

## **步骤 1：创建 Header 组件**

1. 选中整个导航栏区域。
2. 右键单击并选择 **“创建组件”**。
3. 将组件命名为 **“Header”**。

![image.png](https://fsu.creght.com/user/3/mjlfcuowKpM__image.png)

## **步骤 2：创建可复用的菜单项组件**

### 1\. 创建菜单项组件

> 为了保持设计一致，我们会将每个菜单项制作成可复用组件。

1. 选中一个菜单项，例如“首页”。
2. 将它包裹在一个 **Frame** 中，然后右键单击并选择 **“添加 Stack”**。

![image.png](https://fsu.creght.com/user/3/mjlfcuWZRLd__image.png)

3. 右键单击菜单项容器，选择 **“创建组件”**，并将它命名为 **“NavItem”**。

![image.png](https://fsu.creght.com/user/3/mjlfcNGJwnm__image.png)


### 2\. 添加悬停交互

1. 进入 **NavItem** 组件的编辑模式。
2. 选中根组件并添加一个 **Hover 变体**。
3. 在悬停状态下，将文字颜色改为黑色，也可以使用你喜欢的其他颜色。

![image.png](https://fsu.creght.com/user/3/mjlXrmbSGWo__image.png)


### 3\. 创建组件变量

### 文字变量

1. 选中 **NavItem** 组件内的文字图层。
2. 在右侧面板中右键单击文字属性，然后选择 **“创建变量”**。

![image.png](https://fsu.creght.com/user/3/mjlXrspbgNp__image.png)

3. 为变量重新命名，以便识别和管理。

![image.png](https://fsu.creght.com/user/3/mjlXrtSPOlt__image.png)


### 链接变量

1. 选中 **NavItem** 组件的外层容器。
2. 在右侧面板中找到 **链接** 属性，然后单击 **“+”** 图标。
3. 右键单击链接属性并选择 **“创建变量”**。

![image.png](https://fsu.creght.com/user/3/mjlXrwjmHiZ__image.png)


## **步骤 3：应用菜单项组件**

1. 返回 **Header** 组件。
2. 使用 **NavItem** 组件替换所有静态菜单项。
3. 为每个菜单项设置各自的文字和链接值。

![image.png](https://fsu.creght.com/user/3/mjlXrxkasmo__image.png)


预览设计——当鼠标悬停在菜单项上时，文字颜色会按预期变化。

![](https://fsu.creght.com/user/3/mjlXeslzJKt__nav_preview1.gif)

**效果演示**

### **为什么要将菜单项组件化？**

- **一次更新，处处生效**：只需修改一次样式，所有菜单项都会同步更新，让设计始终保持一致。
- **灵活配置**：将文字、链接等动态内容设置为变量，可以更快地迭代设计。

## **步骤 4：创建移动端导航栏**

### 1\. 添加移动端导航元素

1. 单击左上角的 **“+”** 图标，然后切换到 **弹窗** 面板。
2. 选择 **“导航弹窗”**，并将它拖到右侧按钮旁边。

![image.png](https://fsu.creght.com/user/3/mjlXrmbSGWo__image.png)


### 2\. 设计移动端导航内容

1. 选中菜单和下载按钮图层，按 **Ctrl + C** 复制，然后将它们粘贴到弹窗容器中。

![image.png](https://fsu.creght.com/user/3/mjlXrzbxLCh__image.png)

2. 将菜单布局从横向排列改为纵向排列。

![image.png](https://fsu.creght.com/user/3/mjlXrEGJsPH__image.png)


### 3\. 设置组件变体

1. 选中 **Header** 组件，然后单击 **“\+ 变体”** 创建一个新变体。

![image.png](https://fsu.creght.com/user/3/mjlXrHuKoEL__image.png)

2. 将这个新变体命名为 **“Mobile”**。

![image.png](https://fsu.creght.com/user/3/mjlXrJYCBSN__image.png)

3. 在 **Primary** 变体（默认变体）中，隐藏移动端导航组件。

![image.png](https://fsu.creght.com/user/3/mjlXrPxAdGh__image.png)

4. 在 **Mobile** 变体中，显示移动端导航，并隐藏常规菜单和下载按钮。

![image.png](https://fsu.creght.com/user/3/mjlXrWOWxBb__image.png)


## **步骤 5：创建平板端变体（可选）**

如果你的设计需要专门的平板端布局，请按以下步骤操作：

1. 添加另一个变体，并将它命名为 **“iPad”**。
2. 设置宽度，例如 810px。

![image.png](https://fsu.creght.com/user/3/mjlXseDtFCX__image.png)

3. 将菜单项之间的间距调整为 **32px**。
4. 同时将右侧容器的间距更新为 **32px**。

![image.png](https://fsu.creght.com/user/3/mjlXsnTbcQt__image.png)

## **步骤 6：应用响应式变体**

为不同断点指定对应的变体：

- **桌面端** → Primary
- **平板端** → iPad

![image.png](https://fsu.creght.com/user/3/mjlXsMwPNvi__image.png)

- **移动端** → Mobile

![image.png](https://fsu.creght.com/user/3/mjlXsVHWvUB__image.png)


预览设计——现在，你的响应式导航栏应该能够在不同设备上自动切换到合适的布局。

![](https://fsu.creght.com/user/3/mjlWTbSKGGj__nav_preview.gif)

## **最终效果**

完成后，你的响应式导航栏将具备以下特性：

- 桌面端采用横向布局
- 平板端使用调整后的间距
- 移动端使用带有纵向导航的汉堡菜单
- 所有菜单项都具备悬停交互
- 文字和链接属性均可灵活自定义

至此，你已经通过清晰的组件化工作流程构建了一套完整的响应式导航系统。它高效、可复用，并且易于维护。

本文目录

- [概览](#概览)
- [步骤 1：创建 Header 组件](#步骤-1-创建-header-组件)
- [步骤 2：创建可复用的菜单项组件](#步骤-2-创建可复用的菜单项组件)
- [1\. 创建菜单项组件](#1-创建菜单项组件)
- [2\. 添加悬停交互](#2-添加悬停交互)
- [3\. 创建组件变量](#3-创建组件变量)
- [文字变量](#文字变量)
- [链接变量](#链接变量)
- [步骤 3：应用菜单项组件](#步骤-3-应用菜单项组件)
- [为什么要将菜单项组件化？](#为什么要将菜单项组件化)
- [步骤 4：创建移动端导航栏](#步骤-4-创建移动端导航栏)
- [1\. 添加移动端导航元素](#1-添加移动端导航元素)
- [2\. 设计移动端导航内容](#2-设计移动端导航内容)
- [3\. 设置组件变体](#3-设置组件变体)
- [步骤 5：创建平板端变体（可选）](#步骤-5-创建平板端变体-可选)
- [步骤 6：应用响应式变体](#步骤-6-应用响应式变体)
- [最终效果](#最终效果)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![微信客服](https://fsu.creght.com/site/2066727200882692096/1785119134612__image.png)

微信客服

## 链接

- [价格](/price.md)
- [解决方案](/solution.md)
- [客户案例](/customers.md)
- [帮助中心](/help.md)
- [联系我们](/contact.md)
- [更新记录 & 博客](/blogs.md)
- [退款说明](/tuikuan.md)

## 资源

- [全部资源](/resources.md)
- [模板](/templates.md)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/design/effects.md)
- [Figma to Creght](/figma2creght.md)
- [API](/api.md)

## 产品对比

- [对比上线了](/creght-vs-sxl.md)
- [对比凡科建站](/creght-vs-fkw.md)
- [自己写代码 vs Creght](/compare/self-coding.md)
- [外包 vs 自己做](/compare/outsourcing.md)

## 协议

- [用户协议](/legal/terms.md)
- [隐私政策](/legal/privacy.md)
- [可接受使用政策](/legal/acceptable-use.md)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)