HTML, CSS ve JS mobil menu çalışmıyor

Merhaba bir kod calismio yardim ederseniz memnun olurum.
mobil Menu:
HTML:
<header class="header" id="header">
<div class="wrapper">
<div class="container">
<div class="nlogo">
<a href="#"><img src="https://i.postimg.cc/vTv6gQ37/zyro-image-png-2.jpg" alt="" width="130"/></a>

</div>

<div class="ntext">
<h3>SQ Store</h3>
</div>
<div class="nav">
<ul class="nav1">
<a class="nlinks" href="#"><li class="nli">Ana Sehive</li></a>
<a class="nlinks" href="#"><li class="nli">Mehsullar ▾</li></a>
<a class="nlinks" href="#"><li class="nli">Bizimle Elaqe</li></a>
<a class="nlinks" href="#"><li class="nli">Hakkimizda</li></a>
</ul>
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>

<div id="menu-mobile">
<div id="bg-menu-mobile">
</div>

<ul class="mobileni">
<li>Empresa</li>
<li>Notícias</li>
<li>Agenda</li>
<li>Comunicação</li>
</ul>
</div>
<script src="script.js"></script>
</div>




</div>

</div>

</header>





CSS:
/* HEADER START */

.container {
clear: both;
overflow: auto;
clear: both;
display:flex;
overflow: auto;
background-color: #cacfd2;
top: 0;
left: 0;
width: 100%;
height: 100px;
}

/* HEADER DETAILS START */




.nlogo img {
margin-left:5px;
margin-top: 5px;
float: left;
max-width: 100px;
height: 90px;
}

.ntext {
margin-top:20px;
padding: 10px;
font-size: 30px;
font-family: monospace;
}

/* HEADER NAV START */


.nav1{
color:black;
position:absolute;
top:30px;
right:30px;
}

.nli{

text-decoration: none;
font-family: sans-serif;
display: inline-block;
padding: 10px;
font-size: 20px;
color: black;
}

.nli:hover {
color: white;
transition: all 0.3s ease-in-out;
}

/* MOBILE HEADER NAV START */










#bg-menu-mobile {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: -100%;
background-color: #4E62F7;
background-color: #cacfd2;
will-change: transform;
z-index:1;
}

.mobileni {
width: 100%;
position: fixed;
top: 100px;
left:0;
/left: 0;/
list-style: none;
color: #ffffff;
z-index:3;
}

.mobileni li {
font-weight:300;
font-size: 30px;
position: relative;
margin-bottom: 30px;
left:100%;
cursor: pointer;
will-change: transform;
}

.mobileni li:hover {
color: #111111;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}




/* hang burger */

#hamburger {
width: 60px;
height: 40px;
position: relative;
margin: 40px auto;
cursor: pointer;
position: absolute;
top: 0;
right: 60px;
background-color: transparent;
}

#hamburger:hover span:nth-child(1) {
top: -4px;
-webkit-transition: .20s ease-in-out;
-moz-transition: .20s ease-in-out;
-o-transition: .20s ease-in-out;
transition: .20s ease-in-out;
}

#hamburger:hover span:nth-child(3) {
top: 34px;
-webkit-transition: .16s ease-in-out;
-moz-transition: .16s ease-in-out;
-o-transition: .16s ease-in-out;
transition: .16s ease-in-out;
}

#hamburger span {
z-index: 3;
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #111111;
border-radius: 5px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .20s ease-in-out;
-moz-transition: .20s ease-in-out;
-o-transition: .20s ease-in-out;
transition: .25s ease-in-out;
}

#hamburger span:nth-child(1) {
top: 0px;
}

#hamburger span:nth-child(2) {
top: 14px;
}

#hamburger span:nth-child(3) {
top: 28px;
}

#hamburger.open span:nth-child(1) {
top: 14px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
background-color: #ffffff;
}

#hamburger.open span:nth-child(2) {
opacity: 0;
left: -30px;
-webkit-transition: .16s ease-in-out;
-moz-transition: .16s ease-in-out;
-o-transition: .16s ease-in-out;
transition: .16s ease-in-out;
}

#hamburger.open span:nth-child(3) {
top: 14px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
background-color: #ffffff;
}





@media screen and (max-width: 600px) {
.nli{display:none;}
}

@media screen and (min-width: 601px) and (max-width: 800px) {
.nli{display:none;}
}

@media screen and (min-width: 801px) {
#hamburger{display:none;}
}














JS:
/* MOBILE NAV SCRIPT */

var estado = 0,
vw = $(window).width();
$("#hamburger").click(function() {
var delay_time = 0;
$(this).toggleClass('open');
console.log(estado);
if (estado === 0) {
TweenMax.to($("#bg-menu-mobile"), 1, {
x:-vw,
ease: Expo.easeInOut
});

$("li").each(function() {
TweenMax.to($(this), 1.2, {
x:-vw,
scaleX: 1,
delay: delay_time,
ease: Expo.easeInOut
});
delay_time += .04;
});
estado = 1;
} else {
estado = 0;
TweenMax.to($("#bg-menu-mobile"), 1.2, {
x:0,
ease: Expo.easeInOut
});
$("li").each(function() {
TweenMax.to($(this), 1, {
x:0,
/*
x:vw,
scaleX: 2.3,
*/
delay: delay_time,
ease: Expo.easeInOut
});
delay_time += .02;
});
}
});

Kod anlaşılır değil, neyin çalışmadığı belli değil... Lütfen kurallara uygun olarak konu açın.

Yüksek ihtimalle syntax hatası vardır, ben kodun parantezlerine bile önem verirken insanlar nasıl böyle yazıyor şaşırıyorum... Bir kontrol etmeniz iyi olur. Ancak yine de kurallara uygun olarak konu açın.

Kodun SS'ini atarsan daha anlaşılır olur, renkler anlamayı kolaylaştırır ve sorunun nedir?

Kodu text olarak değil kod olarak paylaşman lazım. Bilmiyorsan nasıl yapılacağını sabit konudan görebilirsin.
Ayrıca altta vereceğim siteye, kodlarını yüklersen herkes için daha kolay olur.

@RaSGooL tamamdr. Hatam - koda mobil menu ekledim calismiyor ama normalde calisiyor. Yardim ederseniz cok iyi olur.(Turkce klavye yok o yüzden boyle yaziyorum.)
HTML:


CSS:


JS:

@RaSGooL hocam daha iyi anlar ama benim gözüme takılan bir olay var.
Flex ve Grid sistemlerinden birini kullanmamışsınız, bunları kullanarak hem mobil uyumluluk konusunu daha rahat çözersiniz hem de istediğiniz görünümleri daha rahat kullanırsınız.
İkinci dikkatimi çeken şey ise neden sayfanızın bir HTML şeması yok, titlesi yok?
Bu arada CSS kodlarınıza.


Bunları eklerseniz sayfanızdaki boşluklar kaldırılır ve kaymalar kaybolur, sizin kodunuzda mobil görünümde ve normal görünümde yanlarda boşluklar kalıyor onları bu yolla kaldırabilirsiniz.
Ayrıca amacınız bir hamburger menü yapmaksa elimde daha önceden yaptığım bir menü var isterseniz size atabilirim üzerinde istediğiniz değişiklikleri yaparsınız(profesyonel şekilde yapmadım.).

533388 dedi:

@RaSGooL hocam daha iyi anlar ama benim gözüme takılan bir olay var.
Flex ve Grid sistemlerinden birini kullanmamışsınız, bunları kullanarak hem mobil uyumluluk konusunu daha rahat çözersiniz hem de istediğiniz görünümleri daha rahat kullanırsınız.
İkinci dikkatimi çeken şey ise neden sayfanızın bir HTML şeması yok, titlesi yok?
Bu arada CSS kodlarınıza.

CSS:Panoya kopyala

*
{
 margin: 0;
 padding: 0;
}

Bunları eklerseniz sayfanızdaki boşluklar kaldırılır ve kaymalar kaybolur, sizin kodunuzda mobil görünümde ve normal görünümde yanlarda boşluklar kalıyor onları bu yolla kaldırabilirsiniz.
Ayrıca amacınız bir hamburger menü yapmaksa elimde daha önceden yaptığım bir menü var isterseniz size atabilirim üzerinde istediğiniz değişiklikleri yaparsınız(profesyonel şekilde yapmadım.).

Genişletmek için tıkla...

Bir Bakayim Atarsaniz IYi Olur. Heh Bu ARada Sadece Calismayan Yersi Attim ben o yuzden title falan yok. O kod bende var bu arada.

Link burada:
Ama sizin kodlarla çakışma ihtimali var, bozukluklar olabilir.

Umutyore dedi:

@RaSGooL tamamdr. Hatam - koda mobil menu ekledim calismiyor ama normalde calisiyor. Yardim ederseniz cok iyi olur.(Turkce klavye yok o yüzden boyle yaziyorum.)
HTML:

HTML:Panoya kopyala

 <header class="header" id="header">
 <div class="wrapper">
 <div class="container">
<div class="nlogo">
 <a href="https://sq-store.glitch.me/"><img src="https://i.postimg.cc/vTv6gQ37/zyro-image-png-2.jpg" alt="" width="130"/></a>

 </div>

 <div class="ntext">
 <h3>SQ Store</h3>
 </div>
<div class="nav">
 <ul class="nav1">
 <a class="nlinks" href="#"><li class="nli">Ana Sehive</li></a>
 <a class="nlinks" href="#"><li class="nli">Mehsullar ▾</li></a>
 <a class="nlinks" href="#"><li class="nli">Bizimle Elaqe</li></a>
 <a class="nlinks" href="#"><li class="nli">Hakkimizda</li></a>
 </ul>
 <div id="hamburger">
 <span></span>
 <span></span>
 <span></span>
</div>

<div id="menu-mobile">
 <div id="bg-menu-mobile">
 </div>

 <ul class="mobileni">
 <li>Empresa</li>
 <li>Notícias</li>
 <li>Agenda</li>
 <li>Comunicação</li>
 </ul>
</div>
<script src="script.js"></script>
 </div>

</div>

 </div>

 </header>

CSS:

CSS:Panoya kopyala

/* HEADER START */

.container {
 clear: both;
 overflow: auto;
 clear: both;
 display:flex;
 overflow: auto;
 background-color: #cacfd2;
 top: 0;
 left: 0;
 width: 100%;
 height: 100px;
}

/* HEADER DETAILS START */

.pname{
 margin-left:20px;
}

.nlogo img {
 margin-left:5px;
 margin-top: 5px;
 float: left;
 max-width: 100px;
 height: 90px;
}

.ntext {
 margin-top:20px;
 padding: 10px;
 font-size: 30px;
 font-family: monospace;
}

/* HEADER NAV START */

.nav1{
 color:black;
 position:absolute;
 top:30px;
 right:30px;
}

.nli{

 text-decoration: none;
 font-family: sans-serif;
 display: inline-block;
 padding: 10px;
 font-size: 20px;
 color: black;
}

.nli:hover {
 color: white;
 transition: all 0.3s ease-in-out;
}

 /* MOBILE HEADER NAV START */

#bg-menu-mobile {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 right: -100%;
 background-color: #4E62F7;
 background-color: #cacfd2;
 will-change: transform;
 z-index:1;
}

.mobileni {
 width: 100%;
 position: fixed;
 top: 100px;
 left:0;
 /*left: 0;*/
 list-style: none;
 color: #ffffff;
 z-index:3;
}

.mobileni li {
 font-weight:300;
 font-size: 30px;
 position: relative;
 margin-bottom: 30px;
 left:100%;
 cursor: pointer;
 will-change: transform;
}

.mobileni li:hover {
 color: #111111;
 -webkit-transition: all .1s ease-in-out;
 -moz-transition: all .1s ease-in-out;
 transition: all .1s ease-in-out;
}

/* hang burger */

#hamburger {
 width: 60px;
 height: 40px;
 position: relative;
 margin: 40px auto;
 cursor: pointer;
 position: absolute;
 top: 0;
 right: 60px;
 background-color: transparent;
}

#hamburger:hover span:nth-child(1) {
 top: -4px;
 -webkit-transition: .20s ease-in-out;
 -moz-transition: .20s ease-in-out;
 -o-transition: .20s ease-in-out;
 transition: .20s ease-in-out;
}

#hamburger:hover span:nth-child(3) {
 top: 34px;
 -webkit-transition: .16s ease-in-out;
 -moz-transition: .16s ease-in-out;
 -o-transition: .16s ease-in-out;
 transition: .16s ease-in-out;
}

#hamburger span {
 z-index: 3;
 display: block;
 position: absolute;
 height: 4px;
 width: 100%;
 background: #111111;
 border-radius: 5px;
 opacity: 1;
 left: 0;
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 -webkit-transition: .20s ease-in-out;
 -moz-transition: .20s ease-in-out;
 -o-transition: .20s ease-in-out;
 transition: .25s ease-in-out;
}

#hamburger span:nth-child(1) {
 top: 0px;
}

#hamburger span:nth-child(2) {
 top: 14px;
}

#hamburger span:nth-child(3) {
 top: 28px;
}

#hamburger.open span:nth-child(1) {
 top: 14px;
 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -o-transform: rotate(135deg);
 transform: rotate(135deg);
 background-color: #ffffff;
}

#hamburger.open span:nth-child(2) {
 opacity: 0;
 left: -30px;
 -webkit-transition: .16s ease-in-out;
 -moz-transition: .16s ease-in-out;
 -o-transition: .16s ease-in-out;
 transition: .16s ease-in-out;
}

#hamburger.open span:nth-child(3) {
 top: 14px;
 -webkit-transform: rotate(-135deg);
 -moz-transform: rotate(-135deg);
 -o-transform: rotate(-135deg);
 transform: rotate(-135deg);
 background-color: #ffffff;
}

 @media screen and (max-width: 600px) {
 .nli{display:none;}
 }

 @media screen and (min-width: 601px) and (max-width: 800px) {
 .nli{display:none;}
 }

 @media screen and (min-width: 801px) {
 #hamburger{display:none;}
 }

JS:

JavaScript:Panoya kopyala

/* MOBILE NAV SCRIPT */

var estado = 0,
 vw = $(window).width();
$("#hamburger").click(function() {
 var delay_time = 0;
 $(this).toggleClass('open');
 console.log(estado);
 if (estado === 0) {
 TweenMax.to($("#bg-menu-mobile"), 1, {
 x:-vw,
 ease: Expo.easeInOut
 });

 $("li").each(function() {
 TweenMax.to($(this), 1.2, {
 x:-vw,
 scaleX: 1,
 delay: delay_time,
 ease: Expo.easeInOut
 });
 delay_time += .04;
 });
 estado = 1;
 } else {
 estado = 0;
 TweenMax.to($("#bg-menu-mobile"), 1.2, {
 x:0,
 ease: Expo.easeInOut
 });
 $("li").each(function() {
 TweenMax.to($(this), 1, {
 x:0,
 /*
 x:vw,
 scaleX: 2.3,
 */
 delay: delay_time,
 ease: Expo.easeInOut
 });
 delay_time += .02;
 });
 }
});

Genişletmek için tıkla...

Kodu incelemedim detaylı da bakamadım. Sadece çalıştırdım. Gayet güzel çalışıyor. 2 tane js library kullanmışsın. Bunları eklemeyi unutma. Altta verdiğim jsfiddle linkinden kontrol edebilir misin?

cdn olarak;