如何使用高级导航组件？

高级导航组件

 

【组件简介】 高级导航组件是一个展示网站核心导航的模块，通过网站导航将网站主要的一些页面进行层级的划分并将其关联起来，方便用户快速在页面与页面之间跳转。通过分别编辑PC端和手机端的导航风格可以实现千变万化的导航展示效果。 

 

【应用场景】一般添加到网站的页头区域，因为页头区域是整个网站通用的，这样整个网站就可以通用这一个导航，在一个页面增加/删除/修改导航，其他页面也会一起变化。高级导航组件的设置项中支持单个或批量添加站内页面、外部链接、页面锚点、产品分类、文章分类多种类型的页面作为导航，可以拖动调整导航的层级以及调整导航的顺序。高级导航组件的风格中支持选择多种主导航风格、下拉菜单风格以及自定义导航的高度、宽度、导航颜色、文字颜色等多种设置项。高级导航组件堪称为一个导航编辑器。

 

【使用方法】

1、如何添加高级导航组件？

第一步：找到添加组件按钮。把鼠标放到需要添加组件的区域，在此区域四周的组件的上侧或下侧会出现小水滴（即添加组件按钮），把鼠标放到小水滴上，会出现蓝色或黑色的横线（蓝色代表增加新的一行，黑色横线代表在同一行里增加一行），若横线所在区域是要添加此组件的区域，则单击小水滴，弹出添加组件框；

 

第二步：添加高级导航组件。在基础组件中，单击“高级导航”组件，弹出“设置高级导航”对话框。选择好导航之后可以先单击“保存”按钮即可添加网站高级导航组件。

2、如何设置高级导航组件（设置内容和风格）？

添加了高级导航组件，可以对组件内容和风格进行设置。把鼠标放到网站导航内容区域，组件左上角出现组件名称“高级导航”，把鼠标放到这四个字眼上，右侧出现一排小按钮，单击第一个即设置按钮，弹出设置高级导航栏对话框。

内容标签：

1）如何添加一级导航？

内容--添加导航：单击“添加导航”按钮，可以添加导航。

可以在站内页面、外部链接、页面锚点、产品分类、文章分类、faq分类、下载分类、图册分类单独选择。如在此都没有所需导航，可点击右边“添加自定义页面”，即出现页面设置界面，可根据所需填写页面名称，具体可点击蓝色字条“设置页面名称时需要注意什么”了解设置页面名称注意点与方法，页面URL自行生成，同时根据需要可以设置访问权限；

所有需要显示在网站导航上的都选好之后，单击此“添加导航内容”对话框右下角的“保存”按钮，所有的导航都会显示在“设置导航栏”对话框的“导航管理”下面。这时可以先单击“保存”按钮，即可添加网站导航组件。

2）如何添加二级导航？如何添加三级导航？

内容--添加子导航：最多支持三级导航，多了也不利于网站推广。单击要添加二级导航的一级导航后面的加号+，如下图所示，二级/三级导航可添加的类型与一级导航的类型是一样的；

3）如何操作显示导航或隐藏导航？

添加的导航若暂时不需要显示在导航上，可单击小眼睛按钮隐藏； 

4）如何编辑导航？

  单击编辑按钮 可以进入编辑导航，在编辑导航中可以选择导航类型，选择链接，修改导航名称以及导航图标；

导航类型--站内页面

站内页面的设置包括系统页面和自定义页面两种类型。

您可以在“选择一个站内页面”选择一个站内页面，导航名称会根据您选择的站内页面自动更改，如果您需要在点击这个导航时令其在新窗口打开，您可以在“新窗口打开链接”前的方框上打钩，反之无需打钩。您可以在“导航图片”内添加图片（更适应于下拉菜单），首次添加这张图片，需要通过“本地上传”按钮传上来；若之前传过的图片，默认是保存在资料库里的，这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片；如果误操作或不再需要导航图片点击“清除”即可；

站内页面-->选择页面：

 

站内页面-->新建页面：

在设置站内页面中也可以选择新建页面来进行自定义页面的相关设置。

导航类型--外部链接

包括实际存在的链接和空链接（空链接可以实现点击此导航时页面没有任何反应的需求）两种类型。

点击选择外部链接的URL后蓝色的“新增链接”，即在URL栏中出现http://，根据需要，您可以填完整URL栏及导航名称，如果您需要在点击这个导航时令其在新窗口打开，您可以在“新窗口打开链接”前的方框上打钩，反之无需打钩。根据需要，您可以点击“选择图标”选择合适的导航图标；也可以在“导航图片”内添加图片，首次添加这张图片，需要通过“本地上传”按钮传上来；若之前传过的图片，默认是保存在资料库里的，这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片；如果误操作或不再需要导航图片点击“清除”即可；
外部链接-->新增链接：

外部链接-->新增空链接：

点击选择外部链接的URL后蓝色的“新增空链接”，即在URL栏中出现javascript:;，此URL不需要修改；如果您需要在点击这个导航时令其在新窗口打开，您可以在“新窗口打开链接”前的方框上打钩，反之无需打钩。根据需要，您可以点击“选择图标”选择合适的导航图标；也可以在“导航图片”内添加图片，首次添加这张图片，需要通过“本地上传”按钮传上来；若之前传过的图片，默认是保存在资料库里的，这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片；如果误操作或不再需要导航图片点击“清除”即可；

导航类型--页面锚点：
根据需要您可以在已有的锚点中选择，导航名称自动生成也可根据需要修改；如果您需要在点击这个导航时令其在新窗口打开，您可以在“新窗口打开链接”前的方框上打钩，反之无需打钩。根据需要，您可以点击“选择图标”选择合适的导航图标；也可以在“导航图片”内添加图片，首次添加这张图片，需要通过“本地上传”按钮传上来；若之前传过的图片，默认是保存在资料库里的，这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片；如果误操作或不再需要导航图片点击“清除”即可；

导航类型--产品分类：

根据需要您可以在已有的产品分类中选择，导航名称自动生成也可根据需要修改；如果您需要在点击这个导航时令其在新窗口打开，您可以在“新窗口打开链接”前的方框上打钩，反之无需打钩。根据需要，您可以点击“选择图标”选择合适的导航图标；也可以在“导航图片”内添加图片，首次添加这张图片，需要通过“本地上传”按钮传上来；若之前传过的图片，默认是保存在资料库里的，这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片；如果误操作或不再需要导航图片点击“清除”即可；

导航类型--文章分类：

根据需要您可以在已有的文章分类中选择，导航名称自动生成也可根据需要修改；如果您需要在点击这个导航时令其在新窗口打开，您可以在“新窗口打开链接”前的方框上打钩，反之无需打钩。根据需要，您可以点击“选择图标”选择合适的导航图标；也可以在“导航图片”内添加图片，首次添加这张图片，需要通过“本地上传”按钮传上来；若之前传过的图片，默认是保存在资料库里的，这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片；如果误操作或不再需要导航图片点击“清除”即可；

导航类型--faq分类：

根据需要您可以在已有的faq分类中选择，导航名称自动生成也可根据需要修改；如果您需要在点击这个导航时令其在新窗口打开，您可以在“新窗口打开链接”前的方框上打钩，反之无需打钩。根据需要，您可以点击“选择图标”选择合适的导航图标；也可以在“导航图片”内添加图片，首次添加这张图片，需要通过“本地上传”按钮传上来；若之前传过的图片，默认是保存在资料库里的，这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片；如果误操作或不再需要导航图片点击“清除”即可；

导航类型--下载分类：

根据需要您可以在已有的下载分类中选择，导航名称自动生成也可根据需要修改；如果您需要在点击这个导航时令其在新窗口打开，您可以在“新窗口打开链接”前的方框上打钩，反之无需打钩。根据需要，您可以点击“选择图标”选择合适的导航图标；也可以在“导航图片”内添加图片，首次添加这张图片，需要通过“本地上传”按钮传上来；若之前传过的图片，默认是保存在资料库里的，这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片；如果误操作或不再需要导航图片点击“清除”即可；

导航类型--图册分类：

根据需要您可以在已有的图册分类中选择，导航名称自动生成也可根据需要修改；如果您需要在点击这个导航时令其在新窗口打开，您可以在“新窗口打开链接”前的方框上打钩，反之无需打钩。根据需要，您可以点击“选择图标”选择合适的导航图标；也可以在“导航图片”内添加图片，首次添加这张图片，需要通过“本地上传”按钮传上来；若之前传过的图片，默认是保存在资料库里的，这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片；如果误操作或不再需要导航图片点击“清除”即可；

5）内容--删除：单击删除按钮  可以把此导航从网站导航上删掉。

6）内容--调整导航层级或顺序：可以单击鼠标左键拖动调整导航的层级以及调整导航的顺序

风格标签：

1）风格--选择主导航风格：单击“风格“即可切换到风格标签，在这里可以选择主导航（即一级导航）风格

风格--主导航风格的编辑：在导航设置中可以根据需要选择导航的位置，也可以选择导航宽度的自适应状态。

在编辑样式中可以设置导航条，导航项的背景，字体的样式，颜色，大小以及鼠标进行操作后的动作样式。

编辑样式--编辑样式：可以给这个组件添加颜色背景或图片背景，也可以选择背景图片的平铺模式、平铺位置、背景尺寸，不同的选择可以有不同的展示效果，可以分别点一下试一下。

编辑样式--文字设置：文字的字体、大小、间距、行高、对齐方式、字体样式等

编辑样式--导航条设置：在这里可以设置组件边框的颜色、样式（实线、虚线、双实线、点）、边框的粗细、边框的圆角。

编辑样式--导航项设置：在这里可以设置组件边框的颜色、样式（实线、虚线、双实线、点）、边框的粗细、边框的圆角。

编辑样式--下拉箭头设置：导航栏下标的设置

编辑样式--阴影效果：增加导航栏的立体效果

编辑样式--动作样式：鼠标按下，选中，滑动之后的导航项的效果

2）风格--选择下拉菜单风格：在这里可以选择下拉菜单风格。以下是下拉菜单风格的展示。

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

并且在设置之后可以另存为新风格。

3、如何复制组件？

页头或页脚区域的组件每个页面都是共用的，所以，若复制高级导航组件，复制的组件将会在当前组件下方展示出来，可拖动调整位置或继续修改组件！复制过来的组件与原组件是两个独立的个体，修改其中一个，另外一个不受影响；
 

5、如何删除组件？

单击删除组件按钮，可以删除这个组件。

6、如何恢复组件？

被删除的组件默认被放到了组件回收站里。单击”设置“--》”组件回收站“，找到这个组件，单击后面的”还原“按钮，即可把这个组件还原到原页面。