How to change my js code to make menu work properly

user_13958054 0
Viewed 87

I've got a little problem with my navigation. I want menu to go up from the bottom, after clicking burger, then after choosing one of the options, scroll down the page to selected section and hide back. Everything works properly till I want to use navigation again - after menu hides , I can't open it again. How should I change code to make it work?.

$('.home').on('click', function () {
    $('body,html').animate({
        scrollTop: $('.Home').offset().top
    }, 500)
    $("menu").addClass("down");
})

$('.about').on('click', function () {
    $('body,html').animate({
        scrollTop: $('.About').offset().top
    }, 500)   
    $("menu").addClass("down");
})

$('.gallery').on('click', function () {
    $('body,html').animate({
        scrollTop: $('.Gallery').offset().top
    }, 500)
    $("menu").addClass("down");
})

$('.contact').on('click', function () {
    $('body,html').animate({
        scrollTop: $('Contact').offset().top
    }, 500)
    $("menu").addClass("down");
})

$(".burger").on("click", function () {
    $(".fas, menu ").toggleClass("off");
})
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}

nav{
    position:fixed;
    height:100px;
    width:100%;
    padding:0 20px;
    background-color: greenyellow;
    display:flex;
    align-items: center;
    justify-content: space-between;
    z-index:4;
}

.logo{
    width:70px;
    height:70px;
    background-color: #fff;
    z-index:5;
}

.burger{
    width:70px;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    z-index:5;
}

.burger i{
    color:#fff;
    font-size:20px;
}

.burger i.off{
    display:none;
}

menu{
    position: fixed;
    bottom: -150%;
    left: 0;
    height:100vh;
    width: 100vw;
    background-color: greenyellow;
    transition: .5s;
    z-index: 1;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

menu.off{
    bottom:0;
}

menu.down{
    bottom:-100%;
}


menu a{
    font-size: 20px;
    padding:20px 0;
    font-family: sans-serif;
    text-decoration:none;
    color:#fff;
    z-index:2;
}

.Home{
    position:relative;
    height:100vh;
    background-color: lightblue;
}

.About{
    height:100vh;
    background-color: rebeccapurple;
}

.Gallery{
    height:100vh;
    background-color: tomato;
}

.Contact{
    height:100vh;
    background-color: cadetblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation</title>
    <script src="https://kit.fontawesome.com/2e3d9b3214.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <nav>
        <div class="logo"></div>
       <div class="burger">
        <i class="fas fa-bars"></i>
        <i class="fas fa-angle-down off "></i>
    </div>
    </nav>

    <section class="Home">
        <menu>
            <a class="home" href="#">Home</a>
            <a class="about"href="#">About us</a>
            <a class="gallery"href="#">Gallery</a>
            <a class="contact"href="#">Contact</a>
        <menu>
    </section>
    <section class="About"></section>
    <section class="Gallery"></section>
    <section class="Contact"></section>

    <script src="jquery-3.3.1.min.js"></script>
    <script src="nav.js"></script>
</body>
</html>

css html jquery javascript
3 Answers

This is how it will work. I removed the lines:

$("menu").addClass("down");

since they are not needed, and instead added an event for hiding the menu after clicking:

$(".Home a").on("click", function () {
  $(".Home menu").removeClass("off");
  $(".fas").toggleClass("off");
})


$('.home').on('click', function () {
    $('body,html').animate({
        scrollTop: $('.Home').offset().top
    }, 500)
    //$("menu").addClass("down");
})

$('.about').on('click', function () {
    $('body,html').animate({
        scrollTop: $('.About').offset().top
    }, 500)   
    //$("menu").addClass("down");
})

$('.gallery').on('click', function () {
    $('body,html').animate({
        scrollTop: $('.Gallery').offset().top
    }, 500)
    //$("menu").addClass("down");
})

$('.contact').on('click', function () {
    $('body,html').animate({
        scrollTop: $('.Contact').offset().top
    }, 500)
    //$("menu").addClass("down");
})

$(".burger").on("click", function () {
    $(".fas, menu ").toggleClass("off");
});

$(".Home a").on("click", function () {
    $(".Home menu").removeClass("off");
    $(".fas").toggleClass("off");
})
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}

nav{
    position:fixed;
    height:100px;
    width:100%;
    padding:0 20px;
    background-color: greenyellow;
    display:flex;
    align-items: center;
    justify-content: space-between;
    z-index:4;
}

.logo{
    width:70px;
    height:70px;
    background-color: #fff;
    z-index:5;
}

.burger{
    width:70px;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    z-index:5;
}

.burger i{
    color:#fff;
    font-size:20px;
}

.burger i.off{
    display:none;
}

menu{
    position: fixed;
    bottom: -150%;
    left: 0;
    height:100vh;
    width: 100vw;
    background-color: greenyellow;
    transition: .5s;
    z-index: 1;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

menu.off{
    bottom:0;
}

menu.down{
    bottom:-100%;
}


menu a{
    font-size: 20px;
    padding:20px 0;
    font-family: sans-serif;
    text-decoration:none;
    color:#fff;
    z-index:2;
}

.Home{
    position:relative;
    height:100vh;
    background-color: lightblue;
}

.About{
    height:100vh;
    background-color: rebeccapurple;
}

.Gallery{
    height:100vh;
    background-color: tomato;
}

.Contact{
    height:100vh;
    background-color: cadetblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation</title>
    <script src="https://kit.fontawesome.com/2e3d9b3214.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <nav>
        <div class="logo"></div>
       <div class="burger">
        <i class="fas fa-bars"></i>
        <i class="fas fa-angle-down off "></i>
    </div>
    </nav>

    <section class="Home">
        <menu>
            <a class="home" href="#">Home</a>
            <a class="about"href="#">About us</a>
            <a class="gallery"href="#">Gallery</a>
            <a class="contact"href="#">Contact</a>
        <menu>
    </section>
    <section class="About"></section>
    <section class="Gallery"></section>
    <section class="Contact"></section>

    <script src="jquery-3.3.1.min.js"></script>
    <script src="nav.js"></script>
</body>
</html>

user_135734440

Please, clean that html. Also, use anchors. You don't need these specific classes and animate functions. You misuse the <menu> tag, which is experimental by the way. You also misuse the <nav> tag, it should contain navigation elements, if that's not obvious. Avoid jQuery if you can, it's outdated, if you can use vanilla javascript. I know it's not the expected answer but it's important.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation</title>
    <script src="https://kit.fontawesome.com/2e3d9b3214.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
      <div class="logo"></div>
      <div class="burger">
          <i class="fas fa-bars"></i>
          <i class="fas fa-angle-down off"></i>
      </div>
      <nav>
          <ul>
              <li><a href="#home">Home</a></li>
              <li><a href="#about">About us</a></li>
              <li><a href="#gallery">Gallery</a></li>
              <li><a href="#contact">Contact</a></li>
          </ul>
      </nav>
    </header>
    
    <div class="content">
      <section id="home"></section>
      <section id="about"></section>
      <section id="gallery"></section>
      <section id="contact"></section>
    </div>

    <script src="jquery-3.3.1.min.js"></script>
    <script src="nav.js"></script>
</body>
</html>

user_52144520

Try changing your burger click event jquery code to:

$(".burger").on("click", function () {
    $(".fas, menu ").toggleClass("off");
    $('menu').removeClass("down");
})
user_135737360
Related