web端常见导航设计

news2024/10/7 14:30:50

一、导航的定义
导航作为网站或者平台的骨架,是产品设计中不容忽视的一环导航是内容或者功能的定位、导向与通道。

二、导航分类
遵循导航层级结构,包括全局导航和局部导航
全局导航往往指页眉和页脚,存在于网站的大部分页面,便于用户随时跳转
局部导航是是更深层级的导航,不作用于全局,存在于特定的功能区,可分布在页面各部分

三、常见导航

1.顶部导航-标签式
在这里插入图片描述

说明:导航水平分布;导航区域固定;标签平铺展示,点击进入相应界面;

2、顶部导航-下拉式
在这里插入图片描述
在这里插入图片描述
说明:导航水平分布;鼠标悬浮下拉,可选择二级导航或三级导航,跳转相应的界面

3、顶部导航-瞄点定位式

在这里插入图片描述
在这里插入图片描述

说明:1、点击顶部导航菜单,页面快速滚动到对应的位置
2、回显效果:页面滚动到对应内容时,在顶部导航菜单中显示,可以清晰的知道阅读的位置。

4、左侧导航-抽屉式
在这里插入图片描述
在这里插入图片描述
说明:点击左上方折叠按钮,左侧划出导航栏

5、左侧导航-瞄点定位
在这里插入图片描述
在这里插入图片描述
说明:1、点击左侧导航菜单,页面快速滚动到对应的位置
2、回显效果:页面滚动到对应内容时,左侧导航菜单中显示,可以清晰的知道阅读的位置。

6、底部导航-标签式

在这里插入图片描述
说明:导航平铺于页面底部,适用于趣味性较强,用户操作性较强的网站

7、全屏导航-抽屉式

在这里插入图片描述
在这里插入图片描述

说明:点击上方折叠按钮,下拉展开导航(全屏显示);

预览更多的导航模式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/27903.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

游戏引擎概述-Part1

一、简述自己的学习心路历程 自从业UNITY以来已经有4个月多了,回想起来自己从工作以来就很少写博客了,也算督促一下自己,回想自己从最早的Unity开始,入手C#和编辑器、Unity开发界面,再到自己学一些Unity的小项目…

有效学习,通过PMP考试

但是我们时间有限,如何有效利用这些资料,花最少时间通过考试,是个关键问题。 课程主要的资料包括: PMBOK。官方指定用书,考试知识点来自PMBOK。 汪博士解读PMP考试。考试参考书,比PMBOK解析得更清楚&…

Qt-FFmpeg开发-视频播放(3)

Qt-FFmpeg开发-视频播放【软解码 OpenGL显示RGB图像】 文章目录Qt-FFmpeg开发-视频播放【软解码 OpenGL显示RGB图像】1、概述2、实现效果3、FFmpeg软解码流程4、主要代码4.1 解码代码4.2 OpenGL显示RGB图像代码5、完整源代码更多精彩内容👉个人内容分类汇总 &…

Bio-Helix 艾美捷IRIS11预染蛋白Markers基参及相关研究

IRIS11预染色蛋白梯是11种分子量为3至60kDa的预染色蛋白的组合。11种重组蛋白与蓝色发色团共价偶联,而2条70kDa和260kDa的红色带、一条15kDa的绿色带和一条新设计的60kDa的孔雀绿色带作为参考带。IRIS11预拉伸蛋白质阶梯在SDS聚丙烯酰胺凝胶电泳过程中跟踪蛋白质的大…

[附源码]java毕业设计新冠疫苗线上预约系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

【测试沉思录】17. 性能测试中的系统资源分析之四:网络

作者:马海琴 编辑:毕小烦 计算机网络,就是通过光缆、电缆、电话线或无线通讯将两台以上的计算机互连起来的集合,包括广域网、城域网、局域网和无线网。 计算机网络是传输信息的媒介。我们常说的千兆网,是指网络带宽为…

openssl中SM2、SM3、SM4使用实例

目录 openssl的版本如下: SM3使用实例 1. SM3的扎凑实例 SM2使用实例 1. 生成SM2密钥对 2.查看SM2密钥对 3.生成自签名证书 4.查看证书详情 5.私钥签名消息 6.证书验证消息签名 SM4 使用实例 openssl的版本如下: SM3使用实例 SM3是中华人民共…

前端框架 Nextjs 实现React SEO优化

目录 一、Nextjs框架创建React项目 二、路由的使用 1、静态路由 2、动态路由 3、Link路由跳转 4、Api路由 5、Api动态路由 三、Nextjs中加载js脚本 四、Nextjs中加载图片 五、Nextjs的公共布局 六、Pages的其他特性 一、Nextjs框架创建React项目 快速入门 | Next.…

YOLOv5~目标检测模型精确度

还是yolo5的基础啊~~ 一些关于目标检测模型的评估指标:IOU、TP&FP&FN&TN、mAP等,并列举了目标检测中的mAP计算。 指标评估(重要的一些定义) IOU 也称重叠度表示计算预测回归框和真实回归框的交并比,计算公式如下: TP&FP&FN&…

2022CTF培训(二)Hook进阶反调试

附件下载链接 Hook进阶 更精准的 Inline Hook 要求 实现防止任务管理器对某进程自身的结束要求不影响任务管理器结束其它进程的功能 Dll 注入程序编写 提权 主要过程如下: 首先,程序需要调用OpenProcessToken函数打开指定的进程令牌,并获取TOKEN…

【架构设计】作为架构师你应该掌握的画图技术

1.前言 大家知道,架构的过程其实就是建模的过程,那自然离不开架构图。那么,我们先来看几个问题。 (1)什么是架构图? 架构图 架构 图,用图的形式把系统架构展示出来,配上简单的文…

Rust学习笔记——安装、创建、编译、输入输出

目录 一.安装 二.创建 三.编译 四.输入输出 (一).输出hello world (二).输入 一.安装 Rust Programming Language (rust-lang.org),这是Rust官网。 直接下载自己对应系统版本即可,小编是linux版。 下…

ARP协议map4(3层网络层的协议)

数据来源 一、广播与广播域概述 1、广播域广播域 广播:将广播地址做为目标地址的数据帧 广播域:网络中能接收到同一个广播所有节点的集合(广播域越小越好,这样通信效率更高) 下图每个圈都是一个广播域,说…

通关算法题之 ⌈数组⌋ 上

滑动窗口 3. 无重复字符的最长子串 给定一个字符串 s ,请你找出其中不含有重复字符的 最长子串 的长度。 输入: s "abcabcbb" 输出: 3 这就是变简单了,连 need 和 valid 都不需要,而且更新窗口内数据也只需要简单的更新计数器 …

(续)SSM整合之SSM整合笔记(ContextLoaderListener)(P179-188)

一 准备工作 1 新建模块ssm com.atguigu.ssm 2 导入依赖 <packaging>war</packaging><properties><spring.version>5.3.1</spring.version> </properties><dependencies><dependency><groupId>org.springframew…

Day10--初步实现自定义tabBar的效果

承接上文配置信息之后。 1.添加tabBar代码文件 我的操作&#xff1a; 1》在文件区新建一个custom-tab-bar文件夹 2》并在其中新建一个index组件 3》文件区展示图 4》最终的效果图&#xff1a; **************************************************************************…

界面组件DevExpress Reporting v22.1亮点 - 报表设计器功能全面升级

DevExpress Reporting是.NET Framework下功能完善的报表平台&#xff0c;它附带了易于使用的Visual Studio报表设计器和丰富的报表控件集&#xff0c;包括数据透视表、图表&#xff0c;因此您可以构建无与伦比、信息清晰的报表。 DevExpress Reporting v22.1版本已正式发布&am…

数据结构之二叉树(前提知识)

文章目录前言**一、树****二、树的相关概念****节点的度****叶节点****分支节点****子节点****父节点****兄弟节点****树的度****节点的层****树的高度****祖先****子孙****森林****三、树的表示****孩子表示法****左孩子右兄弟法****双亲表示法****四、树在实际中的应用****总…

iPhone/iPad屏幕投屏镜像到PC或Mac上面教程分享

AirServer是一款Mac应用程序&#xff0c;可将AirPlay / AirTunes的音频&#xff0c;视频&#xff0c;照片&#xff0c;幻灯片和镜像接收功能添加到Mac电脑。它可以实现将iPhone手机或Mac电脑上的媒体文件以及其他操作投射到Mac电脑上。使用AirServer&#xff0c;可以从Mac&…

如何利用DGL官方库中的rgcn链接预测代码跑自己的数据集(如何在DGL库的链接预测数据集模块定义自己的数据集类)

最近在忙我的省创&#xff0c;是有关于知识图谱的&#xff0c;其中有一个内容是使用rgcn的链接预测方法跑自己的数据集&#xff0c;我是用的dgl库中给出的在pytorch环境下实现rgcn的链接预测的代码&#xff0c;相关链接贴在这里&#xff1a; dgl库中关于rgcn的介绍文档 dgl库…