时间戳

首页 > 解决方案 > 获取响应式 Javascript 菜单以堆叠在 img 下。

javascript - 获取响应式 Javascript 菜单以堆叠在 img 下。

问题描述

在多次尝试解决此问题后，我现在需要您的帮助。我创建了一个带有徽标的菜单系统。我的挣扎是，当@media 达到 823px 时，菜单不会堆叠在徽标下。有人看到我的问题的解决方案吗？

代码和 CSS 可以在这个 codepen https://codepen.io/Daxtux/pen/zJLgBX上找到

<a href="#news"><img src="Logo.png" alt="Logo" style="float:left;width:110px;"></a>
<div class="Navigasjon" id="Toppnavigasjon">
<a href="#news">MENY 1</a>
<a href="#Howto">MENY 2 </a>
<a href="#about">MENY 3</a>
<a href="#about">MENY 4</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i></a>
</div>

非常感谢所有帮助！

标签： javascripthtmlcss

解决方案

因此，您希望单击右上角的汉堡菜单，然后菜单出现在徽标下方？我的第一个问题是为什么不一直把它放在标志下面。

但是忽略这一点，我的建议是将徽标和标题全部放在一个包含 div 的地方，然后使用display: flex;或display: grid;设置它们，使它们按照您想要的方式落下。

例如，如果您制作了容器width: 100%; display: flex; justify-content:space-between;flex-wrap: wrap;然后放置min-width: 450px;在每个子元素上，那么只要容器的宽度小于 900 像素，子元素就会自动换行到下一行。

你可以使用 display:grid; 做类似的事情。通过将 更改为grid-template-columns: 1fr 1fr;较小grid-template-columns: 1fr;的媒体查询大小。

推荐阅读