貓仔試玩

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

鼠標移入顯示子欄目,移出隱藏,這樣的交互一般會用在網站導航欄,如人人都是產品經理的網站的導航欄也是如此,現在我們一起來看一下怎么設計吧。


鼠標移入顯示子欄目,移出隱藏,這樣的交互一般會用在網站導航欄,如人人都是產品經理的網站的導航欄也是如此,現在我們一起來看一下怎么設計吧。

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

如下圖:

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

又見效果圖,客官請看:https://bjxwh0.axshare.com

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

教程奉上

1、創建第一個標簽,并設置它的交互樣式:鼠標懸停時標簽為選中點亮的樣式。

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

2、快捷創建剩下的標簽。

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

3、添加容納子項目的動態面板。

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

4、在面板中添加元件。

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

5、添加標簽并設置交互。

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

6、復制第一個標簽,它的交互也會一起并復制過來,不用再重新設置一次了(ctrl按住不放手,拖動你要復制的標簽到指定位置之后,松開鼠標,就ok啦)。

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

7、設置下拉的子項目的隱藏和顯示條件:一開始隱藏,移到分類瀏覽、在子項目下拉板中時顯示,移到首頁和熱門課程時隱藏。

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

Axure教程:導航欄的制作(鼠標移入顯示子欄目,移出隱藏)

8、大功告成,預覽來看看自己是不是做成功了吧。

 

本文由 @萍萍仔 原創發布。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

原創文章,作者:金香檳運營,如若轉載,請注明出處:http://www.khiuon.tw/25612.html

重庆幸运农场网上购买