Cara Membuat Navbar Responsiv dengan CSS Sendiri - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Navbar Responsiv dengan CSS Sendiri, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel css, Artikel desain-web, Artikel html, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Navbar Responsiv dengan CSS Sendiri
link : Cara Membuat Navbar Responsiv dengan CSS Sendiri

Baca juga


Cara Membuat Navbar Responsiv dengan CSS Sendiri


Selamat sore Guys kali ini kita akan membuat navbar yang responsive dengan css. Jika dibuat dengan bootstrap itu gampang, tetapi jika membuat dengan css secara manual bagaimana caranya? oke langsung saja. Pertama kita buat dulu struktur htmlnya seperti berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Responsive Navbar</title>
    <link rel="stylesheet" href="style.css">
    <script src="js/jquery.js"></script>
  </head>
  <body>
    <header>
      <h1>Best Website Since Google</h1>
    </header>
    <nav>
      <ul>
        <a href="#"><li>Home</li></a>
        <a href="#"><li>About</li></a>
        <a href="#"><li>Blog</li></a>
        <a href="#"><li>Shop</li></a>
        <a href="#"><li>Gallery</li></a>
        <a href="#"><li>Contact</li></a>
      </ul>
      <div class="handle">Menu</div>
    </nav>
    <section>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
    <script>
      $('.handle').on('click', function(){
        $('nav ul').toggleClass('showing');
      });
    </script>
  </body>
</html>

lalu buat cssnya seperti berikut:

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
header {
  background: #00795f;
  width: 100%;
  padding: 40px 0;
  color: #fff;
  text-align: center;
}
a {
  text-decoration: none;
  font-weight: bold;
  color: inherit;
}
nav ul {
  background-color: #43a286;
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: center;
  margin: 0;
  -webkit-transition: max-height 0.04s;
  -ms-transition: max-height 0.04s;
  -moz-transition: max-height 0.04s;
  -o-transition: max-height 0.04s;
  transition: max-height 0.04s;
}
nav ul li {
  display: inline-block;
  padding: 20px;
}
nav ul li:hover{
  background-color: #399077;
}
section {
  line-height: 1.5em;
  font-size: 0.9em;
  padding: 40px;
  width: 75%;
  margin: 0 auto;
}
.handle {
  width: 100%;
  background: #005c48;
  text-align: left;
  box-sizing: border-box;
  padding: 15px 50px;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  display: none;
}

@media screen and (max-width: 500px){
  nav ul {
    max-height: 0;
  }
  .showing {
    max-height: 20em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 15px 50px;
    text-align: left;
  }
  .handle {
    display: block;
  }
}

Pada css diatas ada kode @media screen and (max-width: 500px) nah itulah yang membuatnya responsive Pada layar dengan lebar 500px css yang digunakan adalah  nav ul {
    max-height: 0;
  }
  .showing {
    max-height: 20em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 15px 50px;
    text-align: left;
  }
  .handle {
    display: block;
  }

Lalu ada sedikit kode javascript
    <script>
      $('.handle').on('click', function(){
        $('nav ul').toggleClass('showing');
      });
    </script>
Kode tersebut berfungsi jika tombol menu diklik maka akan menampilkan isi menunya dengan efek togle. Ok Sekianlah tutorial dari saya tentang cara membuat navbar yang responsive, semoga bermanfaat.


Demikianlah Artikel Cara Membuat Navbar Responsiv dengan CSS Sendiri

Sekianlah artikel Cara Membuat Navbar Responsiv dengan CSS Sendiri kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Navbar Responsiv dengan CSS Sendiri dengan alamat link https://dev-create.blogspot.com/2016/12/cara-membuat-navbar-responsiv-dengan.html