AxureRP教程–分类菜单效果

随着电商越来越火,更多的电商网站都层出不穷的冒出来了,这些网站大都有一个共同的特点,就是其所卖商品的导航都采用了分类菜单的效果,即一种大类下面包含很多小类,取代了原来比较古板的左侧导航菜单样式,因为老的样式一旦商品数量较多的时候,就会列的很长,会导致不能在一个页面展示,而分类菜单很好的解决了这个问题,可以把所有的导航都集中显示在第一屏,让用户一目了然。这里就介绍一些如何用AxureRP来实现这个菜单效果。

用AxureRP来做这个效果,一种方式是利用AxureRP自带的菜单组件来做,不过这样做出来就有点类似前面所提到的老的样式,虽然也可以实现,但展示排版上会比较的捉襟见肘;一种是用导航菜单加动态子菜单的方式来做,说白了就是子菜单用动态面板来实现,利用动态面板的隐藏显示属性。

如上图所示,左侧的是导航菜单,这个比较常见,相信大家应该都会制作了,如果不会,最简单的就是用矩形组件来做;右侧的就是鼠标移入菜单后的子菜单显示,这个子菜单可以做成各种展示样式,样式做的好的话,完全可以做到和京东商城那种分类一模一样。初始状态下设置动态面板为隐藏状态,但鼠标移入菜单的时候才显示,这里主要是控制这个动态面板显示隐藏的问题,首先移入一级菜单的时候得显示,移出一级菜单的时候分两种情况,一种是鼠标移入一级菜单对应的子菜单,这样的话就还是显示,一种情况是移出一级菜单及其对应的子菜单,这样就得隐藏,反过来当鼠标是在子菜单上的时候也是一样,也要区分这样的两种情况。

因为上述情况,所以在子菜单上要判断鼠标移入移出事件,这里我用了图片和图片映射组件两种方式,不过有一个缺点,就是不能在子菜单上点击链接,因为图片本身只支持整体的链接,图片映射组件也是,而且需要放置在顶层,这样就会覆盖掉下面设置的子分类的链接,没有想到很好的解决办法,不过我想演示的时候设置一个链接应该也可以的,能表示出效果就可以了。

这个效果大致就是这样,示例有点简陋,用AxureRP 6来做可能效果更好些,大家有什么好的想法,欢迎提出来分享。

示例在AxureRP 5.6版本下调试通过

即日起,大家如有原型设计方面的问题交流,可至IT民工论坛提出,大家共同学习,共同进步。

 

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

“AxureRP教程–分类菜单效果”2 条评论

haihai | 2013-01-23 13:34 |
commenter

移出一级菜单的时候分两种情况,一种是鼠标移入一级菜单对应的子菜单,这样的话就还是显示,一种情况是移出一级菜单及其对应的子菜单,这样就得隐藏,反过来当鼠标是在子菜单上的时候也是一样,也要区分这样的两种情况。
你所说的这两种情况,用axure可以真正实现吗 🙂

commenter

可以实现的,axure支持鼠标移入和移出的事件