Friday, March 9, 2018

Tutorial Membuat Navbar Responsive


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.

Tutorial Membuat Fullscreen Modal Search Form


Hai semuanya,  pada tulisan kali ini kita akan belajar membuat fullscreen modal search dengan HTML dan CSS, langsung kita mulai belajar membuatnya.
Langkah Pertama, kita akan menggunakan library icon yaitu Font Awesome, copy dan paste kode dibawah tag <head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Langkah Kedua, silahkan tulis syntax HTML seperti dibawah ini.
<!-- modal -->
<div class="modal" id="search-modal">
<!-- trigger untuk menutup modal -->
  <span class="btn-close" onclick="closeModal()" title="Close">
    <i class="fa fa-close"></i></span>
    <!-- isi modal -->
  <div class="modal-content">
    <p>Pencarian</p>
    <form action="#">
      <input type="text" placeholder="Cari">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div> <!-- end modal -->
<!-- trigger untuk menampilkan modal -->
<button class="trigger" onclick="openSearch()">
  <i class="fa fa-search"></i> Klik Search</button>
Hasilnya awalnya dapat dilihat pada gambar dibawah ini.
Langkah ketiga, silahkan tulis syntax CSS seperti dibawah ini.
.trigger{
      background-color: #007afa;
      border: none;
      padding: 15px;
      cursor: pointer;
      color:#fff;
      border-radius: 7px;
    }
    .modal{
      width: 100%;
      height: 100%;
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.9);
    }
    .modal-content{
      position: relative;
      top: 35%;
      width: 80%;
      text-align: center;
      margin: 30px auto 0;
    }
    .modal-content p{
      font-size: 40px;
      color: #fff;
    }
    .modal .btn-close{
      position: absolute;
      top: 20px;
      right: 45px;
      cursor: pointer;
      color: #fff;
    }
    .modal input[type=text]{
      width: 80%;
      float: left;
      border: none;
      padding: 15px;
      box-sizing: border-box;
    }
    .modal button{
      width: 20%;
      float: left;
      border: none;
      padding: 15px;
      cursor: pointer;
      background-color: #007afa;
      color: #fff;
    }
Langkah keempat, silahkan tulis syntax Java Script seperti dibawah ini.
// fungsi untuk membuka modal search
  function openSearch(){
    document.getElementById('search-modal').style.display = "block";
  }
  // fungsi untuk menutup modal search
  function closeModal(){
    document.getElementById('search-modal').style.display = "none";
  }
Jadi, ketika kita mengklik tombol "Klik Search", maka modalnya akan tampil, contohnya dapat dilihat pada demo berikut.

See the Pen Fullscreen Modal Search by Karis Maulana (@karismaulana) on CodePen.

Demikian cara membuat fullscreen modal search form dengan HTML, CSS, semoga tutorial ini bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tulis komentar anda dibawah.

Terima kasih telah berkunjung.