iT邦幫忙

0

真正的RWD漢堡排實作方式?

假設原本上方會有一排菜單長這樣
https://imgur.com/tUOegCe

當變成手機版時會變成漢堡排
而這些字都會收納到漢堡排中
我現在是用一個很詭異的方式
假設現在有A區塊跟B區塊
電腦版時顯示A區塊,隱藏B
手機版時顯示B區塊,隱藏A
也就是說手機版的區塊中會有漢堡排跟手機版樣式的菜單
電腦版則就是像上方的圖一樣
就像這樣

<?=$DESKTOP;?>
    <a class="section-btn ease-in-out" href="#section-2">服務介紹</a>
    <a class="section-btn ease-in-out" href="#section-3">成功案例</a>
    <a class="section-btn ease-in-out" href="#section-4">聯絡我們</a>
<?=$END?>

<?=$MOBILE;?>
<i class="material-icons header-device-menu-btn">dehaze</i>
<div class="header-device-menu-layout display-none">
    <a class="section-btn ease-in-out" href="#section-2">服務介紹</a>
    <a class="section-btn ease-in-out" href="#section-3">成功案例</a>
    <a class="section-btn ease-in-out" href="#section-4">聯絡我們</a>
</div>
<?=$END?>

請問這種漢堡排情況,什麼是「常規」的做法?

看更多先前的討論...收起先前的討論...
ccutmis iT邦高手 9 級 ‧ 2019-10-18 09:53:40 檢舉
重點是顧客要滿意,一個漢堡或兩個漢堡都不是問題。
小松 Nana iT邦研究生 3 級 ‧ 2019-10-18 09:56:35 檢舉
我發現我的做法好像不是很好
所以想問問高手們的做法會是如何
小松 Nana iT邦研究生 3 級 ‧ 2019-10-18 09:57:05 檢舉
網上都只有教怎麼「做漢堡排」
好像沒人分享從電腦版到手機版的漢堡排變化(或是我不知道怎麼下關鍵字)
ccutmis iT邦高手 9 級 ‧ 2019-10-18 10:20:24 檢舉
我是低手,不過我覺得這個作法比較簡單:
你有兩個漢堡(選單)
用 media query去處理在電腦版或移動設備顯示&隱藏哪個就可以了

比較高級的作法就是只有一個漢堡(選單)
用css處理在電腦版呈現一般選單效果(例如水平),而在移動設備變成 漢堡 (三)
ccutmis iT邦高手 9 級 ‧ 2019-10-18 10:23:09 檢舉
這個你參考看看...
http://www.web3d.url.tw/ITHELP/CSS_20190927/
dragonH iT邦大師 1 級 ‧ 2019-10-18 10:34:15 檢舉
報告 ccutmis大

我用 browser device mode 去看會沒辦法正常顯示漢堡排

需要真正調整 browser 的 寬度才行
ccutmis iT邦高手 9 級 ‧ 2019-10-18 10:50:29 檢舉
@dragonH
謝謝告知,已調好了,發生原因是那個頁面我忘了加meta viewport XD
dragonH iT邦大師 1 級 ‧ 2019-10-18 10:53:37 檢舉
喔喔

原來如此

想說單看 css code 沒什麼問題呀XD

2 個回答

1
clps935419
iT邦新手 5 級 ‧ 2019-10-18 18:21:30
最佳解答

其實不用兩個選單壓,在觸發漢堡選單的部分可以使用lable 搭配checkbox 去觸發,
接著再利用寫好的chekbox去寫CSS,所以你漢堡選單的lable丟在選單裡面或外面都沒有差,利用"~"選擇器去控制你的menu,範例:&:checked ~ menu{被點開之後要變成怎樣}。

接下來是RWD的部分,如果原本的選單是橫的.menu{ display:flex:},然後RWD變成直的就.memu{flex-direction:colum},但是還需考慮選單左右滿版就加入position:fixed;left:0;right:0,top部分自行考慮,至於變回電腦版就加入語法position:static就好

3
dragonH
iT邦大師 1 級 ‧ 2019-10-18 10:10:38

我不知道高手都怎麼做

不過可以直接用 bootstrap 就好

copepen

有更多值得煩惱的問題在等你 /images/emoticon/emoticon11.gif

想知道怎麼達成

可以去觀察 bootstrap 這功能的 css 變化

然後不知道你判斷電腦板或手機板的標準

如果真是字面上的意思

那我用電腦板

視窗拉小

你的 UI 不就毀了

小魚 iT邦大師 1 級 ‧ 2019-10-18 10:51:42 檢舉

有更多值得煩惱的問題在等你

大概那些問題都沒機會煩惱吧.

dragonH iT邦大師 1 級 ‧ 2019-10-18 10:53:53 檢舉

/images/emoticon/emoticon26.gif

ccutmis iT邦高手 9 級 ‧ 2019-10-18 11:01:38 檢舉

大概那些問題都沒機會煩惱吧.

佛說 能解決的事不用煩腦,不能解決的事煩腦也沒用。

所以 你懂der... /images/emoticon/emoticon73.gif

我要發表回答

立即登入回答