Blogger için CSS3 Açılır Üst Menü

Blogger İçin CSS3 Açılır Liste Menü

Blogger şablonların da sıkça görünen açılır liste menüleri standart olarak dağıtıldığı için bir çok kullanıcı kullanmadan önce düzenlemelerde sıkıntı yaşayabiliyor. Bu durumu ortadan kaldırmak için kalıplaşmış bir açılır menü kodunu kendimize göre uyarlamaya çalışacağız. Menüyü görmek için demoyu ziyaret edin.

Blogger İçin CSS3 Açılır Üst Menü Demo  

Menüye özellikle iki link ekledim biri açılır biri sabit link. İstediğimiz gibi düzenleyerek kendimize uygun bir menü elde edeceğiz. Öncelikle Menüyü kullanmak için Blogger kontrol panelinden Yerleşim ayarlarını geçin, Gadget Ekle seçeneği ile HTML/JavaScript  ayağını seçerek aşağıda ki kodları ekleyin.

<!--MBL Animated CSS3 Multi Drop Down Menu For Blogger-->
<link rel="stylesheet" type="text/css" href="http://mybloggerlab.com/StyleSheet/MBLNAV.css"/>          


<nav id="mbl-menu-wrap">    

 <ul id="mbl-menu">

////////////////////BURAYA MENÜ KODLARI EKLENECEK ////////////////////
    </nav>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
  $('li').has('ul').mouseover(function(){
   $(this).children('ul').css('visibility','visible');
   }).mouseout(function(){
   $(this).children('ul').css('visibility','hidden');
   })
  }

  /* Mobile */
  $('#mbl-menu-wrap').prepend('<div id="mbl-menu-trigger">mbl-Menu</div>');  
  $("#mbl-menu-trigger").on("click", function(){
   $("#menu").slideToggle();
  });

  // iPad
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  if (isiPad) $('#mbl-menu ul').addClass('no-transition');      
    });   
       
</script>

Menüde kullanabileceğimi iki seçenek var açılır menü butonu ve link eklenecek buton demoda sadece ikisini kullandım. Yukarıda kırmızı ile belirtilen alanı aşağıda ki kodları ekleyerek sabit link butonu yada açılır link butonu elde edebilirsiniz.

Sabit link oluşturmak istiyorsanız kırmızı ile belirlenmiş alana aşağıda ki kodu ekleyin. Link 1 Kısmı menüde görülecek içerik , link kısmı ise içeriğin yönleneceği adresi belirler.

 <li><a href="http://www.bloggerdersleri.com">LİNK 1</a></li>

Açılır link oluşturmak istiyorsanız aşağıda ki kodları kullanmanız gerekiyor. Kırmızı ile belirtilmiş alana aşağıda ki kodları ekleyin. Açılır Menü kısmı ve türevleri görünecek içeriği, link kısımları ise yöneleceği adresi belirler.

  <li>
   <a href="http://www.bloggerdersleri.com">Açılır Menü</a> 
<ul> 
<li><a href="http://www.bloggerdersleri.com">Açılır Menü - 1</a></li> 
<li><a href="http://www.bloggerdersleri.com">Açılır Menü - 2</a></li> 
<li><a href="http://www.bloggerdersleri.com">Açılır Menü - 3</a></li> 
<li><a href="http://www.bloggerdersleri.com">Açılır Menü - 4</a></li> 
            </ul> 
            </li> 
 </ul> 

Oluşturduğunuz liste menüde açılacak olan link sayısının daha fazla olmasını arzuluyorsanız. </ul> kodundan önce aşağıda gördüğünüz sabit link kodu olan satırı tekrar ekleyin :

<li><a href="http://www.bloggerdersleri.com">Açılır Menü - 4</a></li> 

Aşağıda göreceğiniz kod haline getirirseniz açılan liste menüsü sayısı beşe çıkacaktır.

  <li>
   <a href="http://www.bloggerdersleri.com">Açılır Menü</a> 
<ul> 
<li><a href="http://www.bloggerdersleri.com">Açılır Menü - 1</a></li> 
<li><a href="http://www.bloggerdersleri.com">Açılır Menü - 2</a></li> 
<li><a href="http://www.bloggerdersleri.com">Açılır Menü - 3</a></li> 
<li><a href="http://www.bloggerdersleri.com">Açılır Menü - 4</a></li> 
<li><a href="http://www.bloggerdersleri.com">Açılır Menü - 5</a></li>
            </ul> 
            </li> 
 </ul> 

İki kod dizini istediğin sıralayarak defalarca kullanıp dilediğiniz tarzda ve dilediğiniz sayıda açılma gösteren üst menü başlığı oluşturabilirsiniz.