Bir Okuyucumdan: CSS Dropdown Menü

Blog Hocam 22 Şubat’ta 2 yılını dolduracak. Bu süreçte en büyük başarım Blog Hocam’ın etrafında oluşturduğum topluluk oldu sanırım. Yüzünü görmediğim, sesini duymadığım bir çok blog yazarıyla güzel bir bağ kurdum. Ben onlara yardımcı oldum onlar da bana.

 

Bu arkadaşlarımda biri de Halil Alperen Çeşme. Kendisi Facebook’tan bana ulaşmış ve zaman zaman yardım istemişti. Geçtiğimiz günlerde gönderdiği mesajda bu kez kendisi bana destek olmak istediğini belirtti. Blogunda kullandığı ve hiç bir script içermeyen, sadece CSS ile kodlanmış açılır menüsünü Blog Hocam okuyucularıyla paylaşmak istediğini söyledi. Ben de onun vasıtasıyla CSS dropdown menünün kodlarını sizinle paylaşmak istedim.

 

CSS Dropdown Menu

 

 

Öncelikle menün stil kodlarını ekleyelim. Blogger kumanda panelinize girip  Şablon > HTML’yi Düzenle dedikten sonra Ctrl+F tuş kombinasyonu yardımıyla kolayca bulabileceğiniz ]]></b:skin> kodunun üstüne şu kodları ekleyin.

 

#hb-menu, #hb-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#hb-menu {
width: 900px;
margin: auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#hb-menu:before,
#hb-menu:after {
content: "";
display: table;
}
#hb-menu:after {
clear: both;
}
#hb-menu {
zoom:1;
}
#hb-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#hb-menu a {
float: left;
padding: 12px 15px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#hb-menu li:hover > a {
color: #fafafa;
}
*html #hb-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#hb-menu ul {
margin: 15px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#hb-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#hb-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#hb-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#hb-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#hb-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#hb-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#hb-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#hb-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#hb-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#hb-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#hb-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#hb-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

 

Sıra menünün HTML kodlarını eklemeye geldi. Eğer Blogger’ın kendi temalarından birini kullanıyorsaız HTML kodlarını  <div class='tabs-outer'> kodnun hemen üstüne ekleyin. Eğer özel bir Blogger teması kullanıyorsanız HTML kodlarını <div id='content-wrapper'>  kodunun hemen altına ekleyin.

 

<ul id='hb-menu'>
<li><a href='http://www.bozyazililar.com/'>Ana Sayfa</a></li>
<li>
<a href='http://www.bozyazililar.com/search/label/Haber'>Haberler</a>
<ul>
<li><a href='http://www.bozyazililar.com/search/label/Bozyaz%C4%B1%20Haber'>Bozyazı&#39;dan Haberler</a></li>
<li><a href='http://www.bozyazililar.com/search/label/Anamur%20Haber'>Anamur&#39;dan Haberler</a></li>
<li><a href='http://www.bozyazililar.com/search/label/Tekeli%20Haber'>Tekeli&#39;den Haberler</a></li>
</ul>
</li>
<li><a href='http://www.bozyazililar.com/search/label/K%C3%B6%C5%9Fe%20Yaz%C4%B1s%C4%B1'>Köşe Yazıları</a>
<ul>
<li><a href='http://www.bozyazililar.com/search/label/Halil%20Alperen%20%C3%87e%C5%9Fme'>Halil Alperen Çeşme</a></li>
<li><a href='http://www.bozyazililar.com/search/label/Ramazan%20Enez'>Ramazan Enez</a></li>
<li><a href='http://www.bozyazililar.com/search/label/Recep%20Kurtkaya'>Recep Kurtkaya</a></li>
<li><a href='http://www.bozyazililar.com/search/label/Serkan%20I%C5%9F%C4%B1l'>Serkan Işıl</a></li>
</ul>
</li>
<li><a href='http://www.bozyazililar.com/2012/11/bozyaz-hava-durumu.html'>Hava Durumu</a>
</li>
<li><a href='http://www.bozyazililar.com/2012/10/bozyazililarcom-iletisim.html'>İLETİŞİM</a>
</li>
</ul>

 

!!! Menünün boyu uzun veya kısa gelirse stil kodlarındaki width: 900px; değerini değiştirerek temanıza uygun hale getirebilirsiniz.

 

Halil Alperen Çeşme arkadaşımıza bir kez daha teşekkür ederim.