如何在屏幕縮小時替換菜單？

Question

我有一個水平菜單。

當屏幕寬度低於某個點時，我想用下拉菜單替換此菜單。

我不是在談論響應式菜單，即自動調整自身的菜單。

最響應的教程是關於響應菜單。我想創建一個類似的效果，但我想用下拉列表完全替換水平菜單。

謝謝

Answer 1

你對這個術語感到困惑。你所要求的是一個響應式設計，即一旦窗口縮小到某個寬度以下，就做一些不同的事情。

頁面上都有兩個元素，默認情況下隱藏一個元素，並使用響應式CSS根據瀏覽器寬度隱藏/顯示所需的元素。例如：

.menuDrop{ display:hidden; } 
.menuHoriz{ display:block; } 

@media (max-width: 500px) { 
    .menuDrop{ display:block; } 
    .menuHoriz{ display:hidden; } 
} 

斯泰西，爲自己澄清，我相信你的意思是你不想要的是一個唯一的流體設計，即在菜單簡單地瀏覽器窗口縮小。流暢的菜單與它是否具有響應性是不同的。 @ jainchetan的'MeanMenu'示例既流暢（它最初隨窗口縮小）和響應（在某個點上，設計以逐步方式變化），用Javascript而不是CSS呈現。