site stats
Sep 26, 2018
70 Views
0 0

Membuat Hamburger Menu dengan HTML, CSS dan jQuery

Written by

Pada artikel ini, kami akan menjelaskan bagaimana cara mengembangkan menu burger-type yang terdiri dari tombol tetap pada panel navigasi yang, saat diklik, menampilkan atau menyembunyikan menu samping yang berisi daftar link, seperti yang bisa kita lihat di bawah ini:

Membuat Hamburger Menu dengan HTML, CSS dan jQuery
Gambar 1. Desktop browser view.

Menu ini juga responsif, sehingga pada layar dengan lebar kurang dari 360px ini menempati keseluruhan halaman, sebagai berikut:

Membuat Hamburger Menu dengan HTML, CSS dan jQuery
Gambar  2. Mobile browser view.

CODE :

Di header halaman kami mengacu pada stylesheet kami (style.css) dan kedua stylesheet dan file Google yang berisi font tipe Material Icons. File font ini diperlukan agar ikon burger kita ada di menu. Referensi ini dibuat dengan tag <link> sebagai berikut:
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Di bagian dokumen, bagian utama ada di dalam tag

<header>

dan

<nav>

, yang berisi tombol hamburger dan daftar daftar menu, masing-masing, seperti yang dapat kita lihat di bawah ini:


<body>

<header> h1>Example: Creating a hamburger menu</h1>
  <div class="top">
   <a href="#" class="menu_icon"><i class="material-icons">dehaze</i></a>
  </div>
 </header>
 <nav class="menu">
  <a href="#" class="item_menu">home</a>
  <a href="#" class="item_menu">about</a>
  <a href="#" class="item_menu">products</a>
  <a href="#" class="item_menu">services</a>
  <a href="#" class="item_menu">contact</a>
 </nav>
 <main>
  Site content.
 </main>
 <footer>
  HtmlGoodies Example
 </footer>
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
 <script type="text/javascript" src="js/script.js"></script>
</body>

 

  • Tombol yang berisi ikon burger, yang digunakan untuk menampilkan atau menyembunyikan menu, terdapat pada baris 3 sampai 5. On line 4, kita menggunakan kelas material-icons dari Materialize dan bersamaan dengan kode “dehaze” yang kita nyatakan bahwa ikon yang akan digunakan adalah burger satu;
  • Antara baris 5 dan 10 kita memiliki daftar link navigasi yang akan ditampilkan atau disembunyikan saat tombol diklik.
Dalam file style.css, bagian yang paling penting mengacu pada format blok navigasi, yang pada awalnya tersembunyi. Hal ini dilakukan dengan menentukan posisi horisontalnya sebagai negatif (-300px), seperti yang kita lihat di bawah ini:

style* { margin: 0 auto; font-family: sans-serif; }

body { margin: 0 auto; }

header {
 height: 70px;
 background-color: #3e739d;
 border-bottom: 1px solid #494949;
 display: flex;
 align-items: center;
 justify-content: center;
}
header &gt; h1 {
 width: calc(100% - 160px);
 text-align: center;
 font-size: 20px;
 color: white;
}
header &gt; .top {
 position: absolute;
 left: 20px;
}
header &gt; .top a.menu_icon i {
 color: #000;
 font-size: 40px;
 padding-top: 5px;
 transition: .2s ease;
}
header &gt; .top a.menu_icon:hover i {
 color: #fff;
}
nav.menu {
 width: 300px;
 min-height: calc(100vh - 121px);
 background-color: #03a9f4;
 position: absolute;
 left: -300px;
 transition: .3s all;
}
nav.menu &gt; a {
    display: block;
    padding: 5px;
    margin: 15px 0 0px 20px;
    color: #494949;
    text-transform: uppercase;
}
main {
 width: 100%;
 padding: 30px;
 box-sizing: border-box;
}
footer {
 height: 50px;
 background-color: #494949;
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 bottom: 0;
 position: fixed;
 width: 100%;
}

.menu_show {
 left: 0!important;
}

@media screen and (max-width: 425px) {
 header h1 {
  font-size: 16px;
 }
}
@media screen and (max-width: 360px) {
 nav.menu {
  width: 100%;
  left: -100%; 
 }
}

 

  • Pada baris 5 kita mendefinisikan posisi blok sebagai absolut, yang memungkinkan kita untuk memperbaikinya pada titik tertentu yang didefinisikan pada baris 6 dengan properti kiri bernilai -300px;
  • Pada baris 7 kita mendefinisikan bahwa ketika sifat elemen diubah, animasi akan animasi selama 3 detik, sehingga menu menjadi lancar.

 

Tak lama setelah itu, kami mengatur menu_show yang menyebabkan menu muncul saat mengatur posisi horisontal menjadi 0. Kelas ini ditambahkan dan dihapus melalui jQuery, dan bila ini selesai, transisi yang telah didefinisikan sebelumnya dipicu dengan melakukan animasi menu.
Akhirnya, kami memiliki kueri media yang membuat menu menempati keseluruhan halaman di layar hingga 360px wide.
Untuk mengaktifkan menu, menampilkan atau menyembunyikan daftar navigasi saat diklik, kita menggunakan jQuery library. Berikut adalah klik acara tombol yang berisi fungsi kelas atas dan jQuery “toggleClass”, menambahkan atau menghapus kelas “menu_show” dari menu, membuatnya terlihat atau tak terlihat, sebagai berikut:

$(document).ready(function() {
 $("body").on('click', '.top', function() {
  $("nav.menu").toggleClass("menu_show");
 });
});

Dan hanya itu. Menu Anda dilakukan dengan beberapa langkah mudah dan bekerja dengan responsif.

Penulis : Diogo Souza from HtmlGoodies.com

Article Tags:
·
Article Categories:
HTML

Leave a Comment

Your email address will not be published. Required fields are marked *