【授人以渔or鱼】web-顶部&侧边导航切换效果 原型 免费

xiaobai668 普通用户 1月前 563

新手交流,大神勿笑。

在web管理系统(后台)设计中,我们经常会遇到需要通过导航(顶部菜单or侧边栏)来对功能模块进行区分。通过导航,可以极大的提高产品的易用性。

以下2个导航效果的展示:

顶部导航,主要用到的交互事件为:鼠标点击-设置【选中】

侧边导航,主要用到的交互事件为:鼠标点击-动态面板状态切换

1、顶部导航

用到的元件:矩形(菜单名称)

1)新建矩形:

无边框,并进行【交互样式设置】。其中【选中】样式是必须要设置的,这为我们后面定义鼠标点击事件打下基础。

【选中】样式可以针对矩形的边框、填充色、及文字、不透明度等进行灵活设置,大家可以根据需要自行尝试

2)定义鼠标单击:

为矩形定义【鼠标单击】,设置【选中状态于this="true"】。从这个事件通俗理解就是我点击了这个矩形,那么这个矩形就会被选中,然后呈现上一步设置的【选中】效果

3)定义选项组:

为矩形设置选项组名称,这里我自己命名为【顶部导航】。这一步的作用是,导航通常有多个,只有在一个组里,那么选中其中个,另一个必然是【未选中】,这就实现了切换选中效果。 这一点,想不通的童鞋可以参考一下【单选组】的概念

4)复制矩形:

前面只有一个矩形,各种设置都做好了。那么我们想要几个菜单,就复制几个。

5)大功告成:

根据前面几步的设置,那么就可以实现导航效果了。

补充说明:因本例并无页面,故没有设置【鼠标单击-打开链接】事件,实际情况下大家自己添加即可

此外,一般打开页面时,都会有一个菜单处于默认选中状态,因此需要对某个矩形设置交互【载入时-选中】


2、侧边导航

侧边导航通常存在多级菜单,点击上级菜单,切换展开/收起下级菜单。

用到的元件:矩形、动态面板

1)新增矩形:

添加背景矩形、一级菜单(1个矩形)、二级菜单(N个矩形)

参考上面的指导,为一二级菜单分别设置【鼠标悬停】、【鼠标按下】、【选中】等交互

为二级菜单整体设置【选项组名称】

2)转换为动态面板:

将一二级菜单组合选中后,右键【转换为动态面板】,设置面板名称【侧边导航】,并修改面板状态state1为【展开】

请注意,任何时候,为组合/面板及矩形、文本框设置名称,都是一个好习惯。就跟程序猿敲代码加注释一样。不然复杂的产品设计,你会发觉自己掉进泥潭里了。

3)为动态面板增加状态【收起】:

在【收起】状态下,新增矩形【一级导航】,具体参考原型

4)设置【鼠标单击】事件:

如图,进行【鼠标单击】事件的配置,通过面板状态设置,实现切换展开/收起菜单效果

5)大功告成:

将刚完成的一二级导航面板,根据需要复制即可

额外说明:侧边导航,巧妙的利用了动态面板的状态切换及【推动/拉动元件】效果。这种效果在一些通知公告或者需要切换/展开内容的功能模块也是适用的。只是学如何操作,终归有局限性,举一反三,才是我们交流的目的。

上传的附件:
最新回复 (82)
全部楼主
  • zunleo 普通用户 1月前
    0 引用 2
    十分感谢
  • feng900628 普通用户 1月前
    0 引用 3
    感谢分享
  • vicente529 普通用户 1月前
    0 引用 4
    感谢分享,
  • jacksonpan47 普通用户 1月前
    0 引用 5
    感谢分享
  • NewZong 普通用户 1月前
    0 引用 6
    tks
  • nancy1997 普通用户 1月前
    0 引用 7
    优秀!
  • jacky1992 普通用户 1月前
    0 引用 8
    谢谢楼主分享哈
  • levisyyy 普通用户 1月前
    0 引用 9
    感谢分享
  • 因果 普通用户 1月前
    0 引用 10
    谢谢
  • arthur613 普通用户 29天前
    0 引用 11
    感谢分享
  • 回禄 普通用户 28天前
    0 引用 12
    大赞
  • 神龙是超人 普通用户 28天前
    0 引用 13
    大赞
  • jfree168 普通用户 28天前
    0 引用 14
    感谢分享!
  • weinnie1983 普通用户 26天前
    0 引用 15
    感谢楼主分享!
  • Kadeem 普通用户 25天前
    0 引用 16
    我来看看~
  • 宝贝儿honey 普通用户 25天前
    0 引用 17
    感谢分析
  • caj1010 普通用户 25天前
    0 引用 18
    学习下,学习下
  • 喵沫沫 普通用户 25天前
    0 引用 19
    感谢分享!
  • cindyz 普通用户 25天前
    0 引用 20
    飘过
  • 土匪老牛忙 普通用户 25天前
    0 引用 21
    谢谢分享
  • 小地瓜 普通用户 25天前
    0 引用 22
    感谢分享
  • dragon4 普通用户 25天前
    0 引用 23
    感谢分享
  • yong 普通用户 25天前
    0 引用 24
    感谢分享
  • 逍遥浪子 普通用户 25天前
    0 引用 25
    谢谢
  • carawsy 普通用户 25天前
    0 引用 26
    感谢楼主
  • tinating 普通用户 25天前
    0 引用 27
    厉害了。。。
  • sunnyroom 普通用户 25天前
    0 引用 28
    谢谢分享
  • 金豆豆2020 普通用户 25天前
    0 引用 29
    厉害了我的哥
  • feiyunad 普通用户 25天前
    0 引用 30
    希望会搞
  • anyan 普通用户 25天前
    0 引用 31
    谢谢分享  !  学习一下!
  • XUERZE 普通用户 24天前
    0 引用 32
    感谢楼主分享
  • happy乐 普通用户 23天前
    0 引用 33
    十分感谢
  • samuel86 普通用户 22天前
    0 引用 34
    感谢分享
  • erlongshang 普通用户 21天前
    0 引用 35
    感谢楼主分享
  • 普通用户 19天前
    0 引用 36
    66
  • 李小清 普通用户 19天前
    0 引用 37
    很棒
  • 酱爆9527 普通用户 18天前
    0 引用 38
    谢谢分享
  • 10951606 普通用户 16天前
    0 引用 39
    感谢分享
  • 绯瞳之火 普通用户 11天前
    0 引用 40
    xuexixuexi
  • metome2 普通用户 10天前
    0 引用 41
    多谢,必须赞你一个。
  • LeeYatSan 普通用户 8天前
    0 引用 42
    谢谢
  • feng1465 普通用户 8天前
    0 引用 43
    感谢分享
  • fxilin 普通用户 8天前
    0 引用 44
    谢谢
  • chenw_1979 普通用户 7天前
    0 引用 45
    感谢分享 
  • zhangxintong 普通用户 7天前
    0 引用 46
    感谢分享
  • luan040 普通用户 7天前
    0 引用 47
    感谢分享
  • fxilin 普通用户 7天前
    0 引用 48
    谢谢分享
  • 13874989965 普通用户 6天前
    0 引用 49
    谢谢分享
  • bin828 普通用户 6天前
    0 引用 50
    谢谢分享
  • Alice 普通用户 6天前
    0 引用 51
    谢谢
  • 晴朗de天空 普通用户 6天前
    0 引用 52
    学习一下
  • 浅念 普通用户 6天前
    0 引用 53
    谢谢分享
  • slr 普通用户 6天前
    0 引用 54
    感谢分享
  • xuezd 普通用户 6天前
    0 引用 55
    谢谢分享
  • hiangtop 普通用户 6天前
    0 引用 56
    谢谢分享
  • hiangtop 普通用户 6天前
    0 引用 57
    谢谢分享
  • rodje 普通用户 6天前
    0 引用 58
    感谢分享
  • Arwen 普通用户 6天前
    0 引用 59
    谢谢
  • cqw1991 普通用户 6天前
    0 引用 60
    感谢分享
  • mumu 普通用户 5天前
    0 引用 61
    666
  • walkmannick 普通用户 5天前
    0 引用 62
    加油!
  • sakura 普通用户 5天前
    0 引用 63
    万分感谢!!!
  • chaih 普通用户 5天前
    0 引用 64
    看看
  • jediwang 普通用户 5天前
    0 引用 65
    感谢分享 
  • alexander 普通用户 4天前
    0 引用 66
    666
  • jhun8343 普通用户 4天前
    0 引用 67
    666
  • nanihuang 普通用户 3天前
    0 引用 68
    十分感谢
  • cindyz 普通用户 2天前
    0 引用 69
    感谢分享
  • lzcoco 普通用户 2天前
    0 引用 70
    感谢分享
  • 飞奔的五花肉 普通用户 2天前
    0 引用 71
    感谢分享
  • 啊啊啊啊牛 普通用户 2天前
    0 引用 72
    666
  • toplzt 普通用户 2天前
    0 引用 73
    666nnn
  • renzehui 普通用户 2天前
    0 引用 74
    感谢分享
  • 交互新鲜人 普通用户 2天前
    0 引用 75
    十分感谢
  • Fshelly 普通用户 1天前
    0 引用 76
    谢谢分享
  • cq547131627 普通用户 1天前
    0 引用 77
    6666
  • 837233596 普通用户 1天前
    0 引用 78
    666
  • 735994852 普通用户 1天前
    0 引用 79
    ganxiefenxiang
  • csck 普通用户 1天前
    0 引用 80
    123
  • kale甘蓝 普通用户 16小时前
    0 引用 81
    感谢分享!
  • jiyong 普通用户 16小时前
    0 引用 82
    thx,看看效果
  • jiaxiad 普通用户 14小时前
    0 引用 83
    感谢分享!
返回