Açılır kapanır üst menü – miniDropdown.js

Açılır

jQuery Minijs eklentisi kullanışlı açılır menü örnekleri hazırlamanıza yarayan küçük boyutta fazla yer kaplamayan mini bir javascript kütüphanesidir.  Üç farklı drop down dediğimiz yatay açılır menü örneği hazırlayabilirsiniz jQueyr Mini.js menü eklentisi ile. Slayt olarak açılan alt kategori listesi, birden açılıp kaybolan alt kategori listesi ve sağdan sola doğru kayıp ana kategorinin altında  duran alt kategori listesi şeklinde örnekler hazırlayabilirsiniz.

Kullanım

  •  Head etiketleri arasına eklenecek olan kısımlar.

Js ve stil dosyaları : 

  <link rel="stylesheet" href="css/site.css">
  <!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
<script src="js/libs/jquery.min.js"></script>
<script src="js/miniDropdown.js"></script>

JavaScript : 

<script>
$(function(){
    // Basic example
    $('#mini-dropdown-1 .dropdown').miniDropdown();

    // Built in animation
    $('#mini-dropdown-2 .dropdown').miniDropdown({
      animation: 'slide', 
      show: 100,
      hide: 100,
      delayIn: 100,
      delayOut: 100
    });

    // Custom animations
    $('#mini-dropdown-3 .dropdown').miniDropdown({
      showFunction: function(item, subnav) {
        subnav.css({right: 0, opacity: 0}).show();
        subnav.animate({right: $(window).width() - item.offset().left - item.width() , opacity: 1}, 200)
      },
      hideFunction: function(item, subnav) {
        subnav.animate({right:  $(window).width(), opacity: 0}, 300, function(){
          $(this).hide();
        })
      }

    });
  });
</script>
  •  Body etiketleri arasına eklenecek olan bölüm.

Html:

    <nav id="mini-dropdown-1">
      <ul class="dropdown">
       <li>
        <a href="#">Home</a>
        <ul>
          <li><a href="#">Generic</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </li>
      <li>
        <a href="#">About</a>
        <ul>
          <li><a href="#">Another</a></li>
          <li><a href="#">Generic</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Another</a>
        <ul>
          <li><a href="#">Generic</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </li>
      <li><a href="#">Generic</a></li>
      <li><a href="#">Menu</a></li>
    </ul>
  </nav>
Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-02-09 tarihinde yayınlandı,Toplam 1857 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...