Js Responsive Menü Bunu Nasıl Yapabilirim?

20-02-2021, 21:23:43

Aşağıdaki style özelliklerine sahip js ile width genişliğini değiştirerek soldan açtığım bir menü var.

<div id="yandanmenu" style="width:0px; position:fixed;
  height:100%;
  background:rgb(183 183 183);
  overflow-x:hidden;
  transition: all 0.2s linear;
  z-index:1">

<ul>
<li><a href="">Anasayfa</a></li>
<li><a href="">Hakkımızda</a></li>
<li><a href="">Ürünlerimiz</a></li>
<li><a href="">Hizmetlerimiz</a></li>
<li><a href="">İletişim</a></li>
</ul>


</div>

Bu menü elemanlarını eğer sayfa 600pxden fazla ise yukarda sağ kısımda yatay elemanlı olarak göstermek istiyorum. Ayrı menüler yapmak zorunda mıyım? Yoksa uğraşarak tek bir menü ile halledebilir miyim?

20-02-2021, 21:27:20

#2

Rawt

@media screen and (min-width:600px) {

}

Kodun arasında yatay menü için CSS kodlarını girerseniz 600px'den büyük ekranlarda yatay olarak gözükecektir.

20-02-2021, 21:49:58

#3

buddy

Rawt adlı üyeden alıntı: mesajı görüntüle

@media screen and (min-width:600px) {

}

Kodun arasında yatay menü için CSS kodlarını girerseniz 600px'den büyük ekranlarda yatay olarak gözükecektir.

Evet hocam dediğiniz şekilde yapamıyorum çünkü aynı div id'ye genişlik veremiyorum. Aşağıdaki js kodu ile genişliği 200px yapmıştım.

       menu = document.getElementById("yandanmenu");
        if (menu.style.width == "0px") {
          document.getElementById('yandanmenu').style.width="200px";
          
        } else {
          document.getElementById('yandanmenu').style.width="0px";
        }

Yani mecburi ikinci bir menü mü yapmalıyım?

Bir de; sayfayı yenileden javascript ile benzerini yapabiliyor muyuz?

if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}

20-02-2021, 21:52:54

#4

HIDevelop

Bu yardımcı olabilir.

codepen

20-02-2021, 21:54:31

#5

Rawt

Doğru anladıysam şu videodaki yöntemle çözüme ulaşabilirsiniz.

https://www.youtube.com/watch?v=MEr8d9pe_fQ

20-02-2021, 22:04:55

#6

buddy

Rawt adlı üyeden alıntı: mesajı görüntüle

Doğru anladıysam şu videodaki yöntemle çözüme ulaşabilirsiniz.

https://www.youtube.com/watch?v=MEr8d9pe_fQ

Yok hocam ben videodakini zaten yaptım. Sadece pencere boyutu büyükse sol kısımda değil aynı menüyü üst sağ kısımda yan yana göstermek istiyorum.