单击汉堡图标时，我希望下拉菜单覆盖标题下方的内容。目前的问题是，下拉菜单正在向下推内容，而不是覆盖它。我试着摆弄z索引和定位，但似乎什么都不起作用。
HTML代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Rubik:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/main.css">
<script src="https://kit.fontawesome.com/da53fde61e.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<img src="../img/Logo.png" class="nav-logo" alt="Rockville Volleyball Academy Logo">
<div id="nav-toggle" class="nav-toggle">
<div class="nav-icon"></div>
</div>
<nav>
<ul id="nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Tournaments</a></li>
<li><a href="#">Recreation</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="home">
<img src="./img/Logo.png" alt="Rockville Volleyball Academy Logo" class="home-logo">
</section>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="../js/script.js"></script>
</body>
</html>
CSS代码
:root {
--primary-color: #000A41;
--secondary-color: #c62828;
}
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
header {
background-color: var(--primary-color);
color: #fff;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 25% 25%;
}
/******************/
/* Navigation bar */
/******************/
nav {
grid-column: 1 / 6;
grid-row: 2 / 3;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
transition: height 400ms ease;
}
nav ul:not(.active) {
display: none;
}
nav li {
text-align: center;
padding: 25px 10px 25px 10px;
border-top: 2px solid #fff;
z-index: 10;
}
nav li:hover {
background-color: var(--secondary-color);
}
nav a {
text-decoration: none;
text-transform: uppercase;
color: #fff;
}
.nav-toggle {
grid-column: 5 / 6;
place-self: center;
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
}
.nav-toggle.active .nav-icon {
background-color: rgba(0, 0, 0, 0);
}
.nav-toggle.active .nav-icon::before {
top: 0;
transform: rotate(45deg);
}
.nav-toggle.active .nav-icon::after {
top: 0;
transform: rotate(135deg);
}
.nav-icon {
position: absolute;
width: 40px;
height: 6px;
left: 50%;
margin-left: -20px;
top: 50%;
margin-top: -3px;
background-color: #fff;
}
.nav-icon:before,
.nav-icon:after {
content: '';
position: absolute;
width: 40px;
height: 6px;
background-color: #fff;
transition: 400ms;
}
.nav-icon:before {
top: -12px;
}
.nav-icon:after {
top: 12px;
}
.nav-logo {
grid-column: 1 / 2;
place-self: center;
width: 50px;
margin: 0.5em;
}
/******************/
/* Home Page */
/******************/
.home {
display: grid;
/* grid-template-rows: 1fr 1fr; */
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 25% 25%;
background-color: var(--primary-color);
}
.home-logo {
grid-column: 2 / 5;
place-self: center;
width: 217px;
}
JS代码
var ready = (callback) => {
if (document.readyState != 'loading') {
callback()
} else {
document.addEventListener('DOMContentLoaded', callback)
}
}
ready(() => {
const nav_menu = document.getElementById('nav-menu')
const nav_icon = document.getElementById('nav-toggle')
nav_icon.addEventListener('click', (e) => {
e.preventDefault()
nav_collapse()
})
function nav_collapse() {
// set exit icon
nav_icon.classList.toggle('active')
if (!nav_menu.classList.contains('active')) {
// display menu
nav_menu.classList.add('active')
nav_menu.style.height = 'auto'
// get computed height of menu
let height = nav_menu.clientHeight + 'px'
// set height of menu to 0 to trigger the slide down animation
nav_menu.style.height = '0px'
// set 100ms delay for slide down effect
setTimeout(() => {
nav_menu.style.height = height
}, 100);
} else {
// set height of menu to 0 to trigger the slide up animation
nav_menu.style.height = '0px'
// collapse menu when animation finishes
nav_menu.addEventListener('transitionend', () => {
nav_menu.classList.remove('active')
}, {once: true})
}
}
})
在本节中，部分显示在导航下，现在内容不会出现在导航部分。你能检查一下，告诉我你想怎么铺，在哪里铺吗？
var ready = (callback) => {
if (document.readyState != 'loading') {
callback()
} else {
document.addEventListener('DOMContentLoaded', callback)
}
}
ready(() => {
const nav_menu = document.getElementById('nav-menu')
const nav_icon = document.getElementById('nav-toggle')
nav_icon.addEventListener('click', (e) => {
e.preventDefault()
nav_collapse()
})
function nav_collapse() {
// set exit icon
nav_icon.classList.toggle('active')
if (!nav_menu.classList.contains('active')) {
// display menu
nav_menu.classList.add('active')
nav_menu.style.height = 'auto'
// get computed height of menu
let height = nav_menu.clientHeight + 'px'
// set height of menu to 0 to trigger the slide down animation
nav_menu.style.height = '0px'
// set 100ms delay for slide down effect
setTimeout(() => {
nav_menu.style.height = height
}, 100);
} else {
// set height of menu to 0 to trigger the slide up animation
nav_menu.style.height = '0px'
// collapse menu when animation finishes
nav_menu.addEventListener('transitionend', () => {
nav_menu.classList.remove('active')
}, {once: true})
}
}
}):root {
--primary-color: #000A41;
--secondary-color: #c62828;
}
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
header {
background-color: var(--primary-color);
color: #fff;
display: grid;
}
/******************/
/* Navigation bar */
/******************/
nav {
grid-column: 1 / 6;
grid-row: 2 / 3;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
transition: height 400ms ease;
}
nav ul:not(.active) {
display: none;
}
nav li {
text-align: center;
padding: 25px 10px 25px 10px;
border-top: 2px solid #fff;
z-index: 10;
}
nav li:hover {
background-color: var(--secondary-color);
}
nav a {
text-decoration: none;
text-transform: uppercase;
color: #fff;
}
.nav-toggle {
grid-column: 5 / 6;
place-self: center;
position: relative;
cursor: pointer;
width: 50px;
height: 50px;
}
.nav-toggle.active .nav-icon {
background-color: rgba(0, 0, 0, 0);
}
.nav-toggle.active .nav-icon::before {
top: 0;
transform: rotate(45deg);
}
.nav-toggle.active .nav-icon::after {
top: 0;
transform: rotate(135deg);
}
.nav-icon {
position: absolute;
width: 40px;
height: 6px;
left: 50%;
margin-top: 25px;
background-color: #fff;
}
.nav-icon:before,
.nav-icon:after {
content: '';
position: absolute;
width: 40px;
height: 6px;
background-color: #fff;
transition: 400ms;
}
.nav-icon:before {
top: -12px;
}
.nav-icon:after {
top: 12px;
}
.nav-logo {
grid-column: 1 / 2;
place-self: center;
width: 50px;
margin-top: 25px;
}
/******************/
/* Home Page */
/******************/
.home-logo {
grid-column: 2 / 5;
place-self: center;
width: 217px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Rubik:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/main.css">
<script src="https://kit.fontawesome.com/da53fde61e.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<h2 style="margin: 25px;">RVA </h2>
<div id="nav-toggle" class="nav-toggle">
<div class="nav-icon"></div>
</div>
<nav>
<ul id="nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Tournaments</a></li>
<li><a href="#">Recreation</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>