Cara Membuat Menu Slide Menggunakan jQuery

Pada pembahasan artikel ini saya akan Merancang Fitur Slide Menggunakan HTML CSS dan jQuery. Selaku seorang Developer atau seorang pembuat laman terutama bagi bagian Design tentu diutamakan mesti user friendly. Secara umum sebuah fitur benar-benar urgen pada laman agar pengguna paham yang diinginkan. Saya tak ingin membahas secara panjang lebar, seketika saja kita membuatnya yuk simak langkah berikut.

Langkah Pertama-tama

Sobat buka text editor lalu bikin struktur HTML dan ketikkan code seperti dibawah ini

 <div class=menu-content>
      <ul>
            <li class=fitur>Fitur</li>
            <li><i class=fa fa-home></i>Home</li>
            <li><i class=fa fa-users></i>About</li>
            <li><i class=fa fa-picture-o></i>Gallery</li>
            <li><i class=fa fa-calendar></i>Events</li>
            <li><i class=fa fa-users></i>Career</li>
            <li><i class=fa fa-phone-square></i>Contact Us</li>
        </ul>
      <a href=# id=click><i class=fa fa-arrow-left></i></a>
</div>

jikalau telah jangan lupa bagi menambahkan link dari file CSS ,library jQuery dan Fontawesome bagi icon yang nanti diaplikasikan.

<link rel =stylesheet href=style1.css>
    <link href=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet>
    <script src=https://code.jquery.com/jquery-3.4.1.js></script>

Langkah Kedua

Tambahkan style CSS agar tampilan semakin cantik dan menarik seperti code berikut:

* {
      padding: 0px;
      margin: 0px;
}
body {
      overflow: hidden;
}
.menu-content {
      width: 250px;
      height: 100%;
      position: absolute;
      background-color: rgba(0, 0, 0, 0.82);
      transition: margin 0.5s ease-in-out;
      box-shadow: 1px 0 5px #000;
     
}

a {
      background-color: #F50057;
      color: #fff;
      font-size: 20px;
      margin-left: 260px;
      top: 5px;
      position: absolute;
      border-radius: 30%;
    }

a i {
      padding: 15px;
}

.none {
      margin-left: -250px;
}

ul {
      list-style: none;
}

li {
      height: 39px;
      font-size: 16px;
      color: #fff;
      font-family: Arial;
      border-bottom: 1px solid #999;
      padding-left: 15px;
      padding-top: 15px;
      cursor: pointer;
      transition: padding 0.5s ease-in-out;
}

li:hover {
      background-color: rgba(48, 63, 159, 0.6);
      padding-left: 30px;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
      text-decoration:underline;
}

.fitur {
      height: 50px;
      font-size: 30px;
      color: #fff;
      border-bottom: 1px solid #999;
      padding-left: 30px;
      padding-top: 15px;
      cursor: pointer;
      transition: padding 0.5s ease-in-out;
}

.fitur:hover {
      background-color: rgba(48, 63, 159, 0.6);
      padding-left: 30px;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0);
}

li i{margin-right: 5px; color: orange;}

dan jikalau telah langkah berikutnya tambahkan script bagi jQuery seperti dibawah ini

 $(document).ready(function() {
      $(#click).click(function() {
            $(.menu-content).toggleClass(none);
            $(.fa).toggleClass(fa-arrow-left);
            $(.fa).toggleClass(fa-arrow-right);
      });
});

Apabila telah seketika disimpan dan bagi melihat hasilnya coba jalankan di browser sobat.

Demikian yang dapat saya berikan di pembahasan kali ini Merancang Fitur Slide Menggunakan HTML CSS dan jQuery. semoga bermanfaat.

terima kasih.

Sumber https://kursuswebsite.org