僅CSS下拉菜單不使用UL / LI

Question

我是一個新手/自學HTML的家伙。 我需要編輯我的（靜態）網站菜單，以使其在接下來的4天內適合Google移動訪問。 我要弄清楚該怎么做才傷腦筋，但是到目前為止還沒有運氣，所以我變得絕望了。 如果屏幕寬度小於Xpx，則使我的整個網站變得移動友好的方法是設置視口並更改CSS。

我只需要使用CSS將以下菜單轉換為菜單按鈕即可。 即在移動視圖中，將整個菜單隱藏在屏幕頂部的按鈕內，然后通過單擊按鈕使菜單出現/下拉。

這是我在網站上提供的示例菜單：www.oikotrust.gr/en這是我到目前為止管理的移動友好菜單（在此處僅供參考）：www.oikotrust.gr/index-mobile.html

<div class="menu">
<div class="menu_btn here">ΑΡΧΙΚΗ ΣΕΛΙΔΑ</div>
<div class="menu_btn"><a href="info.html">ΕΝΟΙΚΙΟ</a></div>
<div class="menu_btn"><a href="photos.html">ΦΩΤΟΓΡΑΦΙΕΣ</a></div>
<div class="menu_btn"><a href="contact.php">ΕΠΙΚΟΙΝΩΝΙΑ</a></div>
</div>

原始頁面中的相關CSS

.menu{margin-top:50px; float:left; margin-left:none;}
.menu_btn{height:35px; font-weight:bold; padding-top:10px; width:100%; padding-left:20px; font-size:18px;}
.here{background-image:none; background-repeat:no-repeat; color:#E5541C;}

所有和任何幫助深表感謝！

Answer 1

您不需要“轉換”菜單，沒有必要。 您可以使用媒體查詢來根據視口對內容進行樣式設置，還可以使用“可見性”屬性為不同視口設置不同的元素。

小提示：始終在頂部為寬媒體查詢寫css，然后再向較小的寬媒體查詢寫css，直到到達最小視口為止。

我前一段時間寫過一篇文章，也許對您有幫助： http : //readingssexy.com/blogpost/how-to-use-media-queries.html

Answer 2

由於類菜單是其所有子子級的父類，因此您可以使用媒體查詢為移動屏幕隱藏該類，您可以在菜單上方放置一個div並將按鈕代碼放置在此處，這樣會發生在菜單上的移動屏幕上用戶將首先單擊此按鈕時可以將其隱藏，您可以向他顯示菜單或切換菜單打開/關閉狀態。 希望你能得到這個。