时间戳

首页 > 解决方案 > 2020 年将导航栏响应式转换为下拉菜单的最佳方式？

javascript - 2020 年将导航栏响应式转换为下拉菜单的最佳方式？

问题描述

谷歌排名靠前的结果是 2011 年的CSS Tricks 指南，它使用了突兀的 jQuery。这是在 2020 年将菜单转换为下拉列表的最佳方式吗？到目前为止，我正在处理的网站只有 HTML/CSS，所以我更愿意保持这种方式（但我很灵活）。

这是我目前正在使用的。

header {
    width: 60%;
    margin: 0 auto;
}

header #logo {
    float: left;
}

header nav {
    float: right;
}

header li {
    float: left;
    display: inline;
    margin-left: 10px;
}

@media (max-width: 960px) {
    {
        /*TBC*/
    }
}
<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
    <link rel="stylesheet" type="text/css" href="./test-styles.css">
</head>
<body>
    <header>
        <div class="header-container">
            <div id="logo">
                <h2><a href="home.html">MyCompany</a></h2>
            </div>
            <nav>
                <ul>
                    <li><a href="/services.html">Services</a></li>
                    <li><a href="/contact-us.html">Contact Us</a></li>
                    <li><a href="/privacy.html">Privacy</a></li>
                </ul>
            </nav>
        </div>
    </header>
</body>
</html>

我希望导航栏转换为宽度小于 960 像素的菜单（因此是媒体查询）。

任何帮助，将不胜感激

标签： javascripthtmljquerycss

解决方案

您完全可以使用纯 HTML / CSS 来完成。

我个人喜欢使用display: grid和grid-area属性将元素从一列移动到另一列，旁边是display / hide。

<header>
    <div id="nav-container" class="nav-transparent">
        <nav>
            <div class="navbar-column" id="left-menu">
                <a class="nav-item" href="#">COMPANY</a>
            </div>
            <div class="navbar-column" id="right-menu">
                <a class="nav-item" href="#">Services</a>
                <a class="nav-item" href="#">Contact us</a>
                <a class="nav-item" href="#">Privacy</a>
            </div>
            <div class="navbar-column" id="burger-menu-toggle-container">
                <input type="checkbox" id="burger-menu-toggle">
                <div id="bar1" class="bar"></div>
                <div id="bar2" class="bar"></div>
                <div id="bar3" class="bar"></div>
                <div id="burger-menu">
                    <div id="burger-menu-content">
                        <div id="burger-menu-header">
                        </div>
                        <div id="burger-menu-body">
                            <div id="burger-menu-links">
                                <div class="burger-menu-link">
                                    <a href="#">
                                </div>
                                <div class="burger-menu-link">
                                    <a class="nav-item" href="#">Services</a>
                                </div>
                                <div class="burger-menu-link">
                                    <a class="nav-item" href="#">Contact us</a>
                                </div>
                                <div class="burger-menu-link">
                                    <a class="nav-item" href="#">Privacy</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="burger-menu-footer">
                    </div>
                </div>
            </div>
        </nav>
</header>

如果当前视口宽度> 960px，我们只以经典导航栏的形式显示左菜单和右菜单元素。您注意到我们有第三个 div，它是下拉菜单切换器，当宽度> 960px时隐藏。

当宽度< 960px时，我们隐藏右键菜单并改为显示burger-menu-toggle-container 。然后我们使用grid-area 属性将它移到左边。当然你可以选择让它在右边。

nav {
    max-width: 1268px;
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr ; 
    grid-template-areas: 'left right';
    margin: 0 auto;
}

#burger-menu-toggle-container {
    display: none;
    transition: .4s;
    padding: 6px;
}

@media screen and (max-width: 960px) {
    #right-menu {
        display: none;
    }
    #burger-menu-toggle-container {
        display: block;
        grid-area: left;
    }
}

下拉菜单切换器实际上是一个复选框。使用:checked选择器和~我们可以通过将其最大高度从0设置为您需要的任何px值来显示/隐藏下拉菜单。

#burger-menu-toggle {
    margin: 0;
    display: block;
    position: absolute;
    width: 35px;
    height: 27px;
    opacity: 0;
    outline: none;
    -webkit-appearance: none;
    border: none;
    z-index: 100;
    cursor: pointer;
}

#burger-menu {
    transition: .4s;
    position: absolute; 
    z-index: 1; 
    left: 0;
    top: 80px;
    width: 100%; 
    max-height: 0;
    overflow: hidden;
}

#burger-menu-toggle:checked ~ #burger-menu {
    max-height: 500px;
    transition: max-height 0.5s ease-in;
}

附件是一个工作示例。

html {
    height: 100%;
    background-color: black;
}

body {
    overflow-x: hidden;
    font-family: 'poiret one';
    font-weight: 400;
    font-size: 1.2em;
    margin: 0;
    min-height: 100%;
    background-color: transparent;
    display: grid;
    grid-template-rows: auto 1fr ;
}

/* hide all scrollbars */
*::-webkit-scrollbar {
    display: none;
}

a {
    color: white;
    text-decoration: none;
}

#nav-container {
    font-weight: bold;
    width: 100%;
    max-height: 100px;
    height: 100%;
    position: fixed;
    z-index: 2;
    transition: .4s;
}

#nav-container a:hover {
    color: rgba(253, 52, 131, .9);
}


nav {
    max-width: 1268px;
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr ; 
    grid-template-areas: 'left right';
    margin: 0 auto;
}

.navbar-column {
    margin: auto 0;
}

#left-menu {
    padding: 12px 6px;
}

#right-menu {
    text-align: right;
}

#burger-menu-toggle-container {
    display: none;
    transition: .4s;
    padding: 6px;
}

#burger-menu-toggle-container:hover .bar {
    background-color: rgba(253, 52, 131, .9);
}

#burger-menu-toggle {
    margin: 0;
    display: block;
    position: absolute;
    width: 35px;
    height: 27px;
    opacity: 0;
    outline: none;
    -webkit-appearance: none;
    border: none;
    z-index: 100;
    cursor: pointer;
}

#bar1, #bar2, #bar3 {
    width: 32px;
    height: 4px;
    background-color: rgba(225, 225, 225, 1);
    border-radius: 6px;
    margin: 6px 0;
    transition: 0.5s;
}

#burger-menu-toggle:checked ~ #bar1 {
    -webkit-transform: rotate(45deg) translate(-6px, 4px) ;
    transform: rotate(45deg) translate(6px, 6px) ;
}

#burger-menu-toggle:checked ~ #bar2 {opacity: 0;}

#burger-menu-toggle:checked ~ #bar3 {
    -webkit-transform: rotate(-45deg) translate(-8px, -8px) ;
    transform: rotate(-45deg) translate(8px, -8px) ;
}

#burger-menu-toggle:checked ~ #burger-menu {
    max-height: 500px;
    transition: max-height 0.5s ease-in;
}

#burger-menu {
    transition: .4s;
    position: absolute; 
    z-index: 1; 
    left: 0;
    top: 80px;
    width: 100%; 
    max-height: 0;
    overflow: hidden;
}

#burger-menu-body {
    border-radius: 2px;
    display: grid;
    position: relative;
    margin: auto;
    padding: 4px;
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

#burger-menu-links {
    display: grid;
    grid-template-rows: 1fr;
}

.burger-menu-link {
    padding: 5px;
}

@media screen and (max-width: 960px) {
    #right-menu {
        display: none;
    }
    #burger-menu-toggle-container {
        display: block;
        grid-area: left;
    }
}

.nav-item {
    padding: 2px;
}
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale = .9,maximum-scale = .9" />
    </head>
    <body class="sm-section">
        <header>
            <header>
                <div id="header">
                    <div id="nav-container" class="nav-transparent">
                        <nav>
                            <div class="navbar-column" id="left-menu">
                                <a class="nav-item" href="/">COMPANY</a>
                            </div>
                            <div class="navbar-column" id="right-menu">
                                <a class="nav-item" href="#">Services</a>
                                <a class="nav-item" href="#">Contact us</a>
                                <a class="nav-item" href="#">Privacy</a>
                            </div>
                            <div class="navbar-column" id="burger-menu-toggle-container">
                                <input type="checkbox" id="burger-menu-toggle">
                                <div id="bar1" class="bar"></div>
                                <div id="bar2" class="bar"></div>
                                <div id="bar3" class="bar"></div>
                                <div id="burger-menu">
                                    <div id="burger-menu-content">
                                        <div id="burger-menu-header">
                                        </div>
                                        <div id="burger-menu-body">
                                            <div id="burger-menu-links">
                                                <div class="burger-menu-link">
                                                    <a href="#">
                                                </div>
                                                <div class="burger-menu-link">
                                                    <a class="nav-item" href="#">Services</a>
                                                </div>
                                                <div class="burger-menu-link">
                                                    <a class="nav-item" href="#">Contact us</a>
                                                </div>
                                                <div class="burger-menu-link">
                                                    <a class="nav-item" href="#">Privacy</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="burger-menu-footer">
                                    </div>
                                </div>
                            </div>
                        </nav>
                    </div>
            </header>
            <main>
            </main>
    </body>
<

推荐阅读