Çözüldü Açılan menü için HTML'i sınırlandırma

Mahir Çınar Girgin · 19 Eylül 2022

Basit bir web sitesi üzerinde çalışıyorum. Siteye menü eklemeye çalıştım fakat bir sıkıntı çıktı. Menü açıldığı zaman sitenin dik uzunluğu aynı kalıyor ve hala aşağı inebiliyorum. Menü açıldığı zaman html'yi sınırlandırmanın bir yolu var mıdır? Kodlarım;

HTML:

<label>
    <input type="checkbox">
    <span class="menu"> <span class="hamburger"></span> </span>
    <ul>
      <li><a href="#" class="a">Home</a></li>
      <li><a href="#" class="b">About</a></li>
      <li><a href="#" class="c">Contact</a></li>
    </ul>
  </label>

CSS:

*, *:before, *:after
        { box-sizing: border-box; }

        label .menu {
          position: absolute;
          left: -100px;
          top: -100px;
          z-index: 100;
          width: 200px;
          height: 200px;
          background: #282E34;
          border-radius: 50% 50% 50% 50%;
          -webkit-transition: .5s ease-in-out;
          transition: .5s ease-in-out;
          box-shadow: 0 0 0 0 #282E34, 0 0 0 0 #282E34;
          cursor: pointer;
          user-select: none;
        }

        label .hamburger {
          position: absolute;
          top: 135px;
          right: 50px;
          width: 30px;
          height: 3px;
          background: white;
          display: block;
          -webkit-transform-origin: center;
          transform-origin: center;
          -webkit-transition: .5s ease-in-out;
          transition: .5s ease-in-out;
          user-select: none;
        }

        label .hamburger:after, label .hamburger:before {
          -webkit-transition: .5s ease-in-out;
          transition: .5s ease-in-out;
          content: "";
          position: absolute;
          display: block;
          width: 100%;
          height: 100%;
          background: white;
          user-select: none;
        }

        label .hamburger:before { top: -10px; }

        label .hamburger:after { bottom: -10px; }

        label input { display: none; }

        label input:checked + .menu {
          box-shadow: 0 0 0 100vw #282E34, 0 0 0 100vh #282E34;
          border-radius: 0;
         
        }

        label input:checked + .menu .hamburger {
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
         
        }

        label input:checked + .menu .hamburger:after {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
          bottom: 0;
         
        }

        label input:checked + .menu .hamburger:before {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
          top: 0;
         
        }

        label input:checked + .menu + ul { opacity: 1; }

        label ul {
          font-size: 50px;
          z-index: 200;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          opacity: 0;
          -webkit-transition: .25s 0s ease-in-out;
          transition: .25s 0s ease-in-out;
          list-style: none;
        }

        label a {
          margin-bottom: 1em;
          display: block;
          color: White;
          text-decoration: none;
         
        }

       
h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 80%;
  text-align: center;
}

        body, html {
        height: 100%;
        margin: 0;
        font: 400 15px/1.8 "Lato", sans-serif;
        color: #777;
        }

        .bgimg-1, .bgimg-2, .bgimg-3 {
        position: relative;
        opacity: 0.65;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        }
        .bgimg-1 {
        background-image: url("messi.jpg");
        min-height: 100%;
        }

        .bgimg-2 {
        background-image: url("messi2.jpg");
        min-height: 400px;
        }

        .bgimg-3 {
        background-image: url("messi3.jpg");
        min-height: 400px;
        }

        .caption {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        text-align: center;
        color: #000;
        }

        .caption span.border {
        background-color: #111;
        color: #fff;
        padding: 18px;
        font-size: 25px;
        letter-spacing: 10px;
        }

Aldığım görüntüler;

2. resimde menünün div içeriği sayfanın başka bir bileşenini kaplıyor.

Konu hakkında video;

BreaKSooN05 · 19 Eylül 2022

Kodlarını pek inceleyemedim ama;

1. yöntem Menü aktif olduğunda Body'i overflow hidden yap. Aşağı da doğru kaymaz.
2. yöntem menüyü position absoulte ile ekrana tamamen sığdırırsın. Yine overflow hidden ile Scrool'u kapatırsın.

2. yöntemi position absolute top 0 left 0 yap. Height ve width değerlerini 100% yap. Margin değerlerini 0'la. Taşma yapmasın. Ardından overflow hidden kullan. Senin kodun temel sorunu büyük ihtimal overflow hidden çözecektir.

Mahir Çınar Girgin · 19 Eylül 2022

BreaKSooN05 dedi:
Kodlarını pek inceleyemedim ama;

1. yöntem Menü aktif olduğunda Body'i overflow hidden yap. Aşağı da doğru kaymaz.
2. yöntem menüyü position absoulte ile ekrana tamamen sığdırırsın. Yine overflow hidden ile Scrool'u kapatırsın.

2. yöntemi position absolute top 0 left 0 yap. Height ve width değerlerini 100% yap. Margin değerlerini 0'la. Taşma yapmasın. Ardından overflow hidden kullan. Senin kodun temel sorunu büyük ihtimal overflow hidden çözecektir.

Merhaba hocam. Cevabınız için teşekkür ederim. Dediğiniz gibi overflow değerini javascript ile değiştirdim. Fakat bu sefer de geri açılmıyor. JavaScript bilgim pek yok.

JavaScript:

function myFunction() {
        x = "no";
        if (x == "yes") {
          document.body.style.overflow = 'visible';
          x = "no";
        }
        if (x == "no") {
          document.body.style.overflow = 'hidden';
          x = "yes";
        }
      
      }

BreaKSooN05 · 19 Eylül 2022

Hocam kodunuzun eski halini github linki olarak paylaşabilir misiniz?

Mahir Çınar Girgin · 19 Eylül 2022

BreaKSooN05 dedi:
Hocam kodunuzun eski halini github linki olarak paylaşabilir misiniz?

Tabii ki: Github

BreaKSooN05 · 19 Eylül 2022

Mahir Çınar Girgin dedi:
Tabii ki: Github

Sanırım gizli.

Mahir Çınar Girgin · 19 Eylül 2022

BreaKSooN05 dedi:
Sanırım gizli.

Kusura bakmayın hocam. Düzelttim şimdi.

BreaKSooN05 · 20 Eylül 2022

Label altında ki Checkbox'a class olarak inputlarim de.

HTML:

 <input type="checkbox" class="inputlarim" />

Ardından bu kodu JavaScript kısmına yapıştır.

JavaScript:

 const input = document.querySelector(".inputlarim");
 input.addEventListener("click", () => {
 if (input.checked == 1) {
 document.body.style.overflow = "hidden";
 } else {
 document.body.style.overflow = "auto";
 }
 });

Mahir Çınar Girgin · 20 Eylül 2022

BreaKSooN05 dedi:
Label altında ki Checkbox'a class olarak inputlarim de.

HTML:

<input type="checkbox" class="inputlarim" />

Ardından bu kodu JavaScript kısmına yapıştır.

JavaScript:

const input = document.querySelector(".inputlarim"); input.addEventListener("click", () => { if (input.checked == 1) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } });

Olmadı hocam. İlk hali ile aynı oluyor.

BreaKSooN05 · 20 Eylül 2022

Mahir Çınar Girgin dedi:
Olmadı hocam. İlk hali ile aynı oluyor.

GitHub üzerinden gönderdim bir dener misiniz?

Olmaz ise messi.html'i de buradan gönderiyorum.

messi.html

drive.google.com

Kusura bakmayın biraz geç yazıyorum işim vardı.

Çözüldü Açılan menü için HTML'i sınırlandırma

Ayrıntılı düzenleme

Mahir Çınar Girgin

Decapat

BreaKSooN05

messi.html

BreaKSooN05

Kilopat

Mahir Çınar Girgin

Decapat

BreaKSooN05

Kilopat

Mahir Çınar Girgin

Decapat

BreaKSooN05

Kilopat

Mahir Çınar Girgin

Decapat

BreaKSooN05

Kilopat

Mahir Çınar Girgin

Decapat

BreaKSooN05

Kilopat

messi.html

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz