云社区 博客 博客详情
云社区 博客 博客详情

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

JohnnyKou 发表于 2019-03-10 16:21:36 03-10 16:21
JohnnyKou 发表于 2019-03-10 16:21:36 2019/03/10
0
3

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

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

  • 手机快捷导航

  • 导航栏控件 - 图表类型

  • 导航栏控件 - 横向类型

  • 导航栏控件 - 纵向类型

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

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

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

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

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

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


使用高级导航栏插件

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

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

常规的导航栏控件:

图标 类型

推荐程度 ⭐️⭐️⭐️

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

横向 类型

推荐程度 ⭐️⭐️⭐️

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

纵向 类型

推荐程度 ⭐️

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

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

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

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

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

热区可使用各种形状

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

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

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

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


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

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


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

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

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

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

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

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

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

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

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

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


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

登录后可下载附件,请登录或者注册

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

评论 (0)


该篇博文已经被设置为禁止评论!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消