Membuat Dropdown Mega Menu dengan jQuery dan Animate - Ensikology

Membuat Dropdown Mega Menu dengan jQuery dan Animate

Daftar Isi [Tampilkan]


Dropdown Mega Menu dengan jQuery dan Animate
Plugin menu jQuery yang cantik membantu Anda membuat menu mega dropdown dengan submenu animasi buka / tutup yang mengagumkan berdasarkan animate.css. Plugin ini juga menyediakan fallback untuk menghidupkan menu menggunakan jQuery ketika transisi CSS tidak didukung.

1. Sertakan animate.css yang diperlukan di bagian kepala halaman web Anda.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">

Sertakan Megadropdown.css untuk gaya menu mega utama. Anda dapat mengganti / memodifikasi CSS sendiri untuk membuat style Anda sendiri.
<link rel="stylesheet" href="stylesheets/Megadropdown.css">

3. Buat menu mega dropdown menggunakan daftar Html bersarang seperti ini:
<ul class="nav shadow clearfix nojs" id="menu">
  <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
  <li><a href="#">Category</a>
    <div class="container-4">
      <div class="col1">
        <h3>Megadrop</h3>
        <ul>
          <li><a href="">Item 1</a></li>
          <li><a href="">Item 2</a></li>
          <li><a href="">Item 3</a></li>
          <li><a href="">Item 4</a></li>
          <li><a href="">Item 5</a></li>
          <li><a href="">Item 6</a></li>
          <li><a href="">Item 7</a></li>
          <li><a href="">Item 8</a></li>
        </ul>
      </div>
      <div class="col1">
        <h3>&nbsp;</h3>
        <ul>
          <li><a href="">Item 9</a></li>
          <li><a href="">Item 10</a></li>
          <li><a href="">Item 11</a></li>
          <li><a href="">Item 12</a></li>
          <li><a href="">Item 13</a></li>
          <li><a href="">Item 14</a></li>
          <li><a href="">Item 15</a></li>
        </ul>
      </div>
      <div class="col1">
        <h3>&nbsp;</h3>
        <ul>
          <li><a href="">Item 16</a></li>
          <li><a href="">Item 17</a></li>
          <li><a href="">Item 18</a></li>
          <li><a href="">Item 19</a></li>
          <li><a href="">Item 20</a></li>
        </ul>
      </div>
      <div class="col1">
        <h3>&nbsp;</h3>
        <ul>
          <li><a href="">Item 21</a></li>
          <li><a href="">Item 22</a></li>
          <li><a href="">Item 23</a></li>
          <li><a href="">Item 24</a></li>
          <li><a href="">Item 25</a></li>
        </ul>
      </div>
      <div class="col4"> <a href='#'>
        <h3>Subhead Link.</h3>
        </a> </div>
    </div>
  </li>
  <li><a href="#">About</a>
    <div class="container-1">
      <ul>
        <li><a href="#">Who We Are</a></li>
        <li><a href="#">Why We Care</a></li>
        <li><a href="#">Some other page</a></li>
        <li><a href="#">How We Work</a></li>
      </ul>
    </div>
  </li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
</ul>

4. Sertakan Megadropdown.js dan sumber daya lain yang diperlukan di bagian bawah halaman web.
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><!--[if lt IE 9]></span> <! - [jika IE 9]></span>  
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.min.js"></script></span> <script type = "text / javascript" src = "// code.jquery.com/jquery-1.8.3.min.js"> </script></span>
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><![endif]--></span> <! [endif] -></span> 
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><!--[if gte IE 9]><!--></span> <! - [jika gte IE 9]> <! -></span> 
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><script src="//code.jquery.com/jquery-2.1.3.min.js"></script></span> <script src = "// code.jquery.com/jquery-2.1.3.min.js"> </script></span>
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><!--<![endif]--></span> <! - <! [endif] -></span> 

<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><script src="Megadropdown/hoverIntent.js"></script></span> <script src = "Megadropdown / hoverIntent.js"> </script></span> 
<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><script src="Megadropdown/Megadropdown.js"></script></span> <script src = "Megadropdown / Megadropdown.js"> </script></span> 

5. Aktifkan menu mega dropdown dengan pengaturan default.
$('#menu').Megadropdown();

6. Konfigurasi plugin.
$('#menu').Megadropdown({

// active class
activeClass: 'open',

// in ms
fadeInDuration: 250,

// fast or slode
fadeOutDuration: 'slow',

// open/close animations
// reference to http://daneden.github.io/animate.css/
open<a href="https://www.jqueryscript.net/animation/">Animation</a>: 'fadeInUp',
closeAnimation: 'fadeOutDown',

// in ms
hoverTimeout: 450

});

Plugin jQuery yang mengagumkan ini dikembangkan oleh djsmithme. Untuk Penggunaan Lanjut lainnya, silakan periksa halaman demo atau kunjungi situs web resmi di atas.
Ingatlah untuk selalu memberikan komentar yang sopan dan mengikuti Pedoman Komunitas kami.
Emoticon

Posting Komentar