如何创建在英雄内容顶部下拉的响应式菜单（Tailwind CSS ...）[关闭]

Posted 2023-03-07

【中文标题】如何创建在英雄内容顶部下拉的响应式菜单（Tailwind CSS ...）[关闭]

【英文标题】：How to create responsive menu that drops-down on TOP of hero content (Tailwind CSS...) [closed]

【发布时间】：2019-11-25 13:26:10

【问题描述】：

我正在开发一个网站（我第一次使用 tailwind CSS），我为导航栏抓取并调整了一些代码。

在此处实时查看：--已编辑

导航栏在桌面上对我来说看起来很棒，在移动设备的下拉菜单上，除了我想让菜单下拉到英雄内容的顶部，而不是向下推。

我写 CSS 已经有一段时间了，但我认为部分问题可能与我在当前版本中使用 flexbox 的方式有关。我的记忆让我觉得我必须对 position: absolute 和 position: relative 进行一些调整，但我不知道我需要在这里做什么：/

有什么想法/建议吗？

【参考方案1】：

您需要将子菜单 CSS 设置为绝对位置，这样它就不会影响页面上的任何内容，并且其父级处于相对位置。

CSS

nav
    position:relative;


#nav-content
    position:absolute;
    top:58px; /*Your navigation height*/
    background-color:#FFF;
    left:0px;        

希望这会有所帮助。

【讨论】：

是的，原则上我明白这一点。在当前设置中，这破坏了我的布局；它从桌面的 flexbox 对齐中删除导航，除了从白色标题中删除自身。

如果您在仅针对 1024 像素（移动版菜单）以下的屏幕的媒体查询中添加代码，则不会影响您的桌面导航。 @media (max-width: 1024px)