StickUp ( jquery yapışkan menü/div ) | Web bulutu

StickUp ( jquery yapışkan menü/div )

Sticky menü olarak da geçen bu jquery eklentisi ile web sitenizde yapışkan menüler elde edebilirsiniz. Sadece menü değil, istediğiniz bir elementi scroll hizasına geldikten sonra en tepeye yapıştırabilirsiniz. Örnek olarak webbulutu.net’in tasarımında menüde kullanılmış. Scroll menü hizasına geldiğinde tepeye yapışıyor, yukarı çıktığınızda eski halini alıyor. Bunun farklı versiyonlarını css ile yapmak mümkün fakat css ile en tepeye sabitlemek ile yetinebilirsiniz. Yani sabitlenecek öğenin üzerinde başka bir öğe/öğeler varsa veya üzerinde boşluk varsa, css bu konuda bize yetersiz kalabilir. Burada js kodları devreye giriyor. Sizlere bu konuda bahsedeceğim jquery yapışkan menüyü kullanması da bir o kadar kolay 🙂

İlk olarak eklentimizi ŞU adresten indiriyoruz.

Eklentiyi projemizin bulunduğu klasore aldıktan sonra, eklenti linklerimizi dahil ediyoruz. Ben daha önce jquery dosyası eklenmediğini varsayarak devam ediyorum, sizde daha önce dahil edilmişse hangi dosya size uyum sağlıyorsa onu kullanın.

Head etiketleri arasına alttaki linkleri dahil ederek, klasor yolunu kendinize göre düzenleyin.

<script src="js/jquery.js"></script>
<script src="js/stickUp.js"></script>

Aşağıdaki kodu ise, Web sitenizin en sonuna body etiketinden sonra gelecek şekilde ekleyin. Ve #header-nav-menu id/class’ını kendinizin yapışkan div olmasını istediğiniz id/class ile değiştirin.

    <script type="text/javascript">
      jQuery(function($) {
        $(document).ready( function() {
          $('#header-nav-menu').stickUp({
                        parts: {
                          0:'home',
                          1:'features',
                          2: 'updates',
                          3: 'installation',
                          4: 'one-pager',
                          5: 'extras',
                          6: 'wordpress',
                          7: 'contact'
                        },
                        itemClass: 'menuItem',
                        itemHover: 'active',
                        topMargin: 'auto'
                      });
        });
      });
    </script>

Burada ufak bir not bırakmak istiyorum;

Eğer web sitenizi kapsayan bir diviniz varsa ve mesela 1024px genişliğinde ise ve yapışkan olmasını istediğiniz div, bu kapsayıcı içinde ve width 100% değer verdiyeniz, bir de max-width:1024px; gibi max boyut girmek zorundasınız. Eğer bu yapılmamışsa, Yapışkan div aktif olduğu zaman genel divinizden taşacaktır ve istediğiniz gibi olmayacaktır.

Bir önceki yazımız olan Multiple backgrounds CSS3 başlıklı makalemizi de okumanızı öneririz.

17 Comments

  1. Merhaba yapışkan menüyü yukarda anlattığınız gibi yapmaya çalıştım fakat menü işareti solda çıktı ve aşağıda kaldı sizin sayfanızdaki gibi istiyordum nasıl yapabilirim

    1. Merhabalar, sitenizi kontrol ettim fakat düzelttiğinizi gördüm. Ya da bende normal çıktı bilmiyorum. Konunun en altında bununla alakalı not bırakmıştım sanırım orayı kaçırmışsınız;

      Burada ufak bir not bırakmak istiyorum;

      Eğer web sitenizi kapsayan bir diviniz varsa ve mesela 1024px genişliğinde ise ve yapışkan olmasını istediğiniz div, bu kapsayıcı içinde ve width 100% değer verdiyeniz, bir de max-width:1024px; gibi max boyut girmek zorundasınız. Eğer bu yapılmamışsa, Yapışkan div aktif olduğu zaman genel divinizden taşacaktır ve istediğiniz gibi olmayacaktır.

      1. Alakalı notu okudum fakat anlamadım pek bilgim yok bir çok değer buluyorum hangisini değişeceğimi bilemiyorum

        1. web sitenizi kontrol ettim, “mh-main-nav ” classına “max-width: 1024px !important;” gibi değer atayarak deneyebilirsiniz. Aynı dive birden fazla class atandığı için, farklı değerler de döndürebilir tarayıcı. Aşağıdaki class’ları kontrol ederek, hangi css kodunun engellediğini veya farklı çalışma sergilediğini kontrol edebilirsiniz.

          ilgili dive atanmış class’lar;
          “mh-navigation mh-main-nav mh-container mh-container-inner mh-clearfix”

          1. Merhaba sorularıma cevap verdiğiniz için çok teşekkürler sizden rica etsem siz siteme yapışkan menüyü ekleyebilir misiniz ben bir türlü yapamadım Bulutaylak[at]gmail.com adresinize site bilgilerimi gönderebilir miyim?

        1. Onu da düzelttim şimdi Seda hanım. Ortam kısmına gerekli jquery ve js dosyalarını yükleyip oradan çektim, yani oradaki iki dosyayı silerseniz sistem bozulacaktır. Ordan kaldırmak isterseniz, ftpden gerekli dosyaları atıp, header.php dosyasından yollarını değiştirmeniz gerekmektedir. Bu şekilde kullanımın bir zararı, hatta normalinden bir farkı yoktur kalabilir yani. Giriş bilgilerinizi güncelleyin lütfen, iyi çalışmalar.

          1. Çok teşekkürederim şimdi baktım düzelmiş menü işaretini nasıl büyütebilirim acaba

  2. “slicknav_icon-bar” class’ına font-size girerek büyütebilirsiniz. Görünüm->düzenle->Sağ üst köşeden İlgili temanın alt elamanını seçin-> sağ en altta style.css seçin, en altına ilgili class’a css yazabilirsiniz.

    1. Yardımlarınız için çok teşekkürler dediğiniz gibi yaptım fakat menü iconunun sadece tek çizgisi görünüyor galiba menü genişliği yeterli gelmiyor giriş bilgilerim aynı rica etsem siz bakabilir misiniz bide sizin sayfanızın menü işareti gibi menüye çerçeve yapılabilir mi?

      1. Merhaba, gerekli değişiklikleri sağladım. Düzenleme yapmanız gerekirse, aşağıdaki adımları uygulayın.

        Görünüm->Düzenleyici-> sağ taraftan “düzenlemek istediğiniz temayı seçin”-> MH Magazine lite-> sağ en altta style.css’i seçin -> en altına indiğinizde aşağıdaki kodları göreceksiniz. Açıklamalar aşağıda belirtilmiştir.

        .slicknav_icon {
        border: 1px solid #f1f1f1 !important; <--- çerçeve kalınlığı, rengi ve modeli. padding: 6px; <- Çerçeve içi boşluk } .slicknav_menu .slicknav_icon { float: left; <- değiştirmeyin margin: 0.188em 0 0 0.438em; <- değiştirmeyin font-size: 22px; <- 3 çizginin boyutu. } İyi çalışmalar...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir