在数字化时代，优化产品设计，提升用户界面交互，是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题，本设计提出了一套灵活的菜单导航方案，结合中继器与动态面板，实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能，旨在提升领导满意度，增强产品设计体验。

一、效果展示

1、首页头部导航为一级目录，点击可展开子目录或菜单，点击菜单可与左侧菜单导航联动；

2、左侧菜单可进行搜索、收藏、取消收藏功能，点击菜单目录可展开子级，点击菜单右侧打开菜单页面；

3、菜单可点击☆进行收藏或取消收藏，已收藏的菜单在上方我的常用下显示；

效果预览：多级菜单导航

二、设计思路

1、考虑到菜单后续可自由调整，而且可以是多级菜单导航，左侧使用中继器控制菜单导航的数据；

2、左侧目录/菜单中继器的设计有四个重点：

• 要对菜单和目录类型进行定义，例如添加列“menu_type（M-目录；C-菜单）”；
• 要对层级关系进行定义，例如添加列“menu_tag（所属一级导航）、menu_id（唯一标识）、parent_id（父级目录唯一标识）”；
• 要对菜单点击展开隐藏进行控制，需要在添加列“display（显示隐藏状态：1-显示；为空时隐藏）”，当目录被点击时会更新此列；
• 要对搜索功能进行设计，搜索时其实就是对此中继器数据进行添加筛选，所以要思考根据中继器什么数据来做筛选（搜索到菜单需要逐层显示上级目录）；

3、收藏菜单中继器的数据根据点击菜单的收藏时动态添加，所以实现相对简单，这里不做详细设计说明；

4、头部一级导航采用抽屉式效果，这块重点使用好父子级的组合，梳理好层级嵌套关系，主要做的交互就是：

• 单击目录时控制子级的显示隐藏；
• 单击菜单是控制左侧目录/菜单中继器的数据，就是对中继器列“display”的更新；

三、关键步骤

1、左侧目录/菜单导航使用动态面板和中继器，中继器中这里分别设置目录和菜单元件（目录和菜单的展示效果不同，高度也不同）

2、设置好目录/菜单元件后，添加中继器数据列，这里定义了menu_tag、menu_id、parent_id、menu_name、menu_icon、menu_type、selected、display、collect、searchValue、page列，然后再给中继器添加交互

3、给目录/菜单设置单击时交互

4、设置收藏菜单中继器，并定义数据列，这里只需menu_id、menu_name、page

5、设置头部导航目录/菜单，并添加交互