【云速建站】不要再纠结手机导航栏样式了!

举报
JohnnyKou 发表于 2019/03/10 16:21:36 2019/03/10
【摘要】 云速建站手机版导航栏有多种实现方式,各有利弊,下面将几种导航的效果逐一展示 手机快捷导航 导航栏控件 - 图表类型 导航栏控件 - 横向类型 导航栏控件 - 纵向类型 用图片+热区组成导航栏 用按钮或图片组成导航栏 文末整理了使用导航栏的几个在注意点,如:导航栏中默认页面类型,自定义类型是什么区别?

云速建站手机版导航栏有多种实现方式,各有利弊,下面将几种导航的效果逐一展示,

  • 手机快捷导航

  • 导航栏控件 - 图表类型

  • 导航栏控件 - 横向类型

  • 导航栏控件 - 纵向类型

  • 用图片+热区组成导航栏

  • 用按钮或图片组成导航栏 

文末整理了使用导航栏的几个在注意点,如:导航栏中默认页面类型,自定义类型是什么区别?

使用手机快捷导航栏控件:

推荐程度 ⭐️⭐️⭐️⭐️⭐️

专为手机优化设计,样式精美,随屏幕移动而浮动,容易点击

image.pngimage.png

image.pngimage.png

image.pngimage.png


使用高级导航栏插件

推荐程度 ⭐️⭐️⭐️⭐️

转为小屏幕做了优化,适合导航栏项较少的情况,项目显示清晰明了

image.png

常规的导航栏控件:

图标 类型

推荐程度 ⭐️⭐️⭐️

配置简单,与PC版导航转换兼容。收起后有圆形方形两种,点击后可展开。

image.png

横向 类型

推荐程度 ⭐️⭐️⭐️

配置简单,与PC版导航转换兼容,一目了然。

image.png

纵向 类型

推荐程度 ⭐️

配置简单,与PC版导航转换兼容。但是占用屏幕空间较多。

image.png

使用图片+热区组成导航栏

推荐程度 ⭐️⭐️⭐️⭐️

通过一张含有多块的图片,在不同区域设置热区,并对每一个热区设置链接

这样设计样式随心所欲,但难度和工作量较大

image.png

热区可使用各种形状

image.png

使用按钮或图片组成导航栏

推荐程度 ⭐️⭐️⭐️⭐️

通过一堆图片或者按钮摆放出导航栏,在对每一个图片或按钮设置链接

这样设计样式随心所欲,但难度和工作量较大

image.png


请使用手机端浏览器预览http://www.fallout5.club/guide,查看各种导航栏样式的简单演示效果

注意示例页面仅展示形式,未做任何优化设计


接下来详细讲解几种导航栏的配置的注意点:

第一个注意点,手机快捷导航栏控件在设置“手机访问中”,需要在手机版编辑界面下才有此选项。手机入门版,标准版和营销版都有此功能

image.png

image.png

第二个注意点,常规导航栏控件,在编辑器+号中,和PC版使用方法一样,同时也支持PC版到手机版的自动转换

image.png

第三个注意点,高级导航栏在插件库中,搜索关键字就可以找到

image.png

第四个注意点,导航栏中默认页面类型,自定义类型是什么意思?

查看导航类型设置,有两种:默认页面类型,自定义类型。

image.png

默认页面类型会把所有页面自动列出来,好处是省事!页面变了,导航栏自动更新

image.png

不想让显示的项目,点击“眼睛”关闭就能隐藏

image.png

另一种自定义类型,可以自己随意调整导航栏内容

image.png

导航栏的名称,个数,指向链接都可自定义配置

image.png


注意点五,任何导航样式在设置链接时操作都一样,如下图所示,可以指向任意站内页面,站外链接,某个文件或邮箱。指向文章或产品列表,或者具体某一个产品或文章等 

image.png

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。