响应 header 不打开或关闭 header

Question

I'm creating a responsive header for a website I'm creating and I'm not getting this output where when my browser gets small enough the bars icon comes up to press.我正在为我正在创建的网站创建一个响应式 header 并且我没有得到这个 output 当我的浏览器变得足够小时，条形图标就会出现。 But for some reason when I try to open up the menu it does not work.但是由于某种原因，当我尝试打开菜单时它不起作用。 I'm looking for some help on this I can't seem to figure it out as I'm not very knowledgeable in JavaScript, CSS, HTML.我正在寻找一些帮助我似乎无法弄清楚，因为我对 JavaScript、CSS、HTML 不是很了解。

HTML HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css1/headercss2.css">
    <script src="javascript/script.js" defer></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container">
            <nav>
                <div class="menu-icons">
                    <i class="fas fa-bars"></i>
                </div>
                <a href="#" class="logo">
                    <img class="logo" src="images/logo_trans.png" alt="logo" style="height: 75px;">
                </a>
                <ul class="nav-list">
                    <li>
                        <a href="#">Home</a>
                    </li>

                    <li>
                        <a href="#">Services
                            <i class="fas fa-sort-down"></i>
                        </a>
                        <ul class="sub-menu">
                            <li>
                                <a href="#">Business Printing</a>
                            </li>
                            <li>
                                <a href="#">Canvas Printing</a>
                            </li>
                            <li>
                                <a href="#">Embroidery</a>
                            </li>
                            <li>
                                <a href="#">Signs</a>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <a href="#">Partners</a>
                    </li>

                    <li>
                        <a href="#">About Us</a>
                    </li>
                    
                    <li>
                        <a href="#">Contact Us</a>
                    </li>
                    
                    <li class="move-right btn">
                        <a href="#">Cart</a>
                    </li>
                    
                
                </ul>
            </nav>
        </div>
    </header>
    <script src="javascript/script.js"></script>
</body>
</html>

CSS CSS

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

html {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.containter {
    width: 100%;
    max-width: 117rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.menu-icons{
    color: #eee;
    font-size: 4rem;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1500;
    display: none;
}

nav {
    display: flex;
    align-items: center;
    width: 100%;
    height: 8rem;
    border-bottom: 1px solid rgba(225,225,225, 0.1);
}

.logo {
    display: flex;
    margin-right: 5rem;
}

.nav-list {
    display: flex;
    width: 100%;
    align-items: center;
}

.nav-list li {
    line-height: 8rem;
    position: relative;
}

.sub-menu li {
    line-height: 4rem;
}

.nav-list a {
    display: block;
    color: white;
    background-color: #1E90FF;
    padding: 0 1.5rem;
    font-size: 1.4rem;
    text-transform: uppercase;
    transition: color 650ms;
}

.nav-list a:hover {
    color: black;
    background-color: yellow;
}

.btn {
    padding: 1.3rem;
    display: inline-block;
    background-color: #1E90FF;
    border: 2px solid #1E90FF;
    border-radius: 5rem;
}

.btn:hover {
    color: black;
    background-color: yellow;
}

.sub-menu {
    width: 20rem;
    display: block;
    position: absolute;
    border-top: 3px solid #00BFFF;
    z-index: 100;
    top: 16rem;
    transition: all 650ms ease;
    opacity: 0;
    visibility: hidden;
}

.sub-menu::before {
    content: '';
    position: absolute;
    top: -2.5rem;
    left: 3rem;
    border: 1.2rem solid transparent;
    border-bottom-color: #00BFFF;
}

.sub-menu .sub-menu::before {
    top: .9rem;
    left: -2.5rem;
    border: 1.2rem solid transparent;
    border-right-color: #00BFFF;
}

.sub-menu .sub-menu{
    border-top: none;
    border-left: 3px solid #00BFFF;
    top: 0;
    left: 160%;
}

.nav-list li:hover > .sub-menu {
    top: 8rem;
    opacity: 1;
    visibility: visible;
}

.sub-menu li:hover > .sub-menu {
    top: 0;
    left: 100%;
}
    
li.move-right {
    margin: auto 0 auto auto;
    line-height: initial;
}

@media screen and (max-width: 850px) {
    .nav-list {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        display:none;
        align-items: initial;
        flex-direction: column;
        background-color: #1E90FF;
        z-index: 1000;
    }
    
    .nav-list li {
        line-height: 6rem;
    }
    
    .sub-menu {
        position: initial;
        border: 3px solid transparent;
        border-left-color: #00BFFF;
        margin-left: 1rem;
        max-height: 0;
    }
    
    .sub-menu::before {
        display: none;
    }
    
    .nav-list li:hover > .sub-menu{
        opacity: 1;
        visibility: visible;
        max-height: initial;
    }
    
    li.move-right {
        margin: 0 auto 0 0;
        line-height: initial;
    }
    
    .menu-icons {
        display: block;
    }
    
    .fas fa-times {
        display: none;
    }
    
    nav.active .fas fa-times{
        display: block;
    }
    
    nav.active .fas fa-bars{
        display: none;
    }
    
    nav.active .nav-list {
        display:flex;
    }
}

JavaScript JavaScript

const selectElement = (element) => document.querySelector(element);

selectElement('.menu-icons').addEventListener('click', () => {
    selectElement{'nav').classList.toggle('active');
);

Answer 1

You have an extra { where you should have a ( :你有一个额外的{你应该有一个( ：

 document.querySelector('.menu-icons').addEventListener('click', () => { document.querySelector('nav').classList.toggle('active'); });

 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { overflow-x: hidden; } html { font-family: 'Montserrat', sans-serif; font-size: 10px; } a { text-decoration: none; } ul { list-style: none; } header { width: 100%; position: absolute; top: 0; left: 0; }.containter { width: 100%; max-width: 117rem; margin: 0 auto; padding: 0 1.5rem; }.menu-icons { color: #eee; font-size: 4rem; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); cursor: pointer; z-index: 1500; } nav { display: flex; align-items: center; width: 100%; height: 8rem; border-bottom: 1px solid rgba(225, 225, 225, 0.1); }.logo { display: flex; margin-right: 5rem; }.nav-list { display: flex; width: 100%; align-items: center; }.nav-list li { line-height: 8rem; position: relative; }.sub-menu li { line-height: 4rem; }.nav-list a { display: block; color: white; background-color: #1E90FF; padding: 0 1.5rem; font-size: 1.4rem; text-transform: uppercase; transition: color 650ms; }.nav-list a:hover { color: black; background-color: yellow; }.btn { padding: 1.3rem; display: inline-block; background-color: #1E90FF; border: 2px solid #1E90FF; border-radius: 5rem; }.btn:hover { color: black; background-color: yellow; }.sub-menu { width: 20rem; display: block; position: absolute; border-top: 3px solid #00BFFF; z-index: 100; top: 16rem; transition: all 650ms ease; opacity: 0; visibility: hidden; }.sub-menu::before { content: ''; position: absolute; top: -2.5rem; left: 3rem; border: 1.2rem solid transparent; border-bottom-color: #00BFFF; }.sub-menu.sub-menu::before { top: .9rem; left: -2.5rem; border: 1.2rem solid transparent; border-right-color: #00BFFF; }.sub-menu.sub-menu { border-top: none; border-left: 3px solid #00BFFF; top: 0; left: 160%; }.nav-list li:hover>.sub-menu { top: 8rem; opacity: 1; visibility: visible; }.sub-menu li:hover>.sub-menu { top: 0; left: 100%; } li.move-right { margin: auto 0 auto auto; line-height: initial; } @media screen and (max-width: 850px) {.nav-list { position: fixed; top: 0; left: 0; height: 100vh; display: none; align-items: initial; flex-direction: column; background-color: #1E90FF; z-index: 1000; }.nav-list li { line-height: 6rem; }.sub-menu { position: initial; border: 3px solid transparent; border-left-color: #00BFFF; margin-left: 1rem; max-height: 0; }.sub-menu::before { display: none; }.nav-list li:hover>.sub-menu { opacity: 1; visibility: visible; max-height: initial; } li.move-right { margin: 0 auto 0 0; line-height: initial; }.menu-icons { display: block; }.fas fa-times { display: none; } nav.active.fas fa-times { display: block; } nav.active.fas fa-bars { display: none; } nav.active.nav-list { display: flex; } }

 <header> <div class="container"> <nav> <div class="menu-icons"> <i class="fas fa-bars"></i> text </div> <a href="#" class="logo"> <img class="logo" src="images/logo_trans.png" alt="logo" style="height: 75px;"> </a> <ul class="nav-list"> <li> <a href="#">Home</a> </li> <li> <a href="#">Services <i class="fas fa-sort-down"></i> </a> <ul class="sub-menu"> <li> <a href="#">Business Printing</a> </li> <li> <a href="#">Canvas Printing</a> </li> <li> <a href="#">Embroidery</a> </li> <li> <a href="#">Signs</a> </li> </ul> </li> <li> <a href="#">Partners</a> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">Contact Us</a> </li> <li class="move-right btn"> <a href="#">Cart</a> </li> </ul> </nav> </div> </header>

响应 header 不打开或关闭 header

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-05-19 17:27:52

响应 header 不打开或关闭 header

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-05-19 17:27:52

解决方案1
1 已采纳 2021-05-19 17:27:52