html - 响应式菜单 - 如何？

Question

我正在构建一个非常简单的响应式菜单，但在重新排列子菜单时遇到了一些问题。所以基本上我有 4 个菜单点。其中 3 个有子菜单，一个只是一个超链接。菜单的排列与屏幕宽度绑定(bind):

宽屏:

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，子菜单应该出现在两行菜单之间

最小的屏幕

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

希望这对您有所帮助!