CODEWITHSUNDEEP
javascriptjquery
Abdullah
Abdullah

Reputation: 23

Getting a jQuery toggle to work as expected

I tried to make a menu on the side of JavaScript. I wanted to handle this problem with jQuery toggle, but it did not happen. Is it because the position is relative?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hamburger Menu</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }



        ul{
            margin: 0px;
            padding: 0px;  
        }

        ul li{
            display: block;
        }

        ul li a{
            display: block;
            padding: 15px;
            text-decoration: none;
            color: white;
            letter-spacing: 2px;
            transition: all .25s ease-in-out;
            border-bottom: 1px solid white;
        }

        hr{
            float: left;
            width: 100px;
        }
        div{
            height: 400px;
            width: 150px;
            background-color: red;  
            display: inline-block;
            position: relative;
            right: 226px;
        }
        i{
            margin-left: 200px;
            display: inline-block;
            font-size: 24px;
            position: relative;
            bottom: 201px;
            background-color: white;
            color: red;
            right: 46px;
            transition: all 1s ease ease-in-out;
        }

        ul li a:hover{
            background-color: rgb(0,108,250);
        }
        i:hover{
            color: rgb(0, 108, 250);
        }


    </style>

    <script>
        $(document).ready(function(){
            $("i").click(function(){
                $("#div1").toggle(500)
            })
        })

    </script>


</head>
<body>
    <i class="fas fa-bars"></i>
<div id="div1">
    <ul>
        <li><a href="#" id="ana">Ana Sayfa</a></li>

        <li><a href="#" id="hak">Hakkimizda</a></li>

        <li><a href="#" id="ile">Iletisim</a></li>

        <li><a href="#" id="rek">Reklam</a></li>

        <li><a href="#" id="more">Daha Fazla</a></li>
    </ul>
</div>

</body>
</html>

Upvotes: 0

Views: 61

Answers (3)

onetyone
onetyone

Reputation: 562

Yes, it has to do with position: relative. I will explain what is going on:

Your body starts at the top of the viewport and is just as high as the highest of its children pushes it to be, so it stretches downwards to fits its children, but not more. Before toggling, #div1 is the highest child. After toggling, #div1 is hidden, so only the <i></i> remains, and the body will have a very low height.

Now when an element has position: relative, one thing that happens is that you can use top, left, right and bottom on it to move it relative to where it normally would be. Your <i></i> does have position: relative, and it also has bottom: 201px, so it gets moved up 201px. Normally, it would be at the top of the viewport, inside the body. When being moved up that far, it ends up outside of the viewport, so you can't see it anymore.

You can see all this visually for yourself using your Browser's developer tools, for example Page Inspector for Firefox or Chrome's DevTools.

Upvotes: 1

Ivan Kashtanov
Ivan Kashtanov

Reputation: 704

This is your snippet with some changes:

  • removed position:relative from CSS, the positioning is now flex-based (with margin)
  • tweaked transition a bit and added some styles to make button movement smoother (check out a fix for transition property and --menu_off modifier class)

$(document).ready(function(){
            $(".js-menu-toggle-button").click(function(){
                $(this).toggleClass('menu-container__toggle-button--menu_off');
                $(".js-menu-bar").toggle(500);
            })
        })
*{
            margin: 0px;
            padding: 0px;
        }



        ul{
            margin: 0px;
            padding: 0px;  
        }

        ul li{
            display: block;
        }

        ul li a{
            display: block;
            padding: 15px;
            text-decoration: none;
            color: white;
            letter-spacing: 2px;
            transition: all .25s ease-in-out;
            border-bottom: 1px solid white;
        }

        hr{
            float: left;
            width: 100px;
        }

        ul li a:hover{
            background-color: rgb(0,108,250);
        }
        i:hover{
            color: rgb(0, 108, 250);
        }

        .menu-container {
          display: flex;
        }

        .menu-container__menu-bar {
            height: 400px;
            width: 150px;
            background-color: red;  
            display: inline-block;
        }

        .menu-container__toggle-button {
            margin-left: 2rem;
            font-size: 24px;
            background-color: white;
            color: red;
            transition: all 0.5s ease-in-out;
        }

        .menu-container__toggle-button--menu_off {
            margin-left: 0;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hamburger Menu</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div class="menu-container">
    <div class="menu-container__menu-bar js-menu-bar">
        <ul>
            <li><a href="#" id="ana">Ana Sayfa</a></li>

            <li><a href="#" id="hak">Hakkimizda</a></li>

            <li><a href="#" id="ile">Iletisim</a></li>

            <li><a href="#" id="rek">Reklam</a></li>

            <li><a href="#" id="more">Daha Fazla</a></li>
        </ul>
    </div>
    <i class="fas fa-bars menu-container__toggle-button js-menu-toggle-button"></i>
  </div>

</body>
</html>

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

I've changed a bit in your css, but mainly I've moved the i after the div. Check it out and see if this is what you need.

Demo

$(document).ready(function() {
  $("i").click(function() {
    $("#div1").toggle(500)
  })
})
* {
  margin: 0px;
  padding: 0px;
}

ul {
  margin: 0px;
  padding: 0px;
}

ul li {
  display: block;
}

ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: white;
  letter-spacing: 2px;
  transition: all .25s ease-in-out;
  border-bottom: 1px solid white;
}

hr {
  float: left;
  width: 100px;
}

div {
  height: 400px;
  width: 150px;
  background-color: red;
  display: inline-block;
  position: relative;
  float:left;
}

i {
  top: 0px;
  display: inline-block;
  font-size: 24px;
  position: relative;
  margin-left:5px;
  background-color: white;
  color: red;
  transition: all 1s ease ease-in-out;
}

ul li a:hover {
  background-color: rgb(0, 108, 250);
}

i:hover {
  color: rgb(0, 108, 250);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>




<div id="div1">
  <ul>
    <li><a href="#" id="ana">Ana Sayfa</a></li>

    <li><a href="#" id="hak">Hakkimizda</a></li>

    <li><a href="#" id="ile">Iletisim</a></li>

    <li><a href="#" id="rek">Reklam</a></li>

    <li><a href="#" id="more">Daha Fazla</a></li>
  </ul>
</div>
<i class="fas fa-bars"></i>

Upvotes: 0

Related Questions