起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure實(shí)例：創(chuàng)建瀏覽器頂部固定菜單及子菜單
文章分享了一個(gè)運(yùn)用Axure創(chuàng)建瀏覽器頂部固定菜單及子菜單的例子，和各位PM分享，希望能幫到一些需要的朋友。
在下是個(gè)axure新手，要用axure實(shí)現(xiàn)下面一個(gè)功能：
1.讓菜單固定在瀏覽器頂部（如果僅僅是這個(gè)功能，那么可以用動(dòng)態(tài)面板里面裝Menu item直接固定在瀏覽器頂部）；
2.菜單有下拉的子菜單（如果用了動(dòng)態(tài)面板，除非動(dòng)態(tài)面板的高度大于子菜單彈出時(shí)的高度，否則顯示不出子菜單，但是如果一開始把動(dòng)態(tài)面板的高度設(shè)置的很高，就會(huì)導(dǎo)致?lián)踝【W(wǎng)頁正文的內(nèi)容，導(dǎo)致網(wǎng)頁的正文內(nèi)容無法選中，無法復(fù)制）。
我就試著尋找，除了動(dòng)態(tài)面板，是否有其他組件，可以固定在瀏覽器頂部，且不影響菜單的下拉子菜單彈出，但是我并沒有找到。
后來，我想到了一個(gè)解決的辦法：
還是用動(dòng)態(tài)面板，包裹Menu item，然后給Menu item設(shè)置子菜單，然后在axure中 選中某個(gè)菜單項(xiàng)目，就會(huì)彈出子菜單
（圖1，選中其中一個(gè)菜單項(xiàng)目，彈出了子菜單）
然后選中整個(gè)子菜單：
（圖2，這是選中子菜單后，子菜單周圍有一個(gè)邊框包裹著它）
然后在右邊的屬性窗口，做如下設(shè)置：
（圖3，子菜單的屬性 設(shè)置窗口）
這里的【頂部菜單按鈕】就是我包裹菜單的動(dòng)態(tài)面板的名稱，當(dāng)鼠標(biāo)移動(dòng)到Menu item上，會(huì)自動(dòng)顯示出子菜單，那么我們讓子菜單在顯示的時(shí)候，改變包裹菜單的動(dòng)態(tài)面板的高度，從而讓整個(gè)菜單能完整的顯示出來，然后當(dāng)我們的鼠標(biāo)離開子菜單的時(shí)候，子菜單就會(huì)自動(dòng)隱藏，從而觸發(fā) 【隱藏時(shí)】這個(gè)事件，然后設(shè)置動(dòng)態(tài)面板的尺寸回到原始尺寸，這時(shí)候，就不會(huì)影響我們選擇頁面其他元素了。
update：2017-02-22
最新研究出的方法，快速調(diào)整動(dòng)態(tài)面板的寬度：
直接選中 包裹菜單的動(dòng)態(tài)面板， 鼠標(biāo)右鍵，設(shè)置 【自動(dòng)調(diào)整為內(nèi)容尺寸】
完畢。
我學(xué)做PM的時(shí)候，woshipm上很多朋友熱心幫過我，現(xiàn)在分享下，希望能幫到一些需要的朋友。
本文由 @usernamepm 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
謝謝樓主的辦法，但是我遇到一個(gè)問題，如果在子菜單中，設(shè)置了case,那么這個(gè)case會(huì)因?yàn)椤绊敳坎藛巍钡淖饔贸叽绲姆秶鷶U(kuò)大并覆蓋而無法正常使用，這個(gè)有什么解決辦法嗎？另外你更新的方法是不需要在子菜單的屬性中設(shè)置顯示/隱藏時(shí)，頂部菜單的尺寸就可以實(shí)現(xiàn)同樣的效果么，我試了好像沒什么效果。
我這個(gè)文章的主要關(guān)鍵詞是【讓菜單固定且浮動(dòng)在頂部】，為了滿足這個(gè)需求，這時(shí)候必須要借助動(dòng)態(tài)面板，而加了動(dòng)態(tài)面板，如果面板過大，會(huì)遮擋網(wǎng)頁正常的內(nèi)容，過小，會(huì)讓子菜單顯示不出來，如果你只是普通菜單，不需要固定且浮動(dòng)在頂部，那就按照普通菜單處理即可， case里隱藏和顯示是為了動(dòng)態(tài)改變面板的尺寸，讓子菜單彈出的時(shí)候有空間顯示， 讓他隱藏是為了不擋住網(wǎng)頁菜單下面的內(nèi)容， 后面更新的方法 是最優(yōu)的方案，讓axure自動(dòng)處理， 另外你的問題描述我不是很理解究竟是什么意思，麻煩你盡量詳細(xì)的描敘下你的需求、場(chǎng)景，我好幫你解答
恩，我按照作者的方法實(shí)現(xiàn)了相關(guān)的效果。但是我的子菜單中有一個(gè)文本，點(diǎn)擊可以連接到其他頁面，用了這個(gè)方法，就沒法正常點(diǎn)擊那個(gè)文本跳轉(zhuǎn)到對(duì)應(yīng)的頁面了，希望作者解答，謝謝。還有就是我在用的時(shí)候發(fā)現(xiàn)作者說的那個(gè)最優(yōu)方法，自動(dòng)調(diào)整為內(nèi)容尺寸已經(jīng)默認(rèn)勾選上了，但是好像沒什么用
發(fā)你的原型文件，我?guī)湍憧纯?/p>
不是很懂啊，不是有“菜單”這個(gè)元件嗎，為啥還要另外畫一個(gè)呢？？？？直接放個(gè)菜單，然后設(shè)置界面滾動(dòng)時(shí)菜單移動(dòng)不就好了？？？
意思是，菜單固定浮動(dòng)在瀏覽器頂部， 然后還有二級(jí)菜單， ，用了個(gè)笨辦法讓子菜單能顯示出來，如果看不懂，表示你沒有遇到類似的問題，這個(gè)問題比較小眾
axure8里有一個(gè)元件叫“菜單”，可以添加子菜單，默認(rèn)鼠標(biāo)懸浮時(shí)顯示出來，而且他們是一體的
嗯 ，這個(gè)我知道， 我這里一定要實(shí)現(xiàn)，讓菜單固定且浮動(dòng)在頂部，這時(shí)候必須要借助動(dòng)態(tài)面板，而加了動(dòng)態(tài)面板，如果面板過大，會(huì)遮擋網(wǎng)頁正常的內(nèi)容，過小，會(huì)讓子菜單顯示不出來，如果你只是普通菜單，不需要固定且浮動(dòng)在頂部，就不需要看這個(gè)文章，這個(gè)文章是比較小眾的需求 ??
“菜單”再加上頁面滾動(dòng)到一定范圍時(shí)移動(dòng)元件到指定位置不就好了？ 就好比這個(gè)網(wǎng)站頂部這個(gè)菜單欄一樣的效果
這個(gè)“菜單” 我設(shè)置成了母板，多個(gè)頁面共用，菜單還有背景色，比較復(fù)雜，似乎無法用移動(dòng)到具體位置（比較麻煩），我文章給出的第二個(gè)方案則相對(duì)來說是最優(yōu)方案，設(shè)置也方便
窗口滾動(dòng)—添加條件–當(dāng)前位置大于元件位置—移動(dòng)元件到—-當(dāng)前位置 Y左標(biāo)變量[[Window.scrollY]]
最新研究出的方法： 直接選中 包裹菜單的動(dòng)態(tài)面板， 鼠標(biāo)右鍵，設(shè)置 【自動(dòng)調(diào)整為內(nèi)容尺寸】，請(qǐng)點(diǎn)贊，頂上去
請(qǐng)問 axure7怎么實(shí)現(xiàn)？
最新研究出的方法： 直接選中 包裹菜單的動(dòng)態(tài)面板， 鼠標(biāo)右鍵，設(shè)置 【自動(dòng)調(diào)整為內(nèi)容尺寸】