Yatay alta açılır menü

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.

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...