css responsive menu click

Question

Trying to make responsive menu. but the menu does not open. I appreciate your help.

<navi>    
         <div class="gizli"><i class="fa fa-bars" style="color:#FFFFFF; border:1px solid #FFFFFF;height:60px;padding :20px;"></i> 
          <div class="clear"></div>
            <ul>
                <li><a href="index.html">Ana Menü<br /> <small>Ana Menü</small></a></li>
                <li><a href="hakkinda.html">Hakkında<br /> <small>Hakkımızda</small></a></li>
                <li><a href="proje.html">Projeler<br /> <small>Meet Our Friends</small></a></li>
                <li><a href="hizmet.html">Hizmetlerimiz<br /> <small>See Our Work</small></a></li>
                <li><a href="urunler.html">Ürünler<br /> <small>Hear Us</small></a></li>
                <li><a href="teknik.html">Teknik Bilgi<br /> <small>Steal Our Stuff</small></a></li>
                <li><a href="teklif.html">Teklif<br /> <small>Read About Us</small></a></li>
                <li><a href="iletisim.html">İletişim<br /> <small>Email Us</small></a></li>
            </ul>
        </div>
    </navi>

javascrip code

 $(document).ready(function() {
$(".gizli").click(function(){
    $(this).next("ul").slideToggle();
});

});

css code. mine does not work reasons. My css files below

    /**
 * Design Shack Respnsive Menu
 */

/* navgasyon Menü */
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
navi {  right:15%;  margin: 0 auto; overflow: hidden;}

navi ul {list-style:none;overflow:hidden;padding-right:4%;padding-left:4%;}

navi .clear{clear:both;}
navi li a {
    background: #444;
    border-right: 1px solid #fff;
    color: #fff;
    display: block;
    float: left;
    font: 400 13px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    padding: 25px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 12.5%;
    height:80px;

    /*TRANSISTIONS*/
    -webkit-transition: background 0.5s ease;
       -moz-transition: background 0.5s ease;
         -o-transition: background 0.5s ease;
        -ms-transition: background 0.5s ease;
            transition: background 0.5s ease;
}

/*HOVER*/
navi li a:hover {
    background: #222;
}

/*SMALL*/
navi small {
    font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
    text-transform: none;
    color: #aaa;
}

/*BORDER FIX*/
navi li:last-child a {
    border: none;
}

/*BLUE MENU*/
navi .blue {
    margin-top: 50px;
}

.blue li a {
    background: #75b1de;
}
/*gizli menü */
navi .gizli{
    height:0;

}
navi .gizli a{  
    padding-left:0;
}


.blue small {
    color: white;
}

.blue li a:hover {
    background: #444;
}

/*RED MENU*/

navi .red {
    margin-top: 50px;
}

.red li a {
    background: #5C0002;
}

.red small {
    color: white;
}

.red li a:hover {
    background: #a60306;
}

/* MEDIA QUERIES*/
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px){
    navi li a {
        font: 400 10px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }

    navi small {
        font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif;
    }

}

@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){

    navi li a {
        width: 25%;
        border-bottom: 1px solid #fff;
        font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }

    navi li:last-child a, nav li:nth-child(4) a {
        border-right: none;
    }

    navi li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
        border-bottom: none;
    }
}

@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
    navi .gizli{
        display:inline;
        color:#000000;
        height:60px;
    }

    navi .gizli i{
        padding-left:10px;
        font-size:16px;
        border:1 solid #FFFFFF;
        background-color:#000000;
        width:100%;     
    }navi .gizli i:hover{
        cursor:pointer; 
    }

    navi small {
        display:none;
    }

    navi ul {
        height:40px;
        padding-top:0;
        padding-right:0;
        padding-left:0;
        color:#000000;
        display:none;
    }
    navi li a {
        font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        display:none;
        width:100%;
        padding:25px;
        height:40px;    
        color:#000000;  
    }

    navi li:nth-child(even) a {
        border-right: none;
    }

    navi li:nth-child(5) a, nav li:nth-child(6) a {
        border-bottom: 1px solid #fff;
    }
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    navi li a {
        font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }
}

Problems occurred in my file is supposed to be according to the following CSS file. the problem is 580px. I will be glad if you help me.

Answer 1

try this to active the sliding on the ul list (find instead of next method)

$(this).find("ul").slideToggle();

it works if there is only one ul into the div block. your code doesn't work because after the div with class gizli there are another two components before the ul.

Answer 2

Here is your answer in fiddle

$(this).find('ul').slideToggle();

https://jsfiddle.net/sesn/50z91mpb/