一种应用于多终端的新型响应式导航设计实现方法技术

本发明专利技术涉及一种应用于多终端的新型响应式导航设计实现方法。所述方法包括以下步骤：1)选择VUE前端框架；2)使用递归实现多级子菜单；3)记录当前打开叶子菜单路径，并高亮显示其所有父级菜单：点击叶子菜单时记录当前叶子菜单路径，并通过递归向上寻找直到顶级菜单，完成菜单的完整路径记录；4)子组件$emit的消息通过递归传递$emit到目标接受者。应用本发明专利技术方法设计的响应式导航可实现以下效果：帮助用户在使用导航菜单的时候能够快速定位，便捷的在多终端使用一个样式的导航菜单；真正的响应式，一套代码实现多端适配，维护成本低；适用于中后台的管理型、工具型网站。

A New Design and Implementation Method of Responsive Navigation Applied to Multi-terminal

The invention relates to a novel responsive navigation design and implementation method applied to multiple terminals. The method includes the following steps: 1) selecting the front-end framework of VUE; 2) using recursion to realize multi-level sub-menu; 3) recording the path of the current open leaf menu and highlighting all its parent menus: recording the path of the current leaf menu when clicking on the leaf menu, and completing the complete path record of the menu by recursively searching up to the top menu; 4) the message of the sub-component $emit is passed through the post. Return $emit to the target recipient. The responding navigation designed by the method of the invention can achieve the following effects: help the user to locate quickly when using the navigation menu, use a style of navigation menu conveniently in multiple terminals; truly responding, a set of code to achieve multi-terminal adaptation, low maintenance cost; and apply to the management and tool-based website in the background.

【技术实现步骤摘要】
一种应用于多终端的新型响应式导航设计实现方法
本专利技术涉及互联网
，特别涉及企业级后台产品，具体地说，涉及一种应用于多终端的新型响应式导航实现方法。
技术介绍
1991年，CERN(欧洲粒子物理研究所)的科学家提姆﹒伯纳斯李(TimBerners-Lee)开发出了万维网(WorldWideWeb)。他还开发出了极其简单的浏览器(浏览软件)。此后互联网开始向社会大众普及。此人被人们誉为“互联网之父”。至2016年4月，全球域名统计数量已达3亿以上。所有的网站都会有导航，导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。目前PC常见的导航菜单有两大形式：顶栏、侧栏垂直菜单(可内嵌子菜单、支持折叠)；移动端有七种常见导航形式：标签式导航(底部和顶部)、抽屉式导航、菜单式导航、平铺式导航、点聚式导航、列表式导航、网格式导航。导航菜单作为网站设计中的一个基础组成部分，直接决定着用户的浏览体验顺畅与否，对整个网站具有举足轻重的影响。选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适(方向不明确)，如果导航菜单不够灵敏、可用性差，这会有损网站的专业形象，妨碍用户与网站进行互动。对于2B的企业级后台产品来说，用户每天都需要通过导航频繁切换到对应的页面完成工作任务，使用场景不仅局限于工作环境，也可能在出差的途中，需要用手机临时登录进行紧急的操作。现有菜单导航，一般会采取写两套代码去适配不同的终端，或者是一套响应式的导航菜单。中文期刊《电脑知识与技术》2015年14期刊出的论文“校园响应式网页设计应用研究”，阐述了响应式网页设计的主要技术特点，并对基于响应式网页设计理念的前端框架进行比较分析。具体公开了响应式设计技术的主要特征包括：1)移动优先(MobileFirst)：移动优先是响应式网页设计中性能设计的重要组成部分。在响应式网页设计中，网页最主要的部分是设计为移动优先，使得敏感的设计是以桌面网站的方式或类似的隐藏技术来替换，从而提升用户体验感觉。2)层叠样式转换和媒体查询(CSSTransitionsandMediaQueries)：使用层叠样式转换和媒体查询依据浏览器的宽度，实现自适应页面布局，从而查阅网站内容时，可以快速无缝的在不同页面风格之间进行跳转。3)响应式数据表(ResponsiveDataTables)：传统数据表从PC端转换到移动端，往往由于缩小整个数据表，导致字体变化而不可阅读。响应式数据表就是要重新格式化表，使其具有更好的可读性。4)响应式导航菜单(ResponsiveNavigationMenus)：在终端屏幕缩小时，原有固定横向菜单的链接方式转换为一种下拉式菜单，替换原有的菜单项。5)流式布局(FluidLayouts)：以往有四种不同的布局类型：固定宽度的布局，液态布局，弹性布局和混合布局，其各有优缺点。流式布局通过设置布局的百分比以及CSS的浮动属性等技巧使得响应式网页设计更加灵活。6)响应式图像(ResponsiveImages)：响应式图像采用一种上下文感知图像尺寸方式，为不同分辨率下图像尺寸不同布局的情况，提供背景图像尺寸响应优化方法。由此可见，响应式的导航菜单样式会发生变化。势必导致用户会产生学习成本，及适应时间。综上，有必要帮助用户在使用导航菜单的时候能够快速定位，便捷的在多终端使用一个样式的导航菜单。
技术实现思路
本专利技术的目的，是针对管理后台网站，在使用不同终端登录的时候，保证菜单导航使用的便捷、效率、美观及交互一致，提高工作效率，降低学习成本，提供了一种应用于多终端的新型响应式导航设计实现方法。为实现上述目的，本专利技术采取的技术方案是：一种应用于多终端的新型响应式导航设计实现方法，所述方法包括以下步骤：1)选择VUE前端框架；2)使用递归实现多级子菜单；3)完成菜单的完整路径记录；4)子组件$emit的消息通过递归传递$emit到目标接受者。作为一个优选例，步骤3)具体为：点击叶子菜单时记录当前叶子菜单路径，并通过递归向上寻找直到顶级菜单，完成菜单的完整路径记录。作为另一优选例，所述方法还包括以下步骤：记录元素开始和结束的位置，实现位置转变过程的动画效果。作为另一优选例，所述方法还包括以下步骤：测试所述应用于多终端的新型响应式导航的核心功能。作为另一优选例，所述方法还包括以下步骤：响应式的兼容。作为另一优选例，所述方法还包括以下步骤：全面测试或内测。作为另一优选例，所述应用于多终端的新型响应式导航其PC端导航栏固定在左侧，在想扩展页面内容操作区域的时候可将导航收起，无需展开也能切换页面。作为另一优选例，所述应用于多终端的新型响应式导航其移动端的导航栏默认为收起状态，呼出后交互样式与PC端完全一致。本专利技术优点在于：本专利技术提供了一种应用于多终端的新型响应式导航设计实现方法，应用本专利技术方法设计的响应式导航可以实现以下技术效果：(1)PC端导航栏固定在左侧，提高导航可见性，在想扩展页面内容操作区域的时候，可以将导航收起，并且无需展开也能方便的切换页面；(2)移动端的导航栏默认为收起状态，呼出后交互样式与PC端完全一致；(3)真正的响应式，一套代码实现多端适配，代码维护成本低；(4)适用于中后台的管理型、工具型网站。因此，本专利技术可帮助用户在使用导航菜单的时候能够快速定位，便捷的在多终端使用一个样式的导航菜单。附图说明附图1是【PCWEB】1440px分辨率一级菜单。附图2是【PCWEB】1440px分辨率二级菜单和多级菜单样式。附图3是【PCWEB】1440px分辨率菜单收起样式。附图4是【TABLET】1024px分辨率菜单收起样式。附图5是【TABLET】1024px分辨率菜单展开样式。附图6是【MOBILE】768px分辨率菜单收起的样式。附图7是【MOBILE】768px分辨率菜单展开的样式。附图8是【MOBILE】360px分辨率菜单收起样式。附图9是【MOBILE】360px分辨率菜单展开样式。具体实施方式下面结合附图对本专利技术提供的具体实施方式作详细说明。实施例1本专利技术的应用于多终端的新型响应式导航设计实现方法，该方法基于VUE前端框架，具体如下：1、vue的provide和inject避免父组件传递props至孙组件需要通过子组件一级一级中转。2、递归的应用2.1多级子菜单必然需要使用到递归，根据设计要求，mini态菜单使用递归实现。2.2记录当前打开叶子菜单路径，并高亮显示其所有父级菜单：点击叶子菜单时记录当前叶子菜单路径，并通过递归向上寻找直到顶级菜单，完成菜单的完整路径记录(实现全路径高亮的关键)。2.3组件dispatch的使用：子组件$emit的消息通过递归传递$emit到目标接受者。3、动画的应用记录元素开始和结束的位置，实现位置转变过程的动画效果。此应用于多终端的新型通用响应式导航，其响应式规则为：1)使用rem单位，以适配不同手机分辨率；2)响应式网站断点breakpoint(逻辑像素)为：PCWEB：1920px/1440px/1280pxTABLET：1024px/768pxMOBILE：375px。需要说明的是，本专利技术的方法使用VUE前端框架，VUE具有一系列的优势：轻量级框架、简单易学、双本文档来自技高网...

【技术保护点】
1.一种应用于多终端的新型响应式导航设计实现方法，其特征在于，所述方法包括以下步骤：1)选择VUE前端框架；2)使用递归实现多级子菜单；3)完成菜单的完整路径记录；4)子组件$emit的消息通过递归传递$emit到目标接受者。

【技术特征摘要】
1.一种应用于多终端的新型响应式导航设计实现方法，其特征在于，所述方法包括以下步骤：1)选择VUE前端框架；2)使用递归实现多级子菜单；3)完成菜单的完整路径记录；4)子组件$emit的消息通过递归传递$emit到目标接受者。2.根据权利要求1所述的方法，其特征在于，步骤3)具体为：点击叶子菜单时记录当前叶子菜单路径，并通过递归向上寻找直到顶级菜单，完成菜单的完整路径记录。3.根据权利要求1所述的方法，其特征在于，还包括以下步骤：记录元素开始和结束的位置，实现位置转变过程的动画效果。4.根据权利要求1所述的方法，其特...

【专利技术属性】
技术研发人员：王丽媛，
申请(专利权)人：上海宝尊电子商务有限公司，
类型：发明
国别省市：上海,31