响应式导航栏制作

本教程将指导您如何使用组件化思维创建响应式导航栏，实现一次设计，多端适配的效果。

概述

我们将创建一个包含以下特性的导航栏：

• 桌面、平板和移动端三种视图
• 菜单悬停交互效果
• 可自定义的菜单项文本和链接
• 移动端汉堡菜单

第一步：创建Header组件

1. 选中整个导航区域，右键选择"创建组件”
2. 将组件命名为"Header"

第二步：创建可复用的菜单项组件

1. 创建可复用菜单项

   为了让菜单项的样式复用,我们将菜单项变成组件

2. 为单个菜单项（如"首页"）添加一个Frame,鼠标右键，选择“添加Stack”选项

   

   3. 右键菜单项容器，选择"创建组件"并命名为"NavItem”

   

2. 添加悬停效果

1. 进入NavItem组件编辑模式

2. 选中根组件，添加"Hover"变形

3. 在Hover 变形下将文本颜色改为黑色（或您选择的颜色）

3. 创建组件变量

创建文本变量

 1. 选中NavItem组件中的文本层

 2. 在右侧面板的文本属性前右键，选择"创建变量”

3. 修改变量名称以便于识别和管理

创建链接变量

1. 选中NavItem外层容器组件

2. 在右侧面板中找到链接属性，点击后面的"+"号

3. 右键链接属性，选择"创建变量”

第三步：应用菜单项组件

1. 返回主Header组件
2. 用NavItem组件替换所有菜单项
3. 为每个菜单项设置不同的文本和链接变量值

我们点击预览，查看真实效果，鼠标悬停到菜单项上，就会出现文本颜色的变化颜色的变化

菜单项组件化的优势

• 一改全改：一次样式调整，所有菜单项同步更新，保证设计一致性。
• 灵活配置：将动态内容（如文本、链接）设为变量，即可快速生成不同菜单项。

第四步：创建移动端导航

1. 添加移动导航元素

1. 点击左上角的“+”图标，切换到弹窗面板下

2. 选择“导航弹窗”，拖拽到右侧按钮右侧，如下图所示

2. 设计移动端导航 overlay下的内容

1. 选中菜单和下载按钮，Control+C,复制图层，然后粘贴到弹窗下的容器

2. 将菜单布局从水平改为垂直布局

3. 设置组件变体

1. 选中Header组件，点击“+变形”，新添加的组件变形；

2. 重命名为“mobile”

3. 在默认变体(Primary)中隐藏 手机导航组件

4. 在Mobile组件变形下，显示手机导航组件，隐藏常规导航和下载按钮

第五步：创建平板端适配 （根据具体的场景，试情况添加此变形）

1. 添加另一个组件变体，命名为"Ipad”

2. 设置适当的宽度(如810px)

   

3. 调整菜单项之间的间距为32px

4. 调整右侧菜单容器的间距也为32px

   

第六步：应用响应式变体

为不同断点设置不同的组件变体：

• 桌面端：使用Primary变体（默认）

• 平板端：使用Ipad变体

  

• 移动端：使用Mobile变体

  

最后预览一下，响应式导航组件的效果：

实现效果

完成后的导航栏将具有以下特性：

• 桌面端显示水平导航
• 平板端调整间距适应中等屏幕
• 移动端显示汉堡菜单，点击后展开垂直导航
• 所有菜单项具有悬停效果
• 易于自定义文本和链接

通过本教程，您已经创建了一个完整的响应式导航系统，可以轻松适应不同设备，同时保持了高效的工作流程和易于维护的组件结构。