响应式菜单 - 如何？

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 个菜单行之间

最小的屏幕

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

希望这会有所帮助！