En Basitinden Hızlı CSS Dropdown Menü

Blogunuz için bir menü ararken internette birçok farklı seçenekle karşılaşırsınız. Genelde bu menüler hız ve kalite açısından ikiye ayrılır. Kalite yönünden iyi olanlar sitenizi yavaşlatır. Hız yönünden iyi olanlarda ise görsellik zayıftır.

Bir menünün kaliteli görünmesi ve gözü yormaması için hoş grafikler javascript komutlarıyla desteklenir. Eğer işin uzmanıysanız bu durumun sitenizi yavaşlatmasına engel olabilirsiniz. Eğer amatörseniz aşağıdaki menü işinizi görecektir. Tek parça javascript kullanılmadan oluşturulmuş basit bir css dropdown menü.

CSS Dropdown Menü HTML kodu

Bu kodu menünün sitemizde nerede görünmesini istiyorsak oraya koymamız gerekiyor.

<ul class='dd_menu'>
<li><a href='#nogo'>Gender</a>
<ul>
<li><a href='#nogo1'>Male</a></li>
<li><a href='#nogo2'>Female</a></li>
</ul>
</li>
<li><a href='#nogo3'>Hair</a>
<ul>
<li><a href='#nogo4'>Blond</a></li>
<li><a href='#nogo5'>Brown</a></li>
<li><a href='#nogo6'>Black</a></li>
<li><a href='#nogo7'>Red</a></li>
</ul>
</li>
<li><a href='#nogo8'>Eyes</a>
<ul>
<li><a href='#nogo9'>Blue</a></li>
<li><a href='#nogo10'>Green</a></li>
<li><a href='#nogo11'>Brown</a></li>
<li><a href='#nogo12'>Grey</a></li>
</ul>
</li>
</ul>

CSS Dropdown Menü CSS kodu

Bu kısımdaki kodları ise sitemizin style dosyasına atacağız yada <style type="text/css">…</style> kodları arasında kullanıp temamızda herhangi bir yere yerleştireceğiz.

.dd_menu {background:green; padding:0px; margin:0; list-style-type:none; height:30px;}
.dd_menu li {float:left; height:30px; border-right: solid 1px white;}
.dd_menu li a {padding:9px 20px; display:block; color:#fff; text-decoration:none; font:12px arial, verdana, sans-serif; font-weight: bold;}
.dd_menu li:hover a {text-decoration:underline;}

.dd_menu ul {position:absolute; left:-9999px; top:-9999px; list-style-type:none;}
.dd_menu li:hover {position:relative; background:red;}
.dd_menu li:hover ul {left:0px; top:30px; background:lavender; padding:3px; border:1px solid grey; width:160px;}
.dd_menu li:hover ul li {height:18px; border:none;}
.dd_menu li:hover ul li a {height:18px; padding:0px; display:block; font-size:11px; width:158px; line-height:18px; text-indent:5px; color:#444; background-color:lavender; text-decoration:none; border:1px solid transparent;}
.dd_menu li:hover ul li a:hover {height:18px; background:silver; color:#000; border:solid 1px #444;}

Sonuç

Sonuç olarak aşağıdaki gibi bir menü karşımıza çıkıyor. Bunu düzenlemek için css kodları üzerinde oynamalar yapabiliriz.

Rate this post
Furkan Özden

Blog dünyası ile 2009 yılında tanıştım. Bloğumda haftada en az bir yazı yayımlıyorum. Yazdığım yazıları beğendiyseniz beni Twitter'dan (@frknzdn) takip edebilirsiniz. Daha fazlası için hakkımda sayfasını ziyaret edin.

Paylaş
Yazar
Furkan Özden
Etiketler: CSS

Son Gönderiler

Düğün Elbisesi

Günümüz tasarımı yapılan düğün elbisesi modelleri göz alıcı görsellikle desteklenmektedir. Burada düğün elbiselerinin kendi tarzınızı…

3 gün önce

Eşofman Takımı Modellerinde Göz Alıcı Modeller

Eşofman takımı hemen hemen her kişinin mutlaka bir kaç takımı olduğu bir giysi türüdür. Eşofman takımı hem…

6 gün önce

Evren Sungur Sanat Eserleri Nerede Bulunur?

Evren Sungur hem sanat alanında gelişmiş olan hem de kendini son zamanlarda oldukça fazla gösteren…

1 hafta önce

WordPress Sayfaları ve Gönderiler Arasındaki Fark Nedir?

Bir WordPress sitesini ilk kez başlatmak çok zor görünebilir. Örneğin, WordPress'e yeni başlayanların çoğu, bir…

2 hafta önce

RaceRoom Racing Experience Dereceli Şampiyonalar Başlıyor

Eski adıyla SinBin Studioları tarafından geliştirilen RaceRoom Racing Experience yarış simülasyonu büyük bir güncellemeye daha…

3 hafta önce

Traktör Kuyruk Mili İle Çalışan Su Pompası Fiyatları

Kendisine has çalışma stili ile birlikte ortalama 40 metre  gelinlikten emiş yeteneğine sahip olan traktör…

1 ay önce