Kadir GÜNEY Kadir GÜNEY - 5 months ago 17
CSS Question

css responsive menu click

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

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.