Cara Membuat Menu Slide Menggunakan jQuery

Dalam pembahasan artikel ini saya akan Membuat Menu Slide Menggunakan HTML CSS dan jQuery. Sebagai seorang Developer atau seorang pembuat website terutama untuk bagian Design tentu diutamakan harus user friendly. Secara umum sebuah menu sangat penting dalam website agar pengguna mengerti yang diinginkan. Saya tidak ingin membahas secara panjang lebar, langsung saja kita membuatnya yuk simak langkah berikut.

Langkah Pertama

Sahabat buka text editor lalu buat struktur HTML dan ketikkan code seperti dibawah ini

 <div class="menu-content">
      <ul>
            <li class="menu">Menu</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>

jika sudah jangan lupa untuk menambahkan link dari file CSS ,library jQuery dan Fontawesome untuk icon yang nanti dipakai.

<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;
}

.menu {
      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;
}

.menu: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 jika sudah langkah berikutnya tambahkan script untuk 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 sudah langsung disimpan dan untuk melihat hasilnya coba jalankan pada browser sahabat.

Demikian yang bisa saya berikan pada pembahasan kali ini Membuat Menu Slide Menggunakan HTML CSS dan jQuery. semoga bermanfaat.

terima kasih.

The post Cara Membuat Menu Slide Menggunakan jQuery appeared first on Kursus Website Terbaik.