Html ve CSS ile responsive navbar

Mobil cihazların da yaygınlaşmasıyla hamburger menü Navigasyon için bir std simgesi haline geldi, o kadar popüler hale geldi ki, günümüzde en yaygın platformlar ve uygulamalar bile bunları kullanıyor. Hamburgere benzediği için bu şekilde adlandırılmıştır.

Neden Hamburger Menüsünü kullanmalısınız?

Hamburger menü, kullanıcılara Web Sitesinde gezinmek için içeriği düzenleyerek daha düzenli ve temiz bir yol, navigasyon sağlar. Ayrıca Tasarımcılar, Hamburger menüsünü o kadar uzun süredir kullanıyor ki, kendisi bir standart haline geldi.

Hamburger menüsü nasıl oluşturulur:

Hamburger Menüsü oluşturmanın birçok yolu vardır, genellikle JavaScript kullanılarak yapılıyor olsa da artık yeni tarayıcıların da desteklediği sadece CSS ile de yapılabilmekte. Bugün HTML ve CSS yardımıyla bir Hamburger Menüsü oluşturacağız. Lafı daha fazla uzatmadan hemen konuya geçelim.

HTML:

<nav>
  <div class="navbar">
    <div class="container nav-container">
      <input class="checkbox" type="checkbox" name="" id="" />
      <div class="hamburger-lines">
        <span class="line line1"></span>
        <span class="line line2"></span>
        <span class="line line3"></span>
      </div>
      <div class="logo">
        <h1>Navbar</h1>
      </div>
      <div class="menu-items">
        <li><a href="#">Home</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">blogs</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">contact</a></li>
      </div>
    </div>
  </div>
</nav>

CSS:

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family: "Poppins", sans-serif;
}

.container{
  max-width: 1050px;
  width: 90%;
  margin: auto;
}

.navbar{
  width: 100%;
  box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
}

.nav-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
}

.navbar .menu-items{
  display: flex;
}

.navbar .nav-container li{
  list-style: none;
}

.navbar .nav-container a{
  text-decoration: none;
  color: #0e2431;
  font-weight: 500;
  font-size: 1.2rem;
  padding: 0.7rem;
}

.navbar .nav-container a:hover{
  font-weight: bolder;
}

.nav-container{
  display: block;
  position: relative;
  height: 60px;
}

.nav-container .checkbox{
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 20px;
  left: 20px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.nav-container .hamburger-lines{
  display: block;
  height: 26px;
  width: 32px;
  position: absolute;
  top: 17px;
  left: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-container .hamburger-lines .line{
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: #0e2431;
}

.nav-container .hamburger-lines .line1{
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.nav-container .hamburger-lines .line2{
  transition: transform 0.2s ease-in-out;
}

.nav-container .hamburger-lines .line3{
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}

.navbar .menu-items{
  padding-top: 120px;
  box-shadow: inset 0 0 2000px rgba(255, 255, 255, 0.5);
  height: 100vh;
  width: 100%;
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  margin-left: -40px;
  padding-left: 50px;
  transition: transform 0.5s ease-in-out;
  text-align: center;
}

.navbar .menu-items li{
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.logo{
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 1.2rem;
  color: #0e2431;
}

.nav-container input[type="checkbox"]:checked ~ .menu-items{
  transform: translateX(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1{
  transform: rotate(45deg);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2{
  transform: scaleY(0);
}

.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3{
  transform: rotate(-45deg);
}

.nav-container input[type="checkbox"]:checked ~ .logo{
  display: none;
}

Nihai Çıktı Duyarlı gezinme çubuğu/navbar:

Özet:

Mükemmel script, çoğunlukla 80 karakterden az, sağa kaydırma yok veya çok büyük id/class öznitelikleri (css özniteliklerinde bir sorun var, bazı CSS çerçeve kodlarında gösterildiği gibi iki satır yapıyor… Eskiden HTML özniteliklerinin sadece lol JavaScript satırlarıyla yüklendi.

Hamburger menümüzü bir navbar ile birlikte başarıyla oluşturduk. Bu yayılma etiketlerini kullanmak yerine hamburger menüsünü uygulamanın birden çok yolu olmasına rağmen. Herhangi bir sorunuz varsa, lütfen yorumlarda sorun.

Yorumlarda Hamburger menüsü için hangi yolu tercih ettiğinizi paylaşın.

Başka: