Jqueryde Toggle Sorunu

JavaScript
,
1

Javascriptde yandan acilir menu yapmaya calisdim.ama acilip kapanmasi tek tusla olmasi sartiyla.bu sorunu jquery toggle ile halletmeye calisdim ama olmadi.positionun releative olmasindanmi kaynaklaniyor?Kodlari paylasiyorum.bakarsaniz sevinirm:

<!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>
2

Bilen Yokmu Gercekten : (

3

Bugün biraz html+css+javascript+jquery çalışırken bir menü yapmak istedim. Ve şöyle bir yol izledim. Bir bakın isterseniz.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="menu" onclick="slideFunction()">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="drop-down-menu" style="display: none">
      <a href="#">Products</a>
      <a href="#">Campaigns</a>
      <a href="#">Contact</a>
      <a href="#">About</a>
    </div>
    <style>
      .menu {
        display: inline-block;
      }
      .menu div {
        width: 35px;
        height: 5px;
        background-color: black;
        margin-top: 10%;
        border-radius: 2px;
      }
      .drop-down-menu a {
        display: block;
        width: 50px;
        text-decoration: none;
        margin-top: 1%;
        color: grey;
      }
      .drop-down-menu a:hover {
        color: green;
      }
      .drop-down-menu {
        background-color: black;
        width: 100px;
        margin-top: 1.2%;
        border-radius: 5px;
        border: 2px solid green;
      }
    </style>
    <script>
    function slideFunction() {
      var x = document.getElementsByClassName("drop-down-menu")[0];
      if (x.style.display === "none") {
        $(".drop-down-menu").slideDown("slow");
      } else {
        $(".drop-down-menu").slideUp("slow");
      }
    }
    </script>
</body>
</html>
4

Elinize saglik.if else ile yapa biliyorum.toggle ile yapmak istemistim.