gpt4 book ai didi

jquery - 我的移动汉堡包与其他子菜单项重叠

转载 作者:太空宇宙 更新时间:2023-11-04 01:23:38 25 4
gpt4 key购买 nike

一旦我点击一个元素,我的移动汉堡菜单就会与所有其他元素重叠。
因此无法看到或点击所有其他元素。
我该如何解决这个问题?

我的站点(在移动 View 中使用):http://sstromberg.saldev.nl/index.html

图片更清晰:

之前:https://imgur.com/a/NOr6W之后:https://imgur.com/a/DWnle

点击“CV”后,“Portfolio”和“Overig”就消失了。

我的 HTML/CSS 和 JQuery 代码:

$(document).ready(function() {
$('.icon').on('click', function() {
$("#menu").slideToggle();
});
});
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
}
.icon {
width: 35px;
margin: auto;
}
ul#menu>li {
width: 100%;
display: block;
}
ul#menu>li>ul.submenu {
display: none;
}
ul#menu>li:hover>ul.submenu {
display: block;
list-style: none;
margin: 0;
padding: 0;
background-color: #f3f3f3;
}
ul#menu a:hover {
transform: scale(1.1);
}
ul#menu {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
font-family: sans-serif;
background-color: #f3f3f3;
}
ul#menu a {
display: block;
padding: 1em;
/* met 1em word de ruimte tussen de list items 2x zo groot */
font-family: sans-serif;
color: #FF4136;
text-decoration-line: none;
font-weight: bold;
}
.submenu {
left: -50%;
right: -50%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger-menu">
<div class="icon">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li>
<a>CV</a>
<ul class="submenu">
<li><a href="pgegevens.html">Persoonlijke Gegevens</a></li>
<li><a href="werkervaring.html">Werkervaring</a></li>
<li><a href="opleiding.html">Opleiding</a></li>
</ul>
</li>
</ul>
</div>

最佳答案

position: relative; 而不是 position: absolute; 添加到 ul#menu > li:hover > ul.submenu 并删除 左:-50%; right: -50%; from .submenu 应该就可以了。当子菜单是绝对位置时,它不占用空间并越过下面的菜单,但相对位置时,它会占用空间并移动其他菜单项。确保在仅针对移动菜单的媒体查询中执行此操作,因为桌面菜单需要子菜单上的 position: absolute;

关于jquery - 我的移动汉堡包与其他子菜单项重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48526237/

25 4 0