CSS İle Horizontal Submenu Yapımı
(Bu yazı 2 oy aldı. Ortalama Değeri: 5,00 oy dan 5) 
Horizontal olarak, menünün üstüne gelindiğinde rengi değişen ya da bir efekt olayı yaşatan menüleri bilirsiniz. CSS ile hazırlanmış tonlarca ücretsiz ya da lisanslı menü bulunuyor. Birde horizontal menu hazırladıktan sonra bu menünün altında yeni bir menü açılmasını isteyebilirsiniz. Örnek olması açısından bu yazının hemen solundaki resime bakabilirsiniz.
Bu menü şu şekilde çalışıyor. Resimden yola çıkalım. Firma Profili menüsünün üstüne gelindiğinde hemen altındaki Tarihçe | Ekibimiz | Ne İş Yaparız? menüsü açılıyor. Aşağıda menü ile ilgili bütün kodları bulabilirsiniz.
Bilgisayarınızın masaüstünde menu adında bir klasör oluşturun. Aşağdaki kodlarıda style.css adı ile menu klasörünün içerisinde kaydedin.
[css]
ul#topnav {
margin: 0; padding: 0;
float: left;
width: 970px;
list-style: none;
position: relative; /*–Set relative positioning on the unordered list itself – not on the list item–*/
font-size: 11px;
font-family: Tahoma;
background: url(images/topnav_stretch.gif) repeat-x;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #646464; /*–Divider for each parent level links–*/
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(images/topnav_active.gif) repeat-x; }
/*–Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav–*/
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0px; top: auto;
display: none; /*–Hide by default–*/
width: 970px;
background: #1376c9;
color: #fff;
/*–Bottom right rounded corner–*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
/*–Bottom left rounded corner–*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } /*–Show subnav on hover–*/
ul#topnav li span a { display: inline; } /*–Since we declared a link style on the parent list link, we will correct it back to its original state–*/
ul#topnav li span a:hover {text-decoration: underline;}
[/css]
Aşağıdaki kodları ise index.html adı ile kaydedin.
[html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
<title>CSS İle Horizantal SubMenu</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<ul id=”topnav”>
<li><a href=”#”>Anasayfa</a></li>
<li>
<a href=”#”>Firma Profili</a>
<!–Subnav Starts Here–>
<span>
<a href=”#”>Tarihçe</a> |
<a href=”#”>Ekibimiz</a> |
<a href=”#”>Ne İş Yaparız?</a>
</span>
<!–Subnav Ends Here–>
</li>
<li>
<a href=”#”>Hizmetlerimiz</a>
<span>
<a href=”#”>Hizmet Adı 1</a> |
<a href=”#”>Hizmet Adı 2</a> |
<a href=”#”>Hizmet Adı 3</a> |
<a href=”#”>Hizmet Adı 4</a> |
<a href=”#”>Hizmet Adı 5</a>
</span>
</li>
<li><a href=”#”>Referanslarımız</a></li>
<li><a href=”#”>Çalışma Şeklimiz </a></li>
<li>
<a href=”#”>Bize Ulaşın</a>
<span>
<a href=”#”>Adres/Telefon</a> |
<a href=”#”>İletişim Formu</a> |
<a href=”#”>Kroki</a>
</span>
</li>
</ul>
</body>
</html>
[/html]
Html ve CSS dosyalarımızı oluşturduk. Menü içerisinde iki adet ufak resim kullanılıyor. Bu resimleri buraya tıklayarak indirebilirsiniz. İndirdiğini klasörün adı images‘dır. Bu klasörüde direkt olarak menu klasörünün içerisine, index ve css dosyalarının olduğu yere kopyalayın.
Çalışmanın orjinal ve ingilizce anlatım yeri burası. Burada jQuery’de kulanılmış ancak ben kodlar arasında jQuer kodlarını kaldırdım. Tamamen CSS ile çalışıyor menü. Siz benim düzenlediğim çalışmayı beğenmez iseniz kendi merkezindeki kodları kullanabilirsiniz. Yukarıdaki kodlar ile oluşturulmuş çalışmanın önizlemesine buradan bakabilirsiniz. Aynı zamanda buradan da bütün dosyaları indirebilirsiniz.
Güncelleme: Yukarıdaki yazıyı yayınladıktan sonra bana Soh Tanaka bir e-mail gönderdi. Malum, bu yazının asıl mimarı o. Gönderdiği e-mailde “blogumdan herhangi bir yazıyı yayınlamak istersen bazı kurallarım var onlara uyman gerekli” diyor. Bende haklı olduğunu düşüdüğüm için onun kurallarına göre bu yazıda ufak bir değişiklik yapıyorum. Yazıda bulunan bütün download linklerini kaldırdım. Çalışmanın önizlemesi içinde Soh Tanaka’nın demo sayfasını inceleyebilirsiniz. Yazı Soh Tanaka‘ya aittir. Yazının orjinal adresi ise burası.
106 views
RenkliTeneke.Com blogundaki yeni yazılardan haberdar olmak için RSS Abonesi olabilirsiniz. İsterseniz Twitter'dan ya da FriendFeed'den takip edebilirsiniz. Ya da "Yeni yazılar e-mail adresime gelsin" diyorsanız e-mail abonesi olabilirsiniz.
Merhaba sevgili ziyaretçi. Şuanda renkliteneke.com bloguna " Ahmet" tarafından " 15 Temmuz 2009" tarihinde yazılmış olan "CSS İle Horizontal Submenu Yapımı" başlıklı bu yazıyı okuyorsun. Bu yazının başka bir yerde yayınlaması yasaktır. Her yazı ayrı bir özen içerisinde hazırlanıyor ve bu emeğin iki tık ile heba edilmesi pek hoşuma gitmez. Bu açıklama ise bilgilenmeniz için yazılmıştır.
Örnek çok kaba olmuş :-)
alta açılan mavi kaba yazı zarif kalmış:-)
paylaşım için teşekkürler
valla ben lacivert tonlarını severim ondan benim gözüme hoş göründü heralde:) güzel paylaşım kardeş teşekkürler…
Paylaşım süper Emeği geçen herkeze teşekkürler…
ORadada download linkini bulamadım :)
nurettin; download linkini kaldırdım. yazının sonundaki güncelleme notunu okursan anlayabilirsin.
aradığım şey buydu sağolasın kardeş
Kardeş ben acemiyim bunun çalışr halini
mail ile alabilirmiyim.
Teşekkürler.
meraba. son tahako jquery karıştırmış kötü olmuş varsa sen elindekinden bir kopya yolla banada zahmet olmazsa güzele benziyor
Yukarıdaki yazı hakkında kendi düşüncelerinizi yazın!
Lütfen yukarıdaki yazı hakkında düşüncelerini paylaş. Senin düşündüklerin bazen bu blogdaki yeni yayınlanacak yazının hangi konuda yazı yazılması gerektiğini belirliyor.kitapyurdu
En Çok Okunan Yazılar
Kategoriler
Meta
Takipçi Sayısı
Arşivler
Bağlantılar
Etiketler
Son Yorumlar
en çok yorumlananlar
en çok okunanlar