CSS网格下拉菜单

问题描述 投票：1回答：1

单击汉堡包图标时，我希望下拉菜单将内容覆盖在标题下方。目前，问题在于下拉菜单将内容推下而不是覆盖。我尝试摆弄z-index和定位，但似乎无济于事。

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})
        }
    }
})
html css drop-down-menu css-grid
1个回答
0
投票

在此部分中，导航下显示的部分，现在内容不在导航栏中

  • 部分。您能检查一下并告诉我您要如何显示它以及在哪里显示吗？

    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;
    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;
    margin-top: 35px;
    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 {
    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);
    margin-top: 20px;
    justify-content: center
}

.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>
            <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> 
                <div class="home">
                  <img src="./img/Logo.png" alt="Rockville Volleyball Academy Logo" class="home-logo">
              </div>
            </nav>
           
        </header>

        <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>
    • 最新问题
    © www.soinside.com 2019 - 2024. All rights reserved.