UD5工具箱
导航栏代码生成器使用教程
第一步：选择CSS框架
打开导航栏代码生成器后，首先在页面顶部的「框架与主题」区域选择你需要的CSS框架。工具提供Bootstrap 5和Tailwind CSS两个选项，点击即可切换。如果你的项目已经引入了Bootstrap 5，选择Bootstrap 5框架可以获得更一致的代码风格；如果你偏好Tailwind的工具类方式，或者项目使用Tailwind CSS，则选择Tailwind CSS。两种框架的代码结构差异较大，建议在开始配置前先确定框架选择。
第二步：配置配色方案
在配色方案下拉框中选择导航栏的颜色主题。工具提供了多种预设配色方案，包括经典白、经典黑、蓝色、绿色、红色等。每种方案都预设了背景色、文字颜色和悬停状态的配色。选择方案后，预览区会立即更新，你可以直观地看到配色效果。如果预设方案不能满足需求，可以在生成代码后手动调整CSS类名或颜色值。
第三步：设置品牌名称
在「品牌名称」输入框中填写你的网站或品牌名称。这个名称会显示在导航栏的最左侧，作为网站的身份标识。品牌名称通常会链接到网站首页，你可以在生成代码后根据需要修改链接地址。品牌名称建议简洁有力，一般控制在2-4个单词以内。
第四步：启用功能模块
根据项目需求，开启或关闭以下功能开关：
- 固定在页面顶部：开启后导航栏会在滚动时固定在视窗顶部，适合需要随时访问导航的场景
- 显示搜索框：在导航栏中添加搜索输入框，适合内容型网站
- 显示CTA按钮：添加行动号召按钮，适合营销页面和产品落地页
如果启用了CTA按钮，记得在「CTA按钮文字」输入框中填写按钮的显示文字，如「免费试用」「立即注册」等。
第五步：管理菜单项
点击「添加菜单项」按钮创建导航链接。每个菜单项需要填写两个信息：显示文字（如「首页」「关于我们」）和目标URL（如 /about）。
如果需要创建下拉菜单，将菜单项的类型切换为「下拉菜单」，然后在子项编辑区输入下拉项。子项格式为「显示文本|URL」，每行一个，例如：
- 产品介绍|/products
- 价格方案|/pricing
- 客户案例|/cases
重复添加操作，直到所有导航链接配置完成。建议控制菜单项数量在5-8个以内，过多的菜单项会影响移动端的展示效果。
第六步：预览与调整
在配置过程中，随时观察下方的预览区域。实时预览会展示导航栏在不同配置下的实际效果。如果对某个配置不满意，直接返回修改即可。你可以反复调整直到获得满意的效果。
第七步：复制代码
对预览效果满意后，点击「复制代码」按钮。工具会将完整的HTML代码复制到你的剪贴板。然后打开你的项目文件，将代码粘贴到HTML文档的<body>标签内的合适位置（通常是页面顶部）。
第八步：引入依赖
确保你的项目引入了对应的CSS框架资源。Bootstrap方案需要引入Bootstrap 5的CSS和JS文件（CDN链接或本地文件），Tailwind方案需要在构建配置中包含Tailwind CSS。如果不引入对应框架，生成的代码中的类名将无法生效。
常见问题提示
如果启用了固定导航栏（fixed-top），导航栏会脱离文档流，你需要给页面主体内容添加相应的padding-top以避免内容被导航栏遮挡。Bootstrap方案通常需要添加mt-5或pt-5，Tailwind方案需要添加相应的间距类。