02 Ağustos 2009

Acilir Menu

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
Yorum
MSNerkiz dedi ki...
js dosyasını nerden indireceğiz
MSNerkiz dedi ki...
teşekkürler şimdi yaptım
Adsız dedi ki...
revoulition lifestyle temasını kullanıyorum bende çoklu menü var temada ama menüde son yazıların linkleri oluyor.Bu temadaki menüyü nasıl kaldırıp normal bir tekli menü koyabilirim acaba
Sade dedi ki...
temada alt alta iki tane menü var yukarıdaki gibi var olan temanızdaki kodları bulun ve silin böylece sadece ana kategorileriniz kalır alta doğru açılanlar ortadan kalımış olur;)

<li><a href="#">Acilir 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>
Sade dedi ki...
kalımış değil kalkmış:D
Sade dedi ki...
temanızda multi açılır menü yazısında bulunan benzer kodlar arasından, yorumda verdiğime benzeyen kodları (ki bu kodlar alta doğru açılan menünün kodlarıdır) silin. Bunu yapmadan öncede mutlaka temanızın yedeğini alın.

acele ile yazınca yukarıdaki yorumdaki gibi manasız, az anlaşılabilir bir cümle cıktı! umarım bu daha bir anlaşılır olmuştur.
Adsız dedi ki...
teşekkürler sayenizde birşeyler öğreniyorum :)
eymen dedi ki...
Yaptım oldu. Gerçi öğeleri henüz değiştirmedim fakat menü geldi ve mouseover durumunda seçenekler açılıyor. Bu bilgiden ötürü teşekkür ve takdirlerimi bir borç bilirim. Peki renklerini nasıl değiştirebileceğimizi bileiyor musunuz?
Sade dedi ki...
renkler için ilk koddaki background ve color kodlarını değiştirebilirsin.
Tuba Anıl dedi ki...
merhaba,

siz çok güzel anlatmışsınız ama ben bir türlü beceremedim:( biraz acemiyim de.temamın yedeğini aldım ,.tüm anlattığınız adımları uyguladım ama sürekli html hatası veriyor.yardımcı olurmusunuz acaba?
Sade dedi ki...
Tabiki, elimden geldiğince yardım etmek isterim;
Öncelikle dikkat etmeniz gereken noktları şöyle özetleyebilirim; Lütfen alttaki adımların doğruluğunu kontrol edin.

1) .js uzantılı dosyaları yüklediniz mi?

2) Yüklediğiniz .js uzantılı dosyanın kodunu 2. adımda yerine yazdıktan sonra head kodu üstüne yapıştırdınız mı?

3)CSS kodunu doğru yere yapıştırdınız mı?
Tuba Anıl dedi ki...
Yine bennnnnnnnnnnnnn:))))))))))

şimdi size başka bir sorum olacak.bu arada yatay menüyü yaptım.çook teşekkürler.
benim hali hazırda bir bloğum var.şimdi şatışa yönelik başka bir blog daha hazırladım.yanlızzz ilk bloğumda "profil bölümünde bloglarımın altında sadece hali hazırda olan küçük adam bloğum var.yani ikincisini göremiyorum.sebebi nedir ve nasıl yapmalıyım.istiyorum ki benim profilime giren bloglarım kısmında her ikisinide görebilsin.
şimdiden çok teşekkür ederim.gerçekten çok nitelikli bir site yapmışsınız.daha önceleri kendi çabalarımızla günlerce sorguladığımızı şimdi rahatlıkla yapabiliyor ve sorabiliyoruz.kendi adıma çoook teşekkürler...
Sade dedi ki...
Kumanda Paneli > Profili Düzenle yolunu izleyin ve Bloglarımı göster seçeneğinin yanında yer alan Gösterilecek blogları kısmına tıklayın. Açılan sayfadan görüntülenmesini istediğiniz bloglarınızı seçin ve kaydedin.

Blogger Kullanıcıları için Faydalı bilgileri bir ayara toplayabildiysem ne mutlu. Kolay gelsin, Tuba Hanım.
kartalizma_okan dedi ki...
css dosyasını yükleyip linki nereye kopyalıyacağız benim blogumda olmadı bu olay:S
Sade dedi ki...
JavaScript kodunu ve CSS kodlarımızı ekledikten sonra Sayfa Ögelerine gelin ve bir gadget ekleye tıklayın açılan pencereden JavaScript / HTML ekle seçeneğini seçin ve son adımda yer alan kodu ekleyin ve kaydedin.
~BaBaCaN591.TR~ dedi ki...
bu menü sistemini daha önceki temamda kullanıyordum. ama şimdi googlenin "blogger şablon tasarımcısı" aracılığıyla yeni bir tema oluşturdum. aynı aşamaları yapıyorum ancak sonuç elde edemiyorum. javascriptin yolunu gösterip css yi göstermezsem menüler abuk subuk açılıyor. css yi de işin içine katınca açılır menü çalışmıyor sadece görüntüde var.
Serhat YILDIKO dedi ki...
Sizin sayfadaki gibi menu nasil yapariz ya yardimci olurmsunuz lutfen teskkurler..?
Onur Çetin dedi ki...
CSS Linkleri yenilermisiniz linkler ölmüş ?
atomic02ali dedi ki...
değerli katkı ve paylaşımlarınıza teşekkür ederim. rapid linki kırık yani dosya yerinde yok (.js) indiremedim. başka bir alternatif varmı acaba?
Bu Benim Yolum dedi ki...
Merhaba,

ben menu ekledim ama mevcut yazıları nasıl menuye göre sınıflandıracağım her bölümde ana sayfa görünüyor

www.bengiozkan.blogspot.com
kralyalcin dedi ki...
ben söyle bir sey yapmak istiyordum,blogtaki categorileri bir baslik altinda acilan linkler halinde bir drobdown menüsü ariyordum,sizin kodlarini vermis oldugunuz menünün bir demosunu görmeden bu kadar ise girismek cok riskli gercekten,yine verdiginiz bilgiler icin tesekkür ederim.
Mehmet ER dedi ki...
js ve css dosyalarını nasıl indireceğiz? verdiğiniz linklere tıklayınca açınlan sitede indirme fonksiyonu bulamadım. Teşekkürler...