Yaratıcı bir şekilde farklı menüler oluşturmak, iyi bir fikriniz veya ilhamınız olmadığında bazen oldukça zordur. Ancak bu tür bir konu, diğer ilham verici menü tasarımlarını arayarak veya araçlar yardımıyla düzeltilebilir. Bu konuda, jQuery.Mmenu oldukça kullanışlı bir araç olarak geliyor.

jQuery.Mmenu, web sitenizde mobil uygulama sürgülü gezinme menüsü oluşturmak için kullanımı kolay bir jQuery eklentisidir. Bu şık yaratıcı menü, daha güzel ve daha düzenli bir kullanıcı deneyimi sunacak.

Başlarken

Başlamak için jQuery.Mmenu, indirme sayfasına gidin ve eklenti otomatik olarak indirilecektir. Bu yazıda, temel bir menü oluşturmaya çalışacağız.

Tıpkı diğer jQuery eklentileri gibi, bunu kullanmak için sitenize gerekli bağımlılıkları eklemeniz gerekir. Onlar jQuery, jquery.mmenu.js ve jquery.mmenu.css. Fragman şu şekilde:

<head>
..
   <link run this command="text/css" rel="stylesheet" href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/jquery.mmenu.css" />
   <script run this command="text/javascript" src="jquery.js"></script>
   <script run this command="text/javascript" src="jquery.mmenu.js"></script>
..   
</head>

Ve bu, tüm işlevler ve stiller içeren temel bir menü oluşturmak için yeterli olmalıdır. Daha gelişmiş ve ekstra özelliklerde, ek JS ve CSS dosyası eklemeniz gerekir.

Yaratmak Menu

Temel menüyü genellikle oluşturduğunuz gibi oluşturalım. nav, ul, li ve a elementler. Bu demoda, üç alt menü ve bunun gibi üç alt alt menü içeren yatay bir menü oluşturacağız.

<nav >
   <ul>
     <li >
         <a href="https://www.driveria.net/blog/jquery-mmenu-sliding-menu/demo.html">Basic Horizontal Menu</a>
         <ul>
             <li><a href="#">First sub-menu</a></li>
             <li><a href="#">Second sub-menu</a>
                 <ul>
                     <li><a href="#">First sub-sub-menu</a></li>
                     <li><a href="#">Second sub-sub-menu</a></li>
                     <li><a href="#">Third sub-sub-menu</a></li>
                 </ul>
             </li>
             <li><a href="#">Third sub-menu</a></li>
         </ul>
     </li>
   </ul>
</nav>

Yukarıdaki menüde, jQuery.mmenu işlev referansı olarak kullanılacak bir menü kimliğine sahip nav’ı ekledik. sonra arayın plugin ile javascript işlevi ve kimliği bu şekilde ekleyin.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu();
  });
</script>

LI etiketinde, adında bir sınıf görebilirsiniz. Selected, bu sınıf, başlatma sırasında varsayılan seçili menüyü yapmak için kullanışlıdır. Ayrıca kendi sınıfınızı da ekleyebilirsiniz (örneğin active), ancak bunun gibi yapılandırma bölümüne eklediğinizden emin olun.

<script run this command="text/javascript">
  $(function() {
    $('nav#menu').mmenu({
      // options object
    }, {
      // configuration object
      selectedClass: "active"
    });
  });
</script>

Bu eklenti, alt menü kapatma ve açma bağlantılarını otomatik olarak ekledi, bu yüzden onları oluşturmamıza gerek yok. Menümüz şu şekilde olmalıdır.

Çözüm

jQuery.mmenu, farklı menüleri olabildiğince kolay oluşturmanız için size harika bir çözüm sunar. Hatta bu eklentiyle başka etkileşimli öğeler bile oluşturabilirsiniz, örneğin mobil site için kayan bir araç ipucu ve bildirim çubuğu oluşturabilirsiniz.

jQuery.Mmenu önceden kullanım için de özelleştirilebilir. Örneğin, tema uzantısını, eklentisini (etiketler, sayaçlar, başlık, dragOpen ve arama alanı) ve konumlandırmayı birleştirerek sitenizde mobil benzeri bir kişi listesi oluşturabilirsiniz.

Makaleyi bulduysanız jQuery.mmenu Kullanarak Kolaylıkla Kayan Menü Oluşturma faydalı, lütfen arkadaşlarınızla paylaşın. Sonraki yazılarda görüşmek üzere. Takip et driveria.net en son güncellemeleri almak için!