Membuat Hamburger Menu dengan HTML, CSS dan jQuery

Pada artikel ini, kami akan menjelaskan bagaimana cara menyebarkan sajian burger-type yang terdiri dari tombol tetap pada panel navigasi yang, dikala diklik, menampilkan atau menyembunyikan sajian samping yang berisi daftar link, menyerupai yang sanggup kita lihat di bawah ini:
kami akan menjelaskan bagaimana cara menyebarkan sajian burger 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:
kami akan menjelaskan bagaimana cara menyebarkan sajian burger 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 dibutuhkan semoga ikon burger kita ada di menu. Referensi ini dibentuk 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 bab dokumen, bab utama ada di dalam tag 
<header>
dan 
<nav>
, yang berisi tombol hamburger dan daftar daftar menu, masing-masing, menyerupai yang sanggup 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 dipakai untuk menampilkan atau menyembunyikan menu, terdapat pada baris 3 hingga 5. On line 4, kita memakai kelas material-icons dari Materialize dan bersamaan dengan aba-aba "dehaze" yang kita nyatakan bahwa ikon yang akan dipakai yaitu burger satu;
  • Antara baris 5 dan 10 kita mempunyai daftar link navigasi yang akan ditampilkan atau disembunyikan dikala tombol diklik.
Dalam file style.css, bab yang paling penting mengacu pada format blok navigasi, yang pada awalnya tersembunyi. Hal ini dilakukan dengan memilih posisi horisontalnya sebagai negatif (-300px), menyerupai 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 sajian menjadi lancar.

Tak usang sehabis itu, kami mengatur menu_show yang menjadikan sajian muncul dikala mengatur posisi horisontal menjadi 0. Kelas ini ditambahkan dan dihapus melalui jQuery, dan jikalau ini selesai, transisi yang telah didefinisikan sebelumnya dipicu dengan melaksanakan animasi menu.
Akhirnya, kami mempunyai kueri media yang menciptakan sajian menempati keseluruhan halaman di layar hingga 360px wide.
Untuk mengaktifkan menu, menampilkan atau menyembunyikan daftar navigasi dikala diklik, kita memakai jQuery library. Berikut yaitu klik program 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 gampang dan bekerja dengan responsif.

Penulis : Diogo Souza from HtmlGoodies.com

Komentar

Posting Komentar