30 Ocak 2010

Yatay alta açılır menü, genel itibari ile Takip Listem blogunda anlatılan menülere benzemektedir. Fakat yatay alta açılır menünün iki önemli farkı vardır. Birincisi menü çubuğunun sağında site içi arama kısmı, ikincisi de menünün hareketleridir. Menü hareketleri geçikmelidir. Fare ile menü üzerine gelindiğinde yavaşca alt menüler açılır ve fare menü üzerinden uzaklaştırıldığında alt menüler yavaşca kapanır. Görünüm olarak daha profesyonel bir görüntüsü olduğunu düşünüyorum. Alttaki resimden blogunuzda nasıl görüntüleneceğini inceleyebilirsiniz.

uvumi-tool-drop-menu

Resme tıkla büyüt.

Yatay alta açılır menüyü beğendiyseniz yapmanız gerekenler çok basit;

Öncelikle blogger.com hesabınıza giriş yapın. Menüyü oluşturmak istediğiniz blogun için Yerleşim > HTML Düzenle yolunu izleyin.

Temanızda CTRL+F kısayolu ile ]]> kodunu aratın. Bu kodun hemen üstüne CSS menü kodunu ekleyin. Google Sites oluşturduğum siteye txt dosyası halinde yükledim.

Ardından temanızda CTRL+F kısayolu ile </head> kodunu aratın. Bulduğunuz kodun hemen üstüne Google Sites yardımı ile yüklediğim .txt dosyasında yer alan kodları yapıştırın. Adresi; Head öncesi kodunu indir.

Temanızda alttaki kodu aratın;
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

Google Site ile yüklemiş olduğum menünüzde görüntülenmesini istediğiniz menü linkleri örnek listesini indirin. Kendi blogunuza özgün düzenleyin ve blogunuzda bulmuş yukarıdaki kodun altına yapıştırın.

Menü linklerinde link adreslerini ve link adreslerini tanımlayan kısımları değiştirebilirsiniz. Örnek;
<li><a href='http://takipteyiz.blogspot.com/' rel='nofollow'>Tutorials 1</a></li>

Kırmızı yere gerekli link, yeşil yerlere de linkin adını yazabilirsiniz.

Firefox 2 & 3, Internet Explorer 6 & 7, Opera 9, Safari 3 tarayıcılarında sorunsuz çalışmaktadır. CSS ile menü görünümünde değişiklikler yapılabilir.

Yatay alta açılır menü yazısı için kaynak olarak UvumiTools Dropdown Menu kullanılmıştır.

Kodları dosya haline getirip, bir siteye yükledim ve konuyu bu şekilde anlattım. Umarım yazının anlaşılmasına etki etmez bu durum.

Kolay gelsin...
Yorum
JudgeOfnighT dedi ki...
Bu menü çok güzel fakat manşetlerin çalışmasını engelliyor. Bunun için ne yapmalıyız?
Sade dedi ki...
tercih yapmak zorunda kalacaksın zira bu menüde iki tane .js uzantılı dosya çalışmakta... Diğer menüleri deneyebilirsin. Eğer farklı bir yaklaşım, cevap bulabilirsem yazarım. Siz de bulursanız lütfen bizi de haberdar edin...
mcaltunel dedi ki...
harika bilgiler teşekkürler
http://sahibindengidiyor.blogspot.com/
Neo dedi ki...
Çok güzel ve yararlı oldu. Bende menümü nasıl düzenlerim diye merak ediyordum bu yazın sayesinde menümü yaptım çok teşekkür ediyorum dostum.
Neo dedi ki...
Dostum ilk önce size teşekkür etmek istiyorum. Ve size şunu sormak istiyorum. Ben menüyü oluşturdum peki bu oluşturduğum menülere link nasıl atayacağım. Mesela 'İLETİŞİM' bölümüne tıkladığımda iletişim bilgilerimin görünmesi için ne yapmam lazım?
Adsız dedi ki...
Bu menünün rengini nasıl değiştirebiliriz acaba.
Ayrıca çok teşekkür ediyorum güzel bir menü
Kemal Tepe dedi ki...
Mrb admin ben oluşturduğum her menünün anasayfa gibi davranmasını istiyorum. her menüye tıklandığında , menü altında farklı şeyler paylaşmak istiyorum nasıl yapabilirim