导航可帮助网站浏览者快捷到达需要了解的页面。本文介绍栏目导航的使用。栏目导航中包括横向导航、竖向导航、面包屑、语言切换、手机/PC切换。

各栏目导航区别

  • 横向导航:导航横向展示,可单击跳转至某一位置或其他页面。
  • 竖向导航:导航纵向展示,可单击跳转至某一位置或其他页面。
  • 面包屑:添加此控件后,网站访问者访问路径将可视化,且可选择返回页面。
  • 语言切换:使用多语言功能时,页面上需显示语言切换控件,方便网站浏览者切换浏览语言。如需观看相关操作视频请单击如何实现中英文切换
  • 手机/PC切换:需在同时在PC端、手机端设计器中各添加一个此控件,网站浏览者可浏览两端效果。

添加栏目导航控件

单击设计 > 栏目导航,可选择横向导航、竖向导航、面包屑、语言切换控件或手机/PC切换控件,在设计区适当位置单击,即可完成添加。

导航容器介绍

导航容器:横向导航中的第一个样式为导航容器,相较其他导航设计较为复杂,相应的设计效果也较多。导航容器
说明 样式包括四个部分:
  • 常态:是无互动时的样式。
  • 切换:是鼠标下滑时的样式。
  • 悬停:是鼠标停留时的样式。
  • 选中:是鼠标单击选中后的样式。

设置导航栏目控件

说明 如需观看导航讲解视频请单击导航控件的使用

单击下图所示的设置按钮或者导航按钮,即可弹出用于设置导航的快速设置面板。

  • 样式:可设置导航的常态下、悬停时、选中时的样式。
  • 数据:用于设置导航项的导航名称、上级导航、跳转目标、打开方式及导航图标。
  • 动效:设置导航的动画效果。
  • 排列:设置尺寸和位置。

一键锁定位置

选中全屏控件时,单击像锁一样的图标按钮,可锁定当前位置。

删除当前控件

选中全屏控件时,单击像废纸篓一样的图标按钮,可删除此控件。

应用拓展:如何设置二级导航?

  • 方法一:在添加导航时,选择上级导航可添加指定导航下的二级导航。并可设置当前添加的二级导航。二级导航
  • 方法二:在添加完成后,可采用向指定导航的右下方拖动的方式,将一级导航设置为二级导航。并可编辑当前导航、删除当前导航等。编辑二级

应用拓展:如何设置三级导航

通过标签控件与导航控件的叠加,即可设置三级导航。
  1. 添加指定标签控件:单击设计 > 排版布局,选择带有上下箭头的标签控件,在页面合适位置中添加。
  2. 标签的实质为容器,将导航放置在标签容器中。
    说明 当显示移入标签的提示时,证明在移入标签中。移入标签提示
  3. 设置二级导航。设置二级导航