ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、视频、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
导航模块 功能作用 * 导航模块常展示于网站页头,使浏览者快速找到他们需要的信息点击进入查看。常把一些重要的页面用导航来显示,方便客户快速找到页面,如产品中心、联系我们等页面。 实现效果 * PC效果: ![](http://help.yz168.com/comdata/16311/201711/2017110715564121de1d.png) 手机端效果: ![](http://help.yz168.com/comdata/16311/201711/201711071734215de6b0.png) 一、PC端导航功能 1.1 添加导航的路径 * 进入编辑页面——点击添加模块——基础——栏目,拖动模块到页面相应的位置 ![](http://cdn.img-sys.com/comdata/16311/201811/201811150922195d3a62.png) 1.2、导航展示样式的调整 ![](http://cdn.img-sys.com/comdata/16311/201811/20181115092946cb8be4.png) 1. 自定义风格:可自行填写代码更改导航样式 2. 管理导航:快速设置栏目 3. 色系:快速设置导航的主色调 4. 选择菜单:设置一级菜单是否选择显示全部,自定义可勾选需要显示的一级菜单 5. 子菜单:是否显示二、三级菜单 6. 导航:新增上级栏目不可点击功能,其作用为存在二级栏目时,一级栏目不可点击;存在三级栏目时,一二级栏目均无法点击 1.3 导航设置 * 路径:左侧菜单——导航 * 修改导航名称及链接的地址。 ![](http://cdn.img-sys.com/comdata/16311/202007/20200725171847f1be24.png) ![](http://cdn.img-sys.com/comdata/16311/202007/202007251718474a3b70.png) 1.4、效果演示图 * 1.鼠标悬停上划线展示 ![](http://cdn.img-sys.com/comdata/16311/201711/201711071556417fb82c.png) * 2.鼠标悬停下划线展示 ![](http://cdn.img-sys.com/comdata/16311/201711/2017110715564121de1d.png) * 3.鼠标悬停背景色切换 ![](http://cdn.img-sys.com/comdata/16311/201711/201711071556410b71e1.png) * 4.椭圆型背景悬停项 ![](http://cdn.img-sys.com/comdata/16311/201711/20171107155641d5e17e.png) * 5.方块型背景悬停项 ![](http://cdn.img-sys.com/comdata/16311/201711/20171107155641ec5a49.png) * 6.鼠标悬停边框显示 ![](http://cdn.img-sys.com/comdata/16311/201711/20171107155641fadad3.png) * 7.带L型二级菜单 ![](http://cdn.img-sys.com/comdata/16311/201711/2017110715564187b828.png) * 8.传统下拉菜单 ![](http://cdn.img-sys.com/comdata/16311/201711/20171107155641ad0d9a.png) * 9.横向半透明二级菜单 ![](http://cdn.img-sys.com/comdata/16311/201711/2017110715564208ef40.png) * 10.圆点二三级菜单 ![](http://cdn.img-sys.com/comdata/16311/201711/20171129102412a8b49d.png) * 11.L型二三级菜单 ![](http://cdn.img-sys.com/comdata/16311/201711/2017112910241266f083.png) * 12.带副标题二三级菜单 ![](http://cdn.img-sys.com/comdata/16311/201711/20171129102411aa7017.png) * 13.面包屑侧边导航栏 ![](http://cdn.img-sys.com/comdata/16311/201803/201803160931236f22b5.png) * 14.全屏导航 ![](http://cdn.img-sys.com/comdata/16311/201803/20180316093127c700be.png) 二、手机端添加导航的操作路径 * 2.1、点击菜单——微导航 ![](http://cdn.img-sys.com/comdata/16311/202007/20200725170411db6cfb.png) * 2.2 演示效果 * 风格1: ![](http://cdn.img-sys.com/comdata/16311/201711/201711071734208bd879.png) * 风格2: ![](http://cdn.img-sys.com/comdata/16311/201711/20171107173421a48091.png) * 风格3: ![](http://cdn.img-sys.com/comdata/16311/201711/20171107173420bbc260.png) * 风格4: ![](http://cdn.img-sys.com/comdata/16311/201711/2017110717342196c6aa.png) * 风格5: ![](http://cdn.img-sys.com/comdata/16311/201711/201711071734215de6b0.png) * 风格6: ![](http://cdn.img-sys.com/comdata/16311/201711/20171107173845ef07c1.png) * 风格7: ![](http://cdn.img-sys.com/comdata/16311/201711/2017110717384685af76.png) * 风格8: ![](http://cdn.img-sys.com/comdata/16311/201711/20171107173845c6e107.png) * 风格9: ![](http://cdn.img-sys.com/comdata/16311/201711/201711071738467f2db9.png) 常见问题: 1. 问:导航除了现有的样式可以变吗 答:现有的样式不能满足可以使用自定义风格自行添加代码。 2. 问:手机导航可以显示二级菜单吗? 答:可以,选择例如风格8的样式。