Membuat Responsive Navbar dengan HTML dan CSS

Membuat Responsive Navbar dengan HTML dan CSS - sebelum kita membuat nevbar menu yang responsive dengan HTML dan CSS, sebaik nya teman-teman mengetahui terlebih dahulu mengenai html dan css, dan mengetahui bangaimana cara membuat navbar dengan HTML dan CSS yang telah saya buat di artikel sebelumnya.

membuat responsive navbar dengan html dan css

Untuk membuat sebuah menu yang responsive pertama yang harus teman-teman siapkan adalah library javascript yang bisa didownload disini dan sebuah icon menu bar, untuk icon menu bar silahkan download di google saja hehe.

Responsive Navbar dengan HTML dan CSS

Setelah mendownload kedua file yang diperlukan tadi kemudian letakkan dalam sebuah folder,untuk lebih jelasnya lihat gambar dibawah ini.
responsive navbar dengan html dan css
letakan file yang di download tadi sesuai dengan folder nya misal folder js untuk menyimpan library javascript, dan begitu juga dengan yang lainnya. Selanutnya kita ke proses codingan nya, untuk codingan nya silahkan ikuti saja script yang ada di bawah ini kemudian save script dibawah dengan nama sesuai dengan yang anda inginkan.
<!DOCTYPE html>
<html>
 <head>
  <title>Responsive Navbar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/jquery-3.1.1.min.js"></script>
 </head>
 <body>
  <div class="nav">
   <div class="navbar-responsive">
    <img src="img/fa-bars.png" width="25" id="menu">
   </div>
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Kontak</a></li>
    <li><a href="#">Galeri</a></li>
   </ul>
  </div>
  <script>
   $(document).ready(function() {
    $('#menu').click(function() {
     $('ul').toggleClass('add')
    })
   })
  </script>
 </body>
</html>

Penjelasan mengenai responsive navbar

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Untuk membuat sebuah halaman yang responsive kita wajib menambahkan meta tag seperti scrip yang diatas.
<link rel="stylesheet" href="css/style.css">
untuk yang sudah membaca artikel saya tentang penggunaan css, pasti sudah memahi fungsi dari tag diatas tersebut,jadi tidak saya bahas pajang lebar.
<script src="js/jquery-3.1.1.min.js"></script>
Pada tag diatas kita menabahkan sebuah library javascript atau yang sering disebut jquery. Fungsi dari jquery ini natinya untuk menambahkan event di HTML kita.
<script>
 $(document).ready(function() {
  $('#menu').click(function() {
   $('ul').toggleClass('add')
  })
 })
</script>
Penjelasan dari script diatas adalah kita menambahkan sebuah event click pada HTML kita pada tag yang ber id menu dalam cotoh ini yang memiliki tag dengan id menu adalah tag <img>,jadi bahasanya jquery tolong carikan saya elemen html yang ber-id menu jika ketemu tambahkan event click, dan jika id menu tersebut di click lakukan sesuatu pada tag <ul> yakni tambahkan class add pada tag tersebut. Untuk CSS nya sendiri bisa lihat script dibawah ini,kemudian simpan dengan nama style.css.
*{
 margin: 0;
 padding: 0;
}
/*Merubah background*/
body{
 background-color: rgba(0,0,0,0.1);
 font-family: sans-serif;
}
/*memrubah tampilan dengan class nav*/
.nav {
 background-color: #acacac;
}
.nav ul {
 width: 80%;
 margin: 0 auto;
}
.nav ul li {
 display: inline-block;
 list-style: none;
 padding:  16px;
}
.nav ul li:hover {
 background-color: rgba(0,0,0,0.7);
}
.nav ul li a{
 text-decoration: none;
 font-size: 20px;
 color: #fff;
}
.navbar-responsive {
 width: 100%;
 padding: 16px;
 background-color: #222;
 text-align: right;
 box-sizing: border-box;
 color: #fff;
 display: none;
}

@media(max-width: 768px){
 .navbar-responsive {
  display: block;
 }
 .nav ul {
  width: 100%;
  display: none;
 }
 .nav ul li {
  display: block;
  text-align: center;
 }
 .nav ul li:hover {
  background-color:#009999;
 }
 /*class add yang natinya ditambahkan ke ul*/
 .nav .add {
  display: block;
 }
 
}

Script diatas meupakan css nya, saya tidak akan membahas secara satu persatu mengenai css diatas namun yang akan saya bahas adalah css yang membuat menu tersebut jadi responsive.
@media(max-width: 768px){
 .navbar-responsive {
  display: block;
 }
 .nav ul {
  width: 100%;
  display: none;
 }
 .nav ul li {
  display: block;
  text-align: center;
 }
 .nav ul li:hover {
  background-color:#009999;
 }
 /*class add yang natinya ditambahkan ke ul*/
 .nav .add {
  display: block;
 }
 
}
Script diatas lah yang membuat navbar tersebut menjadi responsive,untuk melihat hasilnya silahkan lihat gambar yang ada di postingan ini. Untuk materi pada postingan ini kalian bisa download disini.
Sekian pembahasan mengenai cara membuat responsive navbar dengan HTML dan CSS, untuk selanjutnya nanti kita akan membahas mengenai repononsive navbar beserta logo dengan menggunakan html dan css,update terus di serba ngoding. Happy Coding!.

0 Response to "Membuat Responsive Navbar dengan HTML dan CSS"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel