Axure教程：導(dǎo)航欄的制作（鼠標(biāo)移入顯示子欄目，移出隱藏）

5 評論 23605 瀏覽 49 收藏 4 分鐘

鼠標(biāo)移入顯示子欄目，移出隱藏，這樣的交互一般會用在網(wǎng)站導(dǎo)航欄，如人人都是產(chǎn)品經(jīng)理的網(wǎng)站的導(dǎo)航欄也是如此，現(xiàn)在我們一起來看一下怎么設(shè)計吧。

如下圖：

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

教程奉上

1、創(chuàng)建第一個標(biāo)簽，并設(shè)置它的交互樣式：鼠標(biāo)懸停時標(biāo)簽為選中點亮的樣式。

2、快捷創(chuàng)建剩下的標(biāo)簽。

3、添加容納子項目的動態(tài)面板。

4、在面板中添加元件。

5、添加標(biāo)簽并設(shè)置交互。

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

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

8、大功告成，預(yù)覽來看看自己是不是做成功了吧。

 

本文由 @萍萍仔 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
萍萍仔
9篇作品 94908總閱讀量
11-08928 瀏覽
OpenAI的首屆開發(fā)者大會，把一堆初創(chuàng)企業(yè)炸成了炮灰
10-231666 瀏覽
壓力面試已經(jīng)不適合當(dāng)前時代了！
10-097305 瀏覽
產(chǎn)品模型之「產(chǎn)品三軸」
04-115090 瀏覽
評論區(qū)廣告上線，視頻號“起風(fēng)”了
02-016407 瀏覽
2023，視頻號生態(tài)的10大預(yù)測
評論
評論請登錄

  1. 方法是不錯，但是有一個問題不知道你們發(fā)現(xiàn)了沒，當(dāng)鼠標(biāo)移動到“分類瀏覽”標(biāo)簽上的時候，會顯示動態(tài)面板的內(nèi)容，當(dāng)鼠標(biāo)移出動態(tài)面板后，會隱藏動態(tài)面板，可是如果非常規(guī)操作的話：比如鼠標(biāo)從上邊移動到“分類瀏覽”標(biāo)簽后直接從上邊移出，那下邊的動態(tài)面板就不會消失，我之前就遇到了這樣的問題，感覺還是有瑕疵的 ??

    來自上海 回復(fù)

    1. 是的，我也是像帖子那樣做，這是大多數(shù)人一開始的思路。后來看別的帖子說用加熱區(qū)的做法，最終實現(xiàn)了效果。

      來自廣東 回復(fù)

    2. 不用加熱區(qū)。鼠標(biāo)移入標(biāo)簽，顯示下方菜單，且設(shè)置菜單為選中狀態(tài)。鼠標(biāo)移出標(biāo)簽時，添加條件1，if菜單為選中，則顯示菜單，條件2，or隱藏，且設(shè)置菜單為未選中。
      單獨選中菜單，設(shè)置移出隱藏。親測可行

      來自四川 回復(fù)

  2. 棒棒噠

    來自廣東 回復(fù)