Arda Zaman Arda Zaman - 5 months ago 5
Javascript Question

I can't set responsive menu

I want to design a responsive menu. Actually everything is okay. İn fact I know what is the problem. But I can't fixed it. Also the codes are here: The Codes are here: js fiddle

First condition like this:

enter image description here

And second condition like this:

enter image description here

When I click to menu no problem here, It's works. But if I use only one times and after İf I resize the screen, the menu is lost, doesn't come again. I think the problem is, I open menu after that I close. Here, I doing display:none; But I can't fixed it.

enter image description here

HTML:

<header>
<section id="menuBar"><h1> MENU </h1> <i class="fa fa-bars" aria-hidden="true"></i> </section>
<nav>
<ul>
<li><a href="#"> Hakkımda </a></li>
<li><a href="#"> Portfolyo </a></li>
<li><a href="#"> İletişim </a></li>
</ul>
</nav>
</header>


CSS:

header{
background-color: #333;
width: 100%;
height: 50px;
box-shadow: 0 0 15px;
z-index: 555555555555555;
position: relative;
}

#menuBar{
display: none;
}

header nav{
text-align: center;
}

header nav ul{
display: inline-block;
list-style-type:none;
}

header nav ul li{
float: left;
padding: 15px;
}

header nav ul li a{
color: white;
text-decoration: none;
font-family: roboto;
font-size: 17px;
}

@media (max-width:768px){

section#menuBar{
color: white;
font-family: roboto;
font-size: 20px;
display: block;
cursor: pointer;

}

section#menuBar h1{
line-height: 50px;
display: inline-block;
margin-left: 25px;
}

section#menuBar i{
float: right;
margin-top: 15px;
margin-right: 25px;
}

header nav{

height: 152px;
width: 100%;
position: absolute;
display: none;
background-color: #333;
}

header nav ul{
width: 100%;
margin-left: -45px;
position: relative;

}

header nav ul li{
float: none;
padding-left: 0;
padding-top: 25px;
text-align: center;
display: block;
border-bottom:1px solid whitesmoke;
padding-bottom: 7px;
background-color: #333;
z-index: 444;
}

header nav ul li a{
color: white;

}


JQUERY:

$(function(){

var width = $(window).outerWidth();
$('#menuBar').click(function(){
$('header nav').slideToggle();

$('header nav ul li').hover(function(){
$(this).addClass('aktif1');
$('a',this).addClass('aktif2');
},function(){
$(this).removeClass('aktif1');
$('a',this).removeClass('aktif2');

});
});
});

Answer

One solution can be that you a bind resize event on your window, and check for the css break-point of 768px

$(window).resize(function() {
    if($(window).outerWidth() > 767)
        $('header nav').show();
    else
        $('header nav').hide();
});

Based on the width of window, reset the css properties display.