CODEWITHSUNDEEP
javascripthtmljquerycss
Sosek
Sosek

Reputation: 121

How to change my js code to make menu work properly

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>

Upvotes: 4

Views: 188

Answers (3)

Garam Lee
Garam Lee

Reputation: 137

Try changing your burger click event jquery code to:

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

Upvotes: 1

mttetc
mttetc

Reputation: 745

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>

Upvotes: 1

s.kuznetsov
s.kuznetsov

Reputation: 15223

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>

Upvotes: 2

Related Questions