Tutorial Membuat Navbar Responsive

Unknown March 09, 2018 CSS Comment

Hai semuanya...

Pada artikel kali ini kita akan belajar membuat navbar responsive dengan HTML dan CSS, penasaran bagaimana cara membuatnya, yuk kita langsung mulai belajar membuatnya.

Langkah pertama, kita akan menggunakan library icon yaitu Font Awesome untuk digunakan pada navbar, silahkan copy dan paste code berikut dibawah tag <head>.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>

Langkah kedua, tulis syntax HTML seperti dibawah ini.

  <nav class="navbar" id="nav">
  <a href="#" class="active"><span class="fa fa-code"></span> Kode Kuliahan</a>
  <a href="#">Blog</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#" class="bars" onclick="toggleItem()">
    <span class="fa fa-bars"></span></a>
</nav>

Langkah ketiga, tambahkan syntax CSS seperti berikut.

  .navbar{overflow: hidden;background-color: #1d1d1d;}
  .navbar a{
    display: block;
    float: left;
    text-decoration: none;
    text-align: center;
    color: #fff;
    padding: 25px 20px;
  }
  .navbar a:hover{background-color: #0058ee;}
  .active{background-color: #0058ee;}
  .navbar .bars{display: none;}

  @media screen and (max-width:600px){
    .navbar a:not(:first-child){display: none;}
    .navbar a.bars{
      display: block;
      float: right;
    }
  }
  @media screen and (max-width:600px){
    .navbar.item{position: relative;}
    .navbar.item .bars{
      position: absolute;
      right: 0;
      top: 0;
    }
    .navbar.item a{
      float: none;
      display: block;
      text-align: left;
      
    }
  }

Langkah keempat, tambahkan syntax Java Script seperti berikut.

  function toggleItem(){
    let n = document.getElementById('nav');
      if(n.className === 'navbar'){
        n.className += ' item';
      }else{
        n.className = 'navbar';
      }
    }

Hasilnya dapat dilihat pada gambar dibawah ini.

Ketika browsernya diresize menjadi 600px, maka tombol bars akan mucul, seperti gambar berikut ini.

Sehingga kita dapat mengklik tombol barsnya dan akan memunculkan itemnya, dapat dilihat seperti gambar dibawah ini.

Sekian dulu tutorial membuat navbar responsive, semoga bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tuliskan komentar anda dibawah, terima kasih.