web端常见导航设计

2023-11-03

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

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

三、常见导航

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

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

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

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

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

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

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

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

6、底部导航-标签式

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

7、全屏导航-抽屉式

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

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

预览更多的导航模式

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

web端常见导航设计 的相关文章

随机推荐

  • 修改MySQL账号的加密规则plugin和命令查看外键信息

    MySQL8之前的版本中加密规则是mysql native password 而在MySQL8之后 加密规则 是caching sha2 password 现在给大家介绍怎么修改用户的加密规则 修改成旧的加密规则 ALTER USER ro
  • Redis 一些基础知识以及数据类型

    3 启动后杂项基础知识 3 1 redis benchmark Redis 自带一个叫 redis benchmark 的工具来模拟N个客户端同时发出M个请求 启动 redis benchmark 可以通过 redis benchmark
  • CTFshow 文件上传 web156

    目录 思路 总结 思路 这次发现把shell php改成png上传的时候 提示文件类型不合规 可能对文件头进行检测 可以利用图片马来写入shell https github com huntergregal PNG IDAT Payload
  • 【element】el-autocomplete的常见用法

    前言 这段时间突然发现很少写博客了 平时都在平衡工作和休息的时间 周末也没动过笔 而且更重要的是我找不到写的内容了 在经历的初始的新知识的学习阶段后 目前的阶段更加转入对于业务的理解 很多模块在不同项目中都是可以复用的 而且工作中发现开发并
  • JS扁平化(flatten)数组

    JS扁平化分类 1 对象扁平化 深度很深的对象 经过扁平化编程深度为 1 的对象 2 数组扁平化 降维过程 多维数组经过扁平化变成一维数组 首先让我们思考一个这样的题目 假如有一个数组 var arr 1 2 3 4 我们怎么能把arr变成
  • 【python 10】python 魔术方法

    文章目录 一 getitem 获取属性 二 setitem 设置属性 三 delitem 删除属性 四 len 求长度 五 call 将类变成一个可调用的函数 python 中以 开头和结尾的成员 都被称为类的特殊成员 特殊属性和方法 一
  • Linux 中的 sysctl 命令及示例

    介绍 Linux管理员使用该命令在运行时sysctl读取或修改内核参数 无需重新启动即可实时控制和修改网络 I O 操作和内存管理设置的选项对于高可用性系统至关重要 了解如何使用该sysctl命令及其选项来动态调整系统性能
  • osgi 引用不同版本的jar_如何把公共模块做成sdk给其他项目引用

    实际开发过程中 会有这么一种需求 我们写的某些代码 不仅我们这个项目需要 其他部门 其他项目可能也需要 我们怎么把我们的项目给别人使用呢 有2种方法 第一种方法 只在本机中的其他项目中使用 不方便给他人使用 也可以发jar包给他人使用 但是
  • MyBatis使用association实现一对一级联查询的几种案例

    我们平日经常会遇到需要级联查询的场景 这里通过案例给大家展示实现过程 我们要查询的用户信息里面有个角色信息 一个用户对应一个角色 我们现在要求查出用户信息的同时 关联查出用户的角色信息 那么这个时候我们可以通过级联属性的方式 将角色中的数据
  • Mybatis拦截器

    MyBatis介绍 MyBatis本是apache的一个开源项目iBatis 2010年这个项目由apache software foundation 迁移到了google code 并且改名为MyBatis 它支持普通 SQL查询 存储过
  • uniapp、vue返回上一个页面并刷新(调用上一个页面的方法)

    在写微信小程序时有个功能有点问题 需求是 在当前页面 A页面 查看列表 在A页面点击发布跳转到表单页 B页面 B页面提交成功返回上一页A 要判断如果发布成功 返回到A页面得拿到最新数据 相当于要监听返回到A页面时得刷新数据了 方法一 使用o
  • 蓝桥杯:国二选手经验贴 附蓝桥杯历年真题

    相信能看到这篇文章的你 一定是有想过参赛了 那么恭喜你呀 看到一篇宝藏参赛指南 楼主将结合自己的参赛经历 手把手教你拿到省一进国赛嗷 文章结尾有历年真题及VIP试题链接 建议收藏 楼主是参加了2022年的蓝桥杯算法竞赛Python大学A组
  • latex教程——读书笔记整理(二)——文本排版

    文本排版 目录 文本排版 断行和分页 对齐段落 断词 内置字符串 特殊字符和符号 引号 破折号和连字号 波浪号 度的符号 省略号 连字 注音符号和特殊字符 标题 章 节 交叉引用 脚注 强调 环境 Itemize Enumerate 和 D
  • Java 详解(JVM) 垃圾回收机制原理

    一 什么是垃圾 二 如何判断垃圾 三 垃圾回收 一 什么是垃圾 首先我们要搞懂什么是垃圾 在 JVM 的眼中 垃圾就是指那些在堆中存在的 已经 死亡 的对象 而对于 死亡 的定义 我们可以简单的将其理解为 不可能再被任何途径使用的对象 通俗
  • Java - Buffered流拷贝文件

    BufferedInputStream 向另一个输入流添加功能 即缓冲输入并支持标记和重置方法的能力 创建 BufferedInputStream 时 会创建一个内部缓冲区数组 当流中的字节被读取或跳过时 内部缓冲区会根据需要从包含的输入流
  • curl错误码大全curl_errno

    CURLE UNSUPPORTED PROTOCOL 1 你的URL传递给libcurl的使用协议 这libcurl的不支持 支持可能是你没有使用一个编译时的选项 它可以是一个拼写错的协议字符串 或者只是一个协议的libcurl没有代码 C
  • Unity3D中Animation的常见属性及方法

    Unity3D中Animation的常见属性及方法如下 Animation Play播放 function Play mode PlayMode PlayMode StopSameLayer bool function Play anima
  • sudo apt-get update 命令出现没有Release文件问题解决

    在对我的linux系统更新软件源时 出现了这个问题 sudo apt get update E 仓库 http ppa launchpad net leaeasy dde ubuntu focal Release 没有 Release 文件
  • 百度点石-人工智能农作物识别比赛总结

    初赛排名第8 虽然成绩较差 但觉得参与其中 收获颇丰 借此分享一下 欢迎交流 1 背景介绍 本次竞赛目的是对某一时刻一张遥感卫星多光谱影像进行分类 需识别为4种类别 玉米 大豆 水稻和其他 背景 提供的多光谱影像 如图1所示 1 2 3波段
  • web端常见导航设计

    一 导航的定义 导航作为网站或者平台的骨架 是产品设计中不容忽视的一环导航是内容或者功能的定位 导向与通道 二 导航分类 遵循导航层级结构 包括全局导航和局部导航 全局导航往往指页眉和页脚 存在于网站的大部分页面 便于用户随时跳转 局部导航