web端导航菜单系列

news2024/10/5 13:37:41

导航菜单属于导航中最常规的一种导航模式,它有2个显而易见的用途:帮助我们找到想要的任何东西和告诉我们现在身在何处。帮助用户在不同页面之间跳转找到目标功能。
导航作为网站或者平台的骨架,是产品设计中不容忽视的一环。结合自身对于导航设计的理解,并综合当下导航设计,对web端导航设计作如下阐述,
常见的导航模式如下:
一、顶部导航
顶部导航常规用于企业官网中,常见样式有超级菜单(也叫胖菜单),它能一次性展示超级多的子集菜单。相当于所有导航的菜单集合。还有工具菜单,主要用于菜单栏的切换。
样式1一标签式
导航水平分布;导航区域固定;标签平铺展示,点击进入相应界面;
在这里插入图片描述
样式2一下拉式
导航水平分布;鼠标悬浮下拉,可选择二级导航,跳转至二级界面
二级菜单
下拉式——二级菜单
在这里插入图片描述
下拉式——三级菜单

样式3-固定式
页面滚动导航始终固定在顶部
在这里插入图片描述
样式4-网页定位
点击对应导航或滚动页面,页面滚动至导航对应模块
在这里插入图片描述
二、侧边导航
侧边导航多用于b端产品中且多用于和顶部导航结合使用
样式1一标签式
左侧纵向排列;web内容或层次较多时,常用该导航样式(若导航层级三级或者多于三级可考虑双导航栏布局);导航栏菜单可实现整体折叠或局部折叠,折叠方式可纵向或横向。
在这里插入图片描述
样式2一抽屉式
点击左上方折叠按钮,左侧划出导航栏
在这里插入图片描述
在这里插入图片描述

样式3一锚点定位式
滚动页面,内容对应到相应的导航,或者点击导航,页面内容滚动到相应的模块
在这里插入图片描述
三、底部导航
页面内容较长时,底部导航方便用户快速访问。
样式1一标签式
导航平铺于页面底部,适用于趣味性较强,用户操作性较强的网站
在这里插入图片描述
四、混合导航
顶部导航在B端页面一般结合侧边导航一起使用。并且侧边导航可根据产品页面需求来进行调整是否展示。
样式1-电商式

全局导航和商品导航并行,采用不同分类标准;可用性导航及快捷入口位于上方和右侧
在这里插入图片描述
样式2-双导航式
顶部导航+左侧导航;顶部导航为一级导航,左侧导航为二级导航;一级导航较少,二级导航多的场景更契合
在这里插入图片描述
做好导航设计,个人建议需要关注以下几个方面:
1.严谨的信息架构搭建
2.注重交互细节
以上为个人对导航设计的些许梳理

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

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

相关文章

java第一课

常用dos命令 第一个e:加上回车,直接切换到e盘目录 看e盘文件的文件夹 dir加回车 进入文件夹 cd 文件夹名称加回车 进入文件夹就是 cd加文件夹名称 cd 加一个文件夹的名称就是进入这个文件夹 回退就是cd.. (这样子是单级目录的回退) 进入很多个就是进入…

必备装机软件,软件推荐

https://www.den4b.com/download/renamer/installer?key9d97aa7096681c8342442f75e34f7d5a8b13551ee3283956323516c81b1fe91b 官网https://www.den4b.com/ 从不同的文件夹中选择文件并将它们添加到工作区域。 a、 更改添加文件夹按钮的默认行为(可选步骤) b、添加单独选择的文…

数据库基础篇 《14.视图》

数据库基础篇 《14.视图》 1. 常见的数据库对象 对象描述表(TABLE)表是存储数据的逻辑单元,以行和列的形式存在,列就是字段,行就是记录数据字典就是系统表,存放数据库相关信息的表。系统表的数据通常由数据库系统维护&#xff0…

Ubuntu运行.sh文件

一、运行.sh文件 (1)使用sh testsh执行 (2)使用bash testsh 执行 (3)使用点 执行 (4)使用source执行./sh 文件开头***的含义: #!/bin/sh     以下的代码由/…

Redis 的 Protected Mode 解读

官方配置文件自带的注释: Protected mode is a layer of security protection, in order to avoid that Redis instances left open on the internet are accessed and exploited.When protected mode is on and if:1) The server is not binding explicitly to a …

服务(第十四篇)lvs的高可用负载均衡

Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案,可以解决静态路由出现的单点故障问题。 在一个LVS服务集群中通常有主服务器(MASTER)和备份服务器(BACKUP)两种角色的服务器,但是对外表现为一个虚…

Qt连接MySql数据库(本地和远程数据库均可)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 三种方法方法一 略方法二 使用ODBC设置mysql为数据源库1. 添加ODBC数据源,在控制面板中找到管理工具,其中有ODBC数据源 64位的,打…

美颜sdk与人脸识别技术的结合:为智能化时代注入美感

在当今的智能化时代,人脸识别技术已经成为了很多应用的核心。而在这些应用中,美颜功能也逐渐成为了用户所追求的重要特性之一。因此,美颜sdk的出现和发展,为人脸识别技术注入了更多的美感。 一、定义和作用 美颜sdk可以对人脸进…

Django框架之模板基本使用

本篇文章主要讲解Django 3.0框架配置模板路径,并使用视图和模板结合实现一些小功能。 概述 模板是html页面,可以根据视图中传递过来的数据进行填充。 在project中创建templates目录和应用模板目录 如templates/myapp 配置模板路径 修改settings.py文…

四数相加 II

给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < n nums1[i] nums2[j] nums3[k] nums4[l] 0 来源&#xff1a;力扣&#xff08;LeetCode&#xff0…

Java 网络IO编程总结 nio netty原理 bio nio aio io多路复用 事件驱动 信号驱动 汇总总结

目录 ​编辑 io 多路复用 NIO 多线程 和 io多路复用区别 &#xff1a; Netty 操作流程 看了众多精简总结 Netty Bio Nio Aio Io多路复用 事件驱动 信号驱动 io 多路复用 I/O 多路复用模型是利用select、poll、epoll可以同时监察多个流的 I/O 事件的能力&#xff…

【备忘录设计模式详解】C/Java/JS/Go/Python/TS不同语言实现

简介 备忘录模式&#xff08;Memento Pattern&#xff09;是一种结构型设计模式。这种模式就是在不破坏封装的条件下&#xff0c;将一个对象的状态捕捉(Capture)住&#xff0c;并放在外部存储起来&#xff0c;从而可以在将来合适的时候把这个对象还原到存储起来的状态。备忘录…

接口冒烟测试方法

接口冒烟测试方法 今年遇到了几个问题&#xff0c;与接口的功能和性能相关&#xff0c;恰巧最近公司也在组织以冒烟测试为主题的活动&#xff0c;于是乎突发奇想&#xff0c;寻思着能否将接口测试与冒烟测试结合起来&#xff0c;发掘一些新的接口测试思路与方法。 平时对接口…

SpringBoot创建与运行

文章目录 一、SpringBoot是什么&#xff1f;二、SpringBoot项目创建IDEA创建SpringBoot项目网页版创建SpringBoot项目项目目录介绍输出Hello SpringBoot 一、SpringBoot是什么&#xff1f; 如果我们说Spring的诞生是为了简化Java程序开发的&#xff0c;那么SpringBoot的诞生是为…

【三十天精通Vue 3】 第十八天 Vue 3的国际化详解

✅创作者&#xff1a;陈书予 &#x1f389;个人主页&#xff1a;陈书予的个人主页 &#x1f341;陈书予的个人社区&#xff0c;欢迎你的加入: 陈书予的社区 &#x1f31f;专栏地址: 三十天精通 Vue 3 文章目录 引言一、Vue 3 国际化概述1.1 国际化的概念1.2 国际化的作用1.3 V…

数据结构(数组、链表、栈、队列、树)

文章目录 1.数组1.1数组的特点1.2自定义数组 2.链表2.1链表的特点2.2自定义链表2.2.1自定义单向链表2.2.2自定义双向链表 3.栈3.1栈的特点3.2 Stack使用举例3.3 自定义栈 4. 队列5. 树与二叉树5.1 树的理解5.2 二叉树的基本概念5.3 二叉树的遍历5.4 经典二叉树和红黑树5.5 二叉…

Jmeter基础之---jmeter基础概念

JMeter 介绍&#xff1a; 一个非常优秀的开源的性能测试工具。 优点&#xff1a;你用着用着就会发现它的重多优点&#xff0c;当然不足点也会呈现出来。 从性能工具的原理划分&#xff1a; Jmeter工具和其他性能工具在原理上完全一致&#xff0c;工具包含4个部分&#xff1a…

GitLab与jekins结合构建持续集成(cl)环境(3)

目录 在jenkins上部署maven 配置maven jenkins回滚 Git方式回滚 通过发布时备份&#xff0c;回滚是选择指定备份文件进行回滚 jenkins添加邮件报警 Jenkins如何远程管理部署节点 Jenkins的远程管理方式&#xff1a; SSH Plugin Publish over SSH jenkins整合Ansible je…

山路转债上市价格预测

山路转债 基本信息 转债名称&#xff1a;山路转债&#xff0c;评级&#xff1a;AA&#xff0c;发行规模&#xff1a;48.36亿元。 正股名称&#xff1a;山东路桥&#xff0c;今日收盘价&#xff1a;7.3元&#xff0c;转股价格&#xff1a;8.17元。 当前转股价值 转债面值 / 转股…

港科夜闻|香港科技大学(广州)与中国电信广东公司签署战略合作协议

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科技大学(广州)与中国电信广东公司签署战略合作协议。根据协议&#xff0c;双方将围绕各自科技创新及发展需要&#xff0c;整合双方的优质资源和优势能力&#xff0c;务实开展多方位的战略合作。本次合作&#xff0c…