Axure左侧三级导航菜单设计

 时间:2026-02-12 18:29:54

1、创建一、二、三级导航,矩形框表示每个选项。

三级导航3附图片分别对应第二步中三级导航动态面板的 A、B、C 三种面板状态,便于切换显示。

同时,每个选项(小矩形框)都有选中后的颜色样式交互:见第三幅图片。

Axure左侧三级导航菜单设计

Axure左侧三级导航菜单设计

Axure左侧三级导航菜单设计

2、将二级导航和三级导航都转换成动态面板,各自取名:二级导航,三级导航。

同时对一级导航添加交互用例:“选中当前元件,显示二级导航,隐藏三级导航。”

Axure左侧三级导航菜单设计

3、添加二级导航菜单中三个选项的交互用例,如图操作,第二张和第三张与第一张的逻辑是一样的,COPY设计就可以了。

Axure左侧三级导航菜单设计

Axure左侧三级导航菜单设计

Axure左侧三级导航菜单设计

4、 添加三级导航菜单的交互用例,他们虽然有 A、B、C 这三张状态,但他们的逻辑都是相同的。

第二张图就是以 A 状态设计的交互,只要控制一下鼠标停留时的 UI 样式就可以了,剩下两个状态直接 COPY.

Axure左侧三级导航菜单设计

Axure左侧三级导航菜单设计

5、最后,隐藏二级导航动态面板,隐藏三级导航动态面板,将整体界面上的所有元素包裹成一个总的面板,在总面板上添加交互用例,目的是为了鼠标离开的时候自动隐藏2、3级导航。

Axure左侧三级导航菜单设计

Axure左侧三级导航菜单设计

Axure左侧三级导航菜单设计

Axure左侧三级导航菜单设计

6、最后,预览之后就可以看到标准的三级导航菜单了,见下面视频。

  • 木瓜炖梨怎么做
  • 浏览器历史记录删除后还能恢复吗
  • UC浏览器如何开启启动时打开上次页面
  • UC浏览器怎么查看视频播放历史
  • 华为无痕浏览怎么找到浏览记录
  • 热门搜索
    衡阳旅游景点大全 安康旅游网 广西巴马旅游攻略 武汉旅游景点介绍 海峡两岸旅游交流协会 德国旅游地图 锦江国际旅游 湖南衡山旅游 漳浦旅游景点大全 日韩旅游