Multi Açılır Menü - Blogger Çoklu Menüde Son Nokta

Menü, ziyaretçilerinizin sayfa içeriğinizinde gezintiye çıkabilmeleri için en güzel kısımdır. Sayfa içeriğinizin kompleksliğine veya kendi görsel zevkinize uygun farklı menülerle okuyucularınızı etkiliyebilir ve onların sayfanızda istedikleri içeriği bulabilmeleri için onları yönlendirebilirsiniz.

Blogspot'da farklı kullanım amaçlarına hizmet edebilecek bir kaç menüden bahsetmiştim. En ilgi çekeni, "Yatay Menü Ekleme" konusuydu. Zaten, özellikle blog dünyasına yeni adım atıp, menü işlerine soyunanlar için, ilk menü olarak bu menüyü tercih etmelerini öneririm. Başlangıç noktası için çok ideal bir seçim.

Ancak, menünün kullanımında pek basit ve kullanışlı olan "Bağlantı Listesi" kısıtlı web adresi eklememize imkan veriyor. Böyle olunca da biraz daha kompleks kullanımlara müsait ve daha detaylı bir menü isteyenler için tavsiye edilebilecek olan "Alt Kategoriler Şeklinde Açılır Menü" konusunu ele almıştım. Bu menü, alt kategorilere sahip olması ile önemlidir. Ayrıca Yatay Menüden farklı olarak; menüye, elektronik posta adresinizi yazabilir ve okuyucuların sizinle iletişime geçmesini sağlayabilirsiniz.

Bu iki benzer menüyü merak edenler şu adreslerden ziyaret edebilirler;
"Yatay Menü" ve "Kategorilerine Göre Alta Açılır Menü"

Blogger'a Multi Açılır Menü Ekleme

Bu iki menüye çok benzeyen ve fonksiyon olarak tek farkı alt ve daha alt menülere sahip olması olan bu menü ise daha çok belirli konular hakkında var olan kategorilerini bir başlık altında topladıktan sonra toplanan bu başlıkları da daha üst bir kategoride toplama ihtiyacı duyabilecek kullanıcılar için birebir çözümdür. Yukarıda resimde de görebileceğiniz gibi bir adet alta açılan menü sonrasında 2 kere sağa doğru açılan alt menülere sahip bir menüdür.

Multi Açılır Menü için Yapılması gerekenler Nelerdir?

İlk Adım: Öncelikle bu menü düzgün çalışmak için bir .js uzantılı dosyaya ihtiyaç duymaktadır. Bu dosyayı bilgisayarınıza indirin ve JavaScript Kullanımı yazısından istediğiniz bir yöntemi seçerek yükleyici sitelerden birine yükleyin ve web adesini kaydedin. Örnek: http://yukleyicisiteadresi.com/123456/acilirmenu.js

Bu dosyayı buradaki adresten bilgisayarınıza indirebilirsiniz.

İkinci Adım: Yüklemiş olduğunuz JavaScript'in adresini alttaki kodda kırmızı ile renklendirilmiş yere yapıştırın;

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://yukleyicisiteadresi.com/123456/acilirmenu.js' type='text/javascript'/>

yukarıdaki kodda yapılması gereken düzenlemeyi yaptıktan sonra temanızda </head> kodunu aratın ve bulduğunuz </head> kodunun hemen üstüne yukarıdaki kodu yapıştırın.

Üçüncü Adım: Temanızda </b:skin> kodunu bulun ve hemen yukarısına alttaki CSS kodlarını yerleştirin. Kodda herhangi birşeyi değiştirmenize gerek yok, sadece kopyala-yapıştır.

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

Yukarıdaki kodu temanıza ekledikten sonra, şablonunuzu görüntüleyin, eğer herhangi bir sorun olmadan blogunuzu görüntüleyebiliyorsanız, şablonunuzu kaydedin.

Son Adım : JavaScript kodunu ve CSS kodlarımızı ekledikten sonra Multi Menü için son adıma geçelim; Sayfa Ögelerine gelin ve bir gadget ekleye tıklayın açılan pencereden JavaScript / HTML ekle seçeneğini seçin ve alttaki kodu (gerekli değişiklikleri yaptıktan sonra) ekleyin ve kaydedin.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://takipteyiz.blogspot.com">Takip Listem</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Açılır Menu A</a>
<ul>
<li><a href="#">Alt A.1</a></li>
<li><a href="#">Alt A.2</a></li>
<li><a href="#">Alt A.3</a></li>
<li><a href="#">Alt A.4</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Multi Acilir Menu</a>
<ul>
<li><a href="#">Alt</a></li>
<li><a href="#">Multi Açılır A</a>
<ul>
<li><a href="#">Alt A.1</a></li>
<li><a href="#">Alt A.2</a></li>
<li><a href="#">Açılır Menu B</a>
<ul>
<li><a href="#">Alt B.1</a></li>
<li><a href="#">Alt B.2</a></li>
<li><a href="#">Alt B.3</a></li>
<li><a href="#">Alt B.4</a></li>
<li><a href="#">Alt B.5</a></li>
</ul>
</li>
<li><a href="#">Alt A.3</a></li>
</ul>
</li>
<li><a href="#">Alt</a></li>
<li><a href="#">Alt</a></li>
<li><a href="#">Alt</a></li>
</ul>
</li>
<li><a href="http://takipteyiz.blogspot.com">Blogger Yardim</a></li>
</ul>
<br style="clear: left"/>
</div>

Yukarıdaki kodda yapılması gereken değişiklikler neler?
# Yazan yerlere web adreslerini, alt, Alt menü, Açılır Menu A, Alt A.2, ... gibi kısımlara menü isimlerini yazabilirsiniz.

Not:
CSS Dosyasını: bu
JS dosyasını: bu
İkisi bir arada: buradan indirebilirsiniz.

CSS Yüklemesine Alternatif Çözüm
CSS kodlarını yüklemede ekstra bilgi olamsı adına alternatif çözüm için; İsteyenler, Css kodunu şu şekilde de kullanabilir; Yukarıdaki CSS dosyasını indirin ve bu adresten bulabilceğiniz yöntemlerinden biri ile yükleyin ve alttaki koda yerleştirip, ikinci adımda anlatılan ve yerleştirilmesi gereken kodun yukarısına yapıştırın.

<link rel="stylesheet" type="text/css" href="http://yukleyicisiteadresi.com/123456/acilirmenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

Umarım anlaşılır bir anlatım olmuştur. Eğer hatalı, eksik ya da tam anlatılmadığını düşündüğünüz bir kısım varsa lütfen yorumlarda belirtin. Yardımcı olmaya çalışırım.

Kolay gelsin...

Benzer Yazılar;
Pratik Yatay Menü
Alt Kategorili Menü
Sidebar'ınızı Menü ile Şenlendirin
Hareketli Menü
Gizli yazı imkanı
Tabbed Menu