Akıllı Çekmece Mobil Menü Gezinti Eklentisi – jQuery.mmenu (mhead) Kütüphanesi

Mhead, sayfayı aşağı veya yukarı kaydırdığınızda otomatik olarak göster / gizle mantığı ile çalışan, dinamik web uygulamanız için kullanabileceğiniz, yapışkan mobil menü gezintisi oluşturmak için kullanılan bir jQuery eklentisidir.

Projelerinizde kolaylıkla kullanabileceğiniz bir kütüphane olan mmenu kütüphanesi örneğini sizlerle birlikte bu blog gönderisinde yapmış olacağız. Sorularınız olursa iletişim bölümünden benimle paylaşabilirsiniz.

1- Adım: Başlangıç

Öncelikle mmenu eklenti dosyalarını buradan edinelim, sayfamızın içerisine import edelim. (jQuery eklemesini yapmayı da unutmayalım.)

<script src="/path/to/jquery.js"></script>
<link rel="stylesheet" href="/path/to/jquery.mmenu.all.css">
<script src="/path/to/jquery.mmenu.all.js"></script>

2- Adım: mhead entegrasyonu

mhead dosyalarımızı da sayfamıza ekleyelim.

<link rel="stylesheet" href="jquery.mhead.css">
<script src="jquery.mhead.js"></script>

1 2	<link rel="stylesheet" href="jquery.mhead.css"> <script src="jquery.mhead.js"></script>

3- Adım: Navigasyon simgeleri için en güncel Font Awesome’u yükleyelim

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

1	<link rel="stylesheet" href="/path/to/font-awesome.min.css">

4- Adım: Başlık gezinme çubuğunu oluşturalım

<div class="mh-head Sticky">
  <span class="mh-btns-left">
    <a class="fa fa-bars" href="#menu"></a>
  </span>
  <span class="mh-text">demo</span>
</div>

</span>

</div>

5- Adım: Navigasyona kendi menü öğelerimizi ekleyelim.

<nav id="menu">
  <ul>
    <li><a href="#">Anasayfa</a></li>
    <li><span>Hakkımızda</span>
      <ul>
        <li><a href="#">Biz Kimiz</a></li>
        <li><span>Ekiplerimiz</span>
          <ul>
            <li><a href="#">Yönetim</a></li>
            <li><a href="#">Satış</a></li>
            <li><a href="#">Pazarlama</a></li>
          </ul>
        </li>
        <li><a href="#">İletişim Bilgilerimiz</a></li>
      </ul>
    </li>
    <li><a href="#">Ürünlerimiz</a></li>
  </ul>
</nav>

<ul>

<li><a href="#">Anasayfa</a></li>

<li><span>Hakkımızda</span>

<ul>

<li><a href="#">Biz Kimiz</a></li>

<li><span>Ekiplerimiz</span>

<ul>

<li><a href="#">Yönetim</a></li>

<li><a href="#">Satış</a></li>

<li><a href="#">Pazarlama</a></li>

</ul>

</li>

<li><a href="#">İletişim Bilgilerimiz</a></li>

</ul>

</li>

<li><a href="#">Ürünlerimiz</a></li>

</ul>

</nav>

6- Adım: Eklentiyi varsayılan ayarlarla tanımlayalım ve başlatalım.

//  menu oluşturuyoruz
$('#menu').mmenu();

//  eklentiyi başlatıyoruz
$('.mh-head').mhead();

// menu oluşturuyoruz

$('#menu').mmenu();

// eklentiyi başlatıyoruz

$('.mh-head').mhead();

7- Adım: Üstbilgi navigasyonunu özelleştirmek için ayarlamalarımızı yapabiliriz (İsteğe bağlı)

$('.mh-head').mhead({
  scroll: {
    hide: 0,
    show: 0,
    tolerance: 4
  },
  hamburger: {
    menu: null,
    animation: "collapse"
  }
});

$('.mh-head').mhead({

scroll: {

hide: 0,

show: 0,

tolerance: 4

hamburger: {

menu: null,

animation: "collapse"

}

});

CSS3 - HTML5

Permalink: https://fatihsoysal.com/blog/akilli-cekmece-mobil-menu-gezinti-eklentisi-jquery-mmenu-mhead-kutuphanesi/

0 Yorum

Inline Feedbacks

View all comments

Freelance Proje İş Alımı

Kategoriler

Akıllı Çekmece Mobil Menü Gezinti Eklentisi – jQuery.mmenu (mhead) Kütüphanesi

Fatih Soysal