Fatal编程技术网
  • html/
  • Html CSS网格下拉菜单

Html CSS网格下拉菜单

html css drop-down-menu

Html CSS网格下拉菜单,html,css,drop-down-menu,css-grid,Html,Css,Drop Down Menu,Css Grid,单击汉堡图标时，我希望下拉菜单覆盖标题下方的内容。目前，问题是下拉菜单将内容向下推，而不是覆盖内容。我试图摆弄z指数和定位，但似乎没有任何效果 HTML代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

单击汉堡图标时，我希望下拉菜单覆盖标题下方的内容。目前，问题是下拉菜单将内容向下推，而不是覆盖内容。我试图摆弄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>
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=（回调）=>{
如果（document.readyState！=“正在加载”）{
回调函数（）
}否则{
document.addEventListener（'DOMContentLoaded'，回调）
}
}
就绪（（）=>{
const nav_menu=document.getElementById（'nav-menu'））
const nav_icon=document.getElementById（'nav-toggle'））
导航图标。addEventListener（'单击'，（e）=>{
e、 预防默认值（）
导航崩溃（）
})
函数nav_collapse（）{
//设置退出图标
导航图标.classList.toggle（'active'）
如果（！nav_menu.classList.contains（'active'））{
//显示菜单
导航菜单.classList.add（'active'）
导航菜单.style.height='auto'
//获取菜单的计算高度
让高度=导航菜单。客户端高度+px
//将“菜单高度”设置为0以触发向下滑动动画
导航菜单.style.height='0px'
//为下滑效果设置100毫秒延迟
设置超时（（）=>{
导航菜单.style.height=高度
}, 100);
}否则{
//将“菜单高度”设置为0以触发向上滑动动画
导航菜单.style.height='0px'
//动画结束时折叠菜单
nav_菜单。addEventListener（'transitionend'，（）=>{
导航菜单.classList.remove（'active'）
}，{once:true}）
}
}
})
    ：根目录{
--原色：#000A41；
--次要颜色：#c62828；
}
html{
框大小：边框框；
}
*，*：：之前，*：：之后{
框大小：继承；
}
身体{
保证金：0；
填充：0；
字体系列：“蒙特塞拉特”，无衬线；
}
标题{
背景色：var（--原色）；
颜色：#fff；
显示：网格；
}
/******************/
/*导航栏*/
/******************/
导航{
网格柱：1/6；
网格行：2/3；
}
导航ul{
列表样式：无；
保证金：0；
填充：0；
溢出：隐藏；
过渡：高度400ms；
}
导航ul:未启用（.active）{
显示：无；
}
李海军{
文本对齐：居中；
填充：25px 10px 25px 10px；
边框顶部：2个实心#fff；
z指数：10；
}
李导航：悬停{
背景色：var（--二次色）；
}
导航a{
文字装饰：无；
文本转换：大写；
颜色：#fff；
}
.导航开关{
网格柱：5/6；
地点：中心；
位置：相对位置；
光标：指针；
宽度：50px；
高度：50px；
}
.nav-toggle.active.nav图标{
背景色：rgba（0,0,0,0）；
}
.nav-toggle.active.nav图标：：之前{
排名：0；
变换：旋转（45度）；
}
.nav-toggle.active.nav图标：：之后{
排名：0；
变换：旋转（135度）；
}
.导航图标{
位置：绝对位置；
宽度：40px；
高度：6px；
左：50%；
边缘顶部：25px；
背景色：#fff；
}
.导航图标：之前，
.导航图标：在{
内容：''；
位置：绝对位置；
宽度：40px；
高度：6px；
背景色：#fff；
过渡时间：400ms；
}
.导航图标：之前{
顶部：-12px；
}
.导航图标：在{
顶部：12px；
}
.导航标志{
网格柱：1/2；
地点：中心；
宽度：50px；
边缘顶部：25px；
}
/******************/
/*主页*/
/******************/
.家居标志{
网格柱：2/5；
地点：中心；
宽度：217px；
}
    
文件
RVA

      

    • 

    • 

    • 

    • 

    • 

    •
    你能告诉我吗。你想不想把这个部分放在导航下？我想让导航下拉列表覆盖在徽标上。当我运行代码片段时，它只是将徽标向下推，而不是堆叠在上面。如果我不清楚，请告诉我。好的，如果是正在下降的标志，那么右边的排球标志是什么。你想把这个放进去还是弄错了？如果没有使用该图像，或者我只使用徽标来代替该学院图片或文本，我可以删除该图像。“右侧排球acedemy”抱歉，左侧图像徽标没有脱落，它会固定在导航栏中。只有菜单下来了。如果方便的话，你可以使用文本。检查这个，我用文本代替图像。 
    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})
        }
    }
})