上海H5建站导航菜单模块的样式及使用方法

上海H5建站导航模块常展示于网站页头，使浏览者快速找到他们需要的信息点击进入查看。常把一些重要的页面用导航来显示，方便客户快速找到页面，如产品中心、联系我们等页面。

实现效果

• PC效果：
  

手机端效果：

一、PC端导航功能

1.1 添加导航的路径

• 进入编辑页面——点击添加模块——基础——栏目，拖动模块到页面相应的位置
  

1.2、导航展示样式的调整

1. 自定义风格：可自行填写代码更改导航样式
   
2. 管理导航：快速设置栏目
   
3. 色系：快速设置导航的主色调
   
4. 选择菜单：设置一级菜单是否选择显示全部，自定义可勾选需要显示的一级菜单
   
5. 子菜单：是否显示二、三级菜单
   
6. 导航：新增上级栏目不可点击功能，其作用为存在二级栏目时，一级栏目不可点击；存在三级栏目时，一二级栏目均无法点击
   
   

1.3 导航设置

• 路径：左侧菜单——导航
  
• 修改导航名称及链接的地址。
  

1.4、效果演示图

• 1.鼠标悬停上划线展示
  

• 2.鼠标悬停下划线展示
  

• 3.鼠标悬停背景色切换
  

• 4.椭圆型背景悬停项
  

• 5.方块型背景悬停项
  

• 6.鼠标悬停边框显示
  

• 7.带L型二级菜单
  

• 8.传统下拉菜单
  

• 9.横向半透明二级菜单
  

• 10.圆点二三级菜单
  

• 11.L型二三级菜单
  

• 12.带副标题二三级菜单
  

• 13.面包屑侧边导航栏
  

• 14.全屏导航
  

二、手机端添加导航的操作路径

• 2.1、点击菜单——微导航
  

• 2.2 演示效果
  

• 风格1：
  

• 风格2:
  

• 风格3：
  

• 风格4：
  

• 风格5：
  

• 风格6：
  

• 风格7：
  

• 风格8：
  

• 风格9：
  

常见问题：

1. 问：导航除了现有的样式可以变吗
   答：现有的样式不能满足可以使用自定义风格自行添加代码。
   
   
2. 问：手机导航可以显示二级菜单吗？
   答：可以，选择例如风格8的样式。