Home > database >  Function closing button not working properly
Function closing button not working properly

Time：09-13

For my website I want to show a menu by clicking on the hamburger Icon and closing it by clicking on the close button. However, the closing part is not working properly, I tried assigning an eventlistener to the closing element but i can't figure out why it isn't closing. Does anyone know what I have to alter in my javascript or css how to make this happen?

My code is below:

const menu = document.querySelector(".hamburger button"); // Get dropdown menu when clicking on hamburger Icon

menu.addEventListener("click", function() {
    Showdropdown();
    Exitdropdown();
});
 
// Showing menu content
function Showdropdown() {
  const dropdown = document.querySelector(".hamburgermenu");
  dropdown.classList.toggle("hamburger");
}

// Exiting menu content
function Exitdropdown() {
  const exit = document.querySelector(".hamburgerexit_button");
  exit.classList.toggle("hamburger");
}
/* General styling attributes */ 
html {
    -webkit-text-size-adjust: 100%;
}

* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    text-decoration:none;
    list-style:none;
    box-sizing: border-box;
}

:root {
    --color-primary: #4EC843;
    --color-secondary: #387CFF;
    --color-dashboard: purple;
    --color-hover: #20d62c;
    --color-variant: linear-gradient(30deg, #1565FF, #9FC0ff);
    --color-showcase: #FAFAFA;
    --color-withwithout: #6D6D6D;

    --container-width-lg: 85%;
    --container-width-md: 90%;
    --container-width-sm: 94%;
    --dashboard-width: clamp(210px, 22vw, 325px);

    --transition: all 200ms ease;
    --transition-hamburger: all 180ms ease;
    --tranition-button: all 800ms ease;
}

body * {
    font-family: "Open Sans", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: var(--container-width-sm);
    margin: 0 auto;
}

a {
    color:black;

}

h1, h2, h3, h4 h5{
    line-height:inherit;
}

h1 {
    font-size:3rem;
}

h2 {
    font-size: 1.9rem;
}

h3 {
    font-size:1.363rem;
}

h4 {
    font-size:1.125rem;
}

h5 {
    font-size:0.938rem;
}
.mr-1 {
    margin-right:1rem;
}
.mr-2 {
    margin-right:2rem;
}
.mt-1 {
    margin-top:1rem;
}

.h-6 {
    height:1.5rem;
}

.w-6 {
    width:1.5rem;
}

svg {
    display:flex;
    vertical-align: middle;
}

hr {
    display: flex;
    opacity: 15%;
    width: 3.125rem;
    text-align: center;
}

img {
    width:100%;
    height:auto;
}

section {
    display:block;
}

.relative {
    position: relative;
}

.fixed {
    position: fixed;
}

.transition {
    transition: all 300ms ease;
}


/* Navigation Menu */
    
nav {
    width:100%;
    height:4.5rem;
    position:fixed;
    top:0;
    z-index:11; 
    background: white;
}

.nav_container {
    height:4.5rem;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.nav_menu {
    display:flex;
    align-items: center;
    gap:3.5rem;
    font-size: 0.95rem;
    font-weight:500;
}

.nav_menu button {
    background:none;
    font-size:0.95rem;
    font-weight: 500;
}

.nav_menu button:hover {
    color:grey;
    transition: var(--transition);
}

.nav_menu a:hover {
    transition: var(--transition);
    color: grey;
}

.login_nav {
    display: flex;
    align-items: center;
    gap:1rem;
    font-weight:500;
    font-size: 0.95rem;
}

.login_nav a {
    color:black;
}

.login_nav a:hover {
    transition: var(--transition);
    color:grey;
}

.Login:hover {
    transition: var(--transition);
    color:grey;
}
    
.switchIconRotate {
    transform-origin: center;
    transition: 0.2s;
}

.fa-angle-down {
    color:#6161F2
}

.iconUp .fa-solid {
    transform-origin: center;
    transform: rotate(180deg);
}
  
.demobutton {
    cursor:pointer;
    background-color: var(--color-primary);
    border-radius:2.125rem;
    border:none;
    color: white;
    width:8.125rem;
    height:2.188rem;
    font-weight:500;
    font-size:0.918rem;
}

.demobutton:hover {
    background-color: #20D62C;
    transition:var(--tranition-button);
}

.startingbackground {
    content:'';
    position:relative;
    margin-top:4.5rem;
    width:100%;
    height:100vh;
    background: var(--color-variant);
    border-radius: 0% 0% 75% 0%;
    overflow: hidden;
}

.startingbackground3 {
    display: flex;
    position: relative;
    margin-top: 2rem;
}

.dropbtn {
    cursor: pointer;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown-content {
    position: absolute;
    background-color: white;
    border-radius: 0.4rem;
    padding: 2rem;
    gap:1.5rem;
    opacity: 100%;
    display: none;
}

.dropdown-content2 {
    display:none;
    top:4.5rem;
    right:20rem;
    width:25rem;
    position:absolute;
    padding:0.5rem;
    gap:1.5rem;
    opacity: 100%;
    border-radius:0.4rem;
    background-color:white;
    margin: 0 auto 0 auto;
    transition: 300ms;
}

.show {
    display:flex;
    flex-direction: column;
}

.hamburger {
    display:none;
}

.hamburger_button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: white;
    border-radius: 0.375rem;
    width:2rem;
    height:2rem;
}

.hamburger_button:hover {
    transition: var(--transition-hamburger);
    background-color:rgb(217, 217, 217);
}

.hamburgermenu {
    display:none;
    position: absolute;
    width:100%;
    left:0;
    right:0;
    top:5.5rem;
    box-shadow: 3px 3px 5px 0px rgb(9 30 66 / 20%), 0px 0px 1px rgb(9 30 66 / 31%);
    height:25rem;
    padding:0.5rem;
    background-color:rgb(255, 255, 255);
    border-radius:1rem;
}
.hamburgertopmain {
    padding-top:1.25rem;
    padding-bottom:1.5rem;
    padding-left:1.25rem;
    padding-right:1.25rem;
}

.hamburgermenutop1 {
    display: flex;
    justify-content: space-between;
}
.hamburgerexit_button {
    display:flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    background-color: white;
    border-radius: 0.375rem;
    width:2rem;
    height:2rem;
}
.hamburgerexit_button:hover {
    transition:var(--transition-hamburger);
    background-color:rgb(217,217,217);
}


@media screen and (max-width: 890px) {
    .nav_menu {
        display:none;
    }
    .login_nav {
        display:none;
    }
    .hamburger {
        display:block;
    }
    .nav_container {
        padding-left: 0.3rem;
        margin-left: auto;
    }
    
}
<!DOCTYPE html> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>DraftFlex</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
        <link rel="stylesheet" href="styles.css">
        
        <!-- Font-families -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@400;500;600&display=swap" rel="stylesheet">

        <!-- Animations -->
        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    
        <!-- Fontawesome Icon -->
        <script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>

        <!-- Iconscout CDN -->
        <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    </head>
    
    <body> 
            <!-- Navigation Menu -->
          <header>
            <nav> 
            <div >
                <a href="index.html" ><img src="/icons/logo.svg" alt="logo"></a>          
                <div >
                  <div >
                    <button  onclick="myFunction()"><span>Features</span>&nbsp<i ></i></button>
                    <div  id="myDropdown">
                        <a href="#">Link1</a>
                        <a href="#">Link2</a>
                        <a href="#">Link3</a>
                    </div>
                  </div>
                       <a href="Pricing.html">Pricing</a>
                       <a href="Contact_Us.html">Contact Us</a>
                </div>  
                  
                <div >
                   <a href="#" >Login</a> 
                   <form><button >Get demo</button></form>
                </div>
                
                <div >
                   <button >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                   </button>
                </div>
              </div>
              <div >
                 <div >
                  <div >
                      <div></div>
                      <div >
                      <button >
                          <svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 512 512"><path fill="#231f20" d="m161.737 180.345 18.646-18.646L350.33 331.645l-18.646 18.646z"/><path fill="#231f20" d="m161.674 331.655 169.947-169.947 18.646 18.647L180.32 350.3z"/></svg>
                      </button>
                      </div>
                   </div>
                 </div>
              </div>  
            </nav>
           </header>

CodePudding user response：

You need to add an event listener to the close button as well. I tidied up some of your JavaScript.

const menu = document.querySelector(".hamburger button"); // Get dropdown menu when clicking on hamburger Icon
const closeBtn = document.querySelector(".hamburgerexit_button")

menu.addEventListener("click", function() {
    ToggleDropdown();
});

closeBtn.addEventListener("click", function() {
    ToggleDropdown();
});

 
// Showing menu content
function ToggleDropdown() {
  const dropdown = document.querySelector(".hamburgermenu");
  dropdown.classList.toggle("hamburger");
}
/* General styling attributes */ 
html {
    -webkit-text-size-adjust: 100%;
}

* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    text-decoration:none;
    list-style:none;
    box-sizing: border-box;
}

:root {
    --color-primary: #4EC843;
    --color-secondary: #387CFF;
    --color-dashboard: purple;
    --color-hover: #20d62c;
    --color-variant: linear-gradient(30deg, #1565FF, #9FC0ff);
    --color-showcase: #FAFAFA;
    --color-withwithout: #6D6D6D;

    --container-width-lg: 85%;
    --container-width-md: 90%;
    --container-width-sm: 94%;
    --dashboard-width: clamp(210px, 22vw, 325px);

    --transition: all 200ms ease;
    --transition-hamburger: all 180ms ease;
    --tranition-button: all 800ms ease;
}

body * {
    font-family: "Open Sans", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.container {
    width: var(--container-width-sm);
    margin: 0 auto;
}

a {
    color:black;

}

h1, h2, h3, h4 h5{
    line-height:inherit;
}

h1 {
    font-size:3rem;
}

h2 {
    font-size: 1.9rem;
}

h3 {
    font-size:1.363rem;
}

h4 {
    font-size:1.125rem;
}

h5 {
    font-size:0.938rem;
}
.mr-1 {
    margin-right:1rem;
}
.mr-2 {
    margin-right:2rem;
}
.mt-1 {
    margin-top:1rem;
}

.h-6 {
    height:1.5rem;
}

.w-6 {
    width:1.5rem;
}

svg {
    display:flex;
    vertical-align: middle;
}

hr {
    display: flex;
    opacity: 15%;
    width: 3.125rem;
    text-align: center;
}

img {
    width:100%;
    height:auto;
}

section {
    display:block;
}

.relative {
    position: relative;
}

.fixed {
    position: fixed;
}

.transition {
    transition: all 300ms ease;
}


/* Navigation Menu */
    
nav {
    width:100%;
    height:4.5rem;
    position:fixed;
    top:0;
    z-index:11; 
    background: white;
}

.nav_container {
    height:4.5rem;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.nav_menu {
    display:flex;
    align-items: center;
    gap:3.5rem;
    font-size: 0.95rem;
    font-weight:500;
}

.nav_menu button {
    background:none;
    font-size:0.95rem;
    font-weight: 500;
}

.nav_menu button:hover {
    color:grey;
    transition: var(--transition);
}

.nav_menu a:hover {
    transition: var(--transition);
    color: grey;
}

.login_nav {
    display: flex;
    align-items: center;
    gap:1rem;
    font-weight:500;
    font-size: 0.95rem;
}

.login_nav a {
    color:black;
}

.login_nav a:hover {
    transition: var(--transition);
    color:grey;
}

.Login:hover {
    transition: var(--transition);
    color:grey;
}
    
.switchIconRotate {
    transform-origin: center;
    transition: 0.2s;
}

.fa-angle-down {
    color:#6161F2
}

.iconUp .fa-solid {
    transform-origin: center;
    transform: rotate(180deg);
}
  
.demobutton {
    cursor:pointer;
    background-color: var(--color-primary);
    border-radius:2.125rem;
    border:none;
    color: white;
    width:8.125rem;
    height:2.188rem;
    font-weight:500;
    font-size:0.918rem;
}

.demobutton:hover {
    background-color: #20D62C;
    transition:var(--tranition-button);
}

.startingbackground {
    content:'';
    position:relative;
    margin-top:4.5rem;
    width:100%;
    height:100vh;
    background: var(--color-variant);
    border-radius: 0% 0% 75% 0%;
    overflow: hidden;
}

.startingbackground3 {
    display: flex;
    position: relative;
    margin-top: 2rem;
}

.dropbtn {
    cursor: pointer;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown-content {
    position: absolute;
    background-color: white;
    border-radius: 0.4rem;
    padding: 2rem;
    gap:1.5rem;
    opacity: 100%;
    display: none;
}

.dropdown-content2 {
    display:none;
    top:4.5rem;
    right:20rem;
    width:25rem;
    position:absolute;
    padding:0.5rem;
    gap:1.5rem;
    opacity: 100%;
    border-radius:0.4rem;
    background-color:white;
    margin: 0 auto 0 auto;
    transition: 300ms;
}

.show {
    display:flex;
    flex-direction: column;
}

.hamburger {
    display:none;
}

.hamburger_button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: white;
    border-radius: 0.375rem;
    width:2rem;
    height:2rem;
}

.hamburger_button:hover {
    transition: var(--transition-hamburger);
    background-color:rgb(217, 217, 217);
}

.hamburgermenu {
    display:none;
    position: absolute;
    width:100%;
    left:0;
    right:0;
    top:5.5rem;
    box-shadow: 3px 3px 5px 0px rgb(9 30 66 / 20%), 0px 0px 1px rgb(9 30 66 / 31%);
    height:25rem;
    padding:0.5rem;
    background-color:rgb(255, 255, 255);
    border-radius:1rem;
}
.hamburgertopmain {
    padding-top:1.25rem;
    padding-bottom:1.5rem;
    padding-left:1.25rem;
    padding-right:1.25rem;
}

.hamburgermenutop1 {
    display: flex;
    justify-content: space-between;
}
.hamburgerexit_button {
    display:flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    background-color: white;
    border-radius: 0.375rem;
    width:2rem;
    height:2rem;
}
.hamburgerexit_button:hover {
    transition:var(--transition-hamburger);
    background-color:rgb(217,217,217);
}


@media screen and (max-width: 890px) {
    .nav_menu {
        display:none;
    }
    .login_nav {
        display:none;
    }
    .hamburger {
        display:block;
    }
    .nav_container {
        padding-left: 0.3rem;
        margin-left: auto;
    }
    
}
<!DOCTYPE html> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>DraftFlex</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
        <link rel="stylesheet" href="styles.css">
        
        <!-- Font-families -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@400;500;600&display=swap" rel="stylesheet">

        <!-- Animations -->
        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    
        <!-- Fontawesome Icon -->
        <script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>

        <!-- Iconscout CDN -->
        <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    </head>
    
    <body> 
            <!-- Navigation Menu -->
          <header>
            <nav> 
            <div >
                <a href="index.html" ><img src="/icons/logo.svg" alt="logo"></a>          
                <div >
                  <div >
                    <button  onclick="myFunction()"><span>Features</span>&nbsp<i ></i></button>
                    <div  id="myDropdown">
                        <a href="#">Link1</a>
                        <a href="#">Link2</a>
                        <a href="#">Link3</a>
                    </div>
                  </div>
                       <a href="Pricing.html">Pricing</a>
                       <a href="Contact_Us.html">Contact Us</a>
                </div>  
                  
                <div >
                   <a href="#" >Login</a> 
                   <form><button >Get demo</button></form>
                </div>
                
                <div >
                   <button >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                   </button>
                </div>
              </div>
              <div >
                 <div >
                  <div >
                      <div></div>
                      <div >
                      <button >
                          <svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 512 512"><path fill="#231f20" d="m161.737 180.345 18.646-18.646L350.33 331.645l-18.646 18.646z"/><path fill="#231f20" d="m161.674 331.655 169.947-169.947 18.646 18.647L180.32 350.3z"/></svg>
                      </button>
                      </div>
                   </div>
                 </div>
              </div>  
            </nav>
           </header>

Page link：https//www.codepudding.com/database/542452.html

Prev:Add or replace email provider suffix in an email input
Next:Why is my Javascript not creating a div within a class?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding