刚刚完成我的第一个菜单样式左侧导航栏的设计。是否可以使此菜单在没有 javascript 的情况下悬停时具有下拉效果?我找到的大多数答案都不适合我,因为我可能使用了错误的代码来构建真正的菜单。
在示例中,类别“Heren armbanden”是主要类别。当悬停在“Heren armbanden”上时,它下面的 6 个类别应该会下拉。
希望有办法让这项工作成功。欢迎提出任何建议!
最佳答案
虽然您确实说过您正在寻找纯 CSS 解决方案,但您在评论中表示您不会反对 JS 解决方案,我认为这是使用 Javascript 解决您的问题的先决条件(在特别是 jQuery)。
首先,我创建了一个 menu
类,用于包围下拉菜单标题和菜单内容。
<div class="menu">
<div class="container25-a">
<div class="links8">Heren armbanden</div>
</div>
<br>
<div class="heren-armbanden">
<div class="container25-a">
<div class="links4">Schakel armbanden</div>
</div>
<div class="container25-a">
<div class="links4">Leren armbanden</div>
</div>
<div class="container25-a">
<div class="links4">Stalen armbanden</div>
</div>
<div class="container25-a">
<div class="links9">Rubberen armbanden</div>
</div>
<div class="container25-a">
<div class="links4">Graveerbare armbanden</div>
</div>
<div class="container25-a">
<div class="links4">Zilveren armbanden</div>
</div>
</div>
</div>
接下来,我创建了一个 CSS 选择器属性,默认情况下从 View 中隐藏类 heren-armbanden
。
.heren-armbanden {
display: none;
}
最后,我使用 jQuery 为 menu
类添加监听器,并在鼠标进入和离开菜单类时更改 heren-armbanden
类的可见性。
$('.menu').hover(function () {
$('.heren-armbanden').show();
}, function () {
$('.heren-armbanden').hide();
});
总而言之,您的解决方案如下所示:
编辑:根据要求,这里是如何在点击而不是悬停时执行这些操作:
为要点击的链接添加不同的class或id:
<div class="links8" id="nav">Heren armbanden</div>
然后,添加一个事件来监听点击:
$('#nav').click(function () {
$('.heren-armbanden').toggle();
});
关于html - 无法将我的菜单变成下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25022066/