我正在构建一个非常简单的响应式菜单,但在重新排列子菜单时遇到了一些问题。所以基本上我有 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>
我什至不确定这是不是正确的方法!?非常感谢任何提示。
问候,
迈克尔
最佳答案
您可以使用媒体查询为给定屏幕尺寸的任何元素设置样式。只需做这样的事情:
@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;
}
}
希望这对您有所帮助!
关于html - 响应式菜单 - 如何?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43257368/