【网页设计】自适应 | 支持全屏导航功能

2021-05-08
来源:羽薇网

【使用场景】

自适应网站实现汉堡包式展开的全屏导航,提高网站视觉效果。


【功能说明】

1. 鼠标悬停导航栏,点击工具栏中“编辑样式”按钮,在“导航栏样式”中选择第二项,即可开启全屏导航模式。


2. 选择是否隐藏一级栏目,设置导航图标、展开方向等细节, 点击“编辑展开内容”按钮,即可设计全屏展开后的样式。


3. 全屏样式设计可选择添加模块或素材,编辑完毕后点击右上方的“×”按钮即可退出编辑模式。


4. 全屏导航实现的效果可参考下图。


样式一:


样式二:


样式三:


样式四:


动图教程如下:

AAEIABADGAAgw82thAYoxNW8twUwpQo4xQU.gif

▲ 全屏导航设置教程



分享