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

希望这有帮助！

响应式菜单 - 如何？

1 个答案: