如何让汉堡导航菜单在导航栏下方展开而非内部？

问题 #

实现汉堡图标导航菜单时，菜单内容在导航栏内部展开，无法显示在导航栏下方。

核心问题点 #

1. 导航栏 .navHeader 设置了固定高度 height: 65px 和 overflow: hidden，菜单展开后超出部分直接被隐藏
2. 菜单容器 #myLinks 使用相对定位，仍处于导航栏的flex布局范围内，无法突破导航栏边界
3. 导航栏的 display: flex 布局限制了子元素的排列空间，菜单展开后只能挤在导航栏内部

修复代码 #

修改后的HTML（结构无需调整，仅需修改CSS） #

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <title>Buck's Farmstand</title>
    <link rel="icon" type="image/x-icon" href="G:\webDev\bucks_farmstand\images\tomatoFaviconRounded.ico">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="G:\webDev\bucks_farmstand\css\bucksMobileIndexStyles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body id="mainPageBody">
    <header class="navHeader">
        <div class=buttonContainer>
            <a class="cta" href="G:\webDev\bucks_farmstand\html\bucksContact.html"><button>Contact</button></a>
        </div>
        <div class=logoContainer>
            <a href="#"><img class="logo" src="G:\webDev\bucks_farmstand\logos\newBucksLogo.jpg" alt="logo"></a>
        </div>
        <div id="myLinks">
            <a href="G:\webDev\bucks_farmstand\html\bucksInventory.html">Produce</a>
            <a href="G:\webDev\bucks_farmstand\html\bucksPickUpComingSoon.html">Online-Order</a>
            <a href="G:\webDev\bucks_farmstand\html\bucksAbout.html">About</a>
            <a href="G:\webDev\bucks_farmstand\html\bucksContact.html">Contact</a>
        </div>
        <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
        <a href="javascript:void(0);" class="hamIcon" onclick="myFunction()">
             <i class="fa fa-bars"></i>
        </a>
        
        <script>
        function myFunction() {
            var x = document.getElementById("myLinks");
            if (x.style.display === "block") {
                 x.style.display = "none";
            } else {
                    x.style.display = "block";
            }
        }
        </script>   

    </header>
        
    <br>    

</body> 
</html>

修改后的CSS #

/*overrides everything for specifc page*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /*background-color: #FFDAB9;*/
    overflow: auto;
}

/*referring to all of these categories not specifc to a class/ID*/
li, a, button {
    font-family: "cursive", cursive;
    font-weight: 500;
    font-size: 16px;
    color: #000000;
    text-decoration: none;
}

/*Bucks Nav CSS*/
/*Can add an href tag/ref here for logo to direct to*/
.logo{
    object-fit: cover;
    position: relative;
    height: 60px;
    width: 100%;
    cursor: pointer;    
}

.logoContainer{
    margin: auto;
    position: relative;
    right: 35px;
}

.navHeader{
    position: fixed;
    width: 100%;
    background: #deb887;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 2%;
    /* 移除固定高度，改用最小高度 */
    min-height: 65px;
    /* 移除overflow hidden，避免菜单被截断 */
    /* overflow: hidden; */
    flex-wrap: wrap;
    z-index: 950;
}

.navHeader #myLinks{
    display: none;
    /* 绝对定位，脱离flex布局，定位在导航栏下方 */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #deb887;
    padding: 10px 2%;
}

/* 让菜单链接垂直排列 */
.navHeader #myLinks a {
    display: block;
    margin: 8px 0;
}

/* Style the hamburger menu */
.hamIcon {
    overflow: auto;
    background: none;
    display: block;
    /* 改为相对定位，跟随导航栏布局 */
    position: relative;
    right: 0;
    top: 0;
}

.cta{
    background: #deb887;
    overflow: hidden;
    width: 15%;
}

.buttonContainer{
    overflow: hidden;
}

button{
    padding: 9px 5px;
    background-color: rgba(35,255,0,0.5);
    border: 2px solid;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

button:hover{
    background-color: yellow;
}

关键修改说明 #

• 导航栏改用 min-height: 65px，保留基础高度的同时允许菜单展开时撑开空间
• 移除 overflow: hidden，确保菜单内容不会被截断
• #myLinks 设置绝对定位 top: 100%，刚好对齐导航栏底部，宽度设为100%铺满屏幕
• 给菜单添加背景色，和导航栏保持一致，视觉上更统一
• 汉堡图标改为相对定位，避免脱离导航栏布局导致位置偏移

内容的提问来源于stack exchange，提问作者TheAmateurCoder