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)容尺寸】