響應菜單 - 如何？

Question

我正在構建一個相當簡單的響應菜單，並且我在重新排列子菜單時遇到了一些麻煩。所以基本上我有4個菜單點。其中3個有子菜單，一個只是超鏈接。菜單的設置綁定到屏幕寬度：

寬屏幕：

menu point 1 | menu point 2 | menu point 3 | menu point 4 

子菜單應該出現在整個事情的底部屏幕

中旬

menu point 1 | menu point 2 
menu point 3 | menu point 4 

子菜單應該出現在選擇的菜單點的正下方，所以如果我點擊第2點，子菜單應該出現在2個菜單行之間

個

最小screns

menu point 1 
menu point 2 
menu point 3 
menu point 4 

相同的屏幕中旬，菜單應該會出現正下方的選擇點。

所以我的菜單代碼實際工作的屏幕中期才能：

<ul id="mainMenu"> 
    <li>menu point 1 (just hyperlink)</li> 
    <li>menu point 2</li> 
    <ul id="subMenu2"> 
    <li> ... </li> 
    </ul> 
    <li>menu point 3</li> 
    <li>menu point 4</li> 
    <ul id="subMenu3"> 
     <li> ... </li> 
    </ul> 
    <ul id="subMenu4"> 
     <li> ... </li> 
    </ul> 
</ul> 

基本列表subMenu2，subMenu3和subMenu4不得不在不同的屏幕尺寸不同的位置，所以這個版本將工作最小屏幕：

<ul id="mainMenu"> 
    <li>menu point 1 (just hyperlink)</li> 
    <li>menu point 2</li> 
    <ul id="subMenu2"> 
    <li> ... </li> 
    </ul> 
    <li>menu point 3</li> 
    <ul id="subMenu3"> 
     <li> ... </li> 
    </ul> 
    <li>menu point 4</li> 
    <ul id="subMenu4"> 
     <li> ... </li> 
    </ul> 
</ul> 

我甚至不確定這是否正確的做法！？任何提示都非常感謝。

問候，

邁克爾

Answer 1

您可以使用樣式媒體查詢在給定的屏幕尺寸的任何元素。只要做這樣的事情：

@media (max-width: 768px /* Or whatever size you want */) { 
    .myElement { 
     /* Styles go here */ 
    } 
} 

使用這種方法，您可以根據屏幕大小更改子菜單的位置。另外，你有沒有使用下拉菜單？下面是一些有用的鏈接：

• 媒體查詢：https://www.w3schools.com/css/css_rwd_mediaqueries.asp
• 如何建立一個下拉菜單：https://www.w3schools.com/howto/howto_js_dropdown.asp

編輯：

這裏有徹底改變的位置處的例子基於屏幕大小的div：

HTML

<div></div> 

CSS

div { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 200px; 
    width: 200px; 
    background: red; 
} 

@media (max-width: 768px) { 
    div { 
    left: auto; 
    right: 0; 
    } 
} 

Codepen

希望這有助於！