|
|
||
Css İle Yatay Menü Yapımı 2 |
||
 Evet ilk yatay menüm forumtema.com da kullandığım menü idi ondan sonra bir menü daha yapmak geldi içimden bu ilkinden biraz farklı ve yapmışken 5 tane de renk olsun istedim ve içine 5 tanede renk koydum belki kullanan olur yada örnek alıp bişeyler yapan menü yapımına geçelim isterseniz. İlk olarak herzamanki gibi html kodlarımız ile başlayalım <div id="gri"> <ul> <li><a href="#" class="aktif">Ana Sayfa</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Bilgi</a></li> <li><a href="#">İletişim</a></li> <li><a href="#">Hakkında</a></li> </ul> </div> Yukarıda bir layer içerisine sıralı liste oluşturduk ve linklerimizi ekledik linklerimize birtane "class" var ismi aktif layerimizin adı da gri olsun ben renk renk yaptığım için renk ismi verdim css kodlarımızı yazmaya başlayalım #gri ul { margin:0; padding:0; list-style-type:none; width:100%; background:transparent url(img/menu_gri.png) top left repeat-x; font-family:Verdana,Arial,sans-serif; font-weight:bold; font-size: 12px; border: 1px solid gray; height:30px!important; height:32px; /*İE6 için*/ overflow:hidden; } UL elementimizden başladık boşlukları sıfırladık listemizinde simge göstermedik 100% genişlik verdik bir arka palan resmi verdik font özellikleri verdik 1 piksellik border uyguladık yükseklik verdik İE6 için ayrı bir yükseklik verdik ve taşmaları gizledik devam edelim #gri ul li{ display:block; float:left; border-right: 1px solid gray; } LI elementimize blok görünümü verdik sola yasladık ve sadece sağ kısıma 1 piksellik border uyguladık devam edelim #gri ul li a{ color:#333; display:block; float:left; text-decoration:none; padding:8px 20px 0 20px; height:30px; } A elementine renk verip blok görünümü verdik sola yasladık linklerimiz deki yazılara çizgi koymasını istemedik ve üstten 8, sağdan ve soldan 20 piksel yazılarımzı ittik son olarak yükseklik verdik devam edelim #gri ul li a:hover { color:#000; background: url(img/menu_gri.png) center -60px no-repeat; } Yukarıda A elementimizin üstüne gelince alıcağı rengi ve arka plan resmini verdik resime göre pozisyon uyguladık devam edelim #gri ul li a:active, .menu #gri ul li a.aktif { color:#fff; background: url(img/menu_gri.png) center -30px no-repeat; } Yularıda linke tıklanınca ve en başta bizim atadığımız aktif etiketine renk verdik ve arka plan resmi verdik. Bu son işlemimizdi. bu sefer... adım adım resim ekleyemedim kusura bakmayın onun yerine 5 renk ekledim bi şekilde telafisi olmuştur sanırım hoşcakalın... Örnek - Ön İzleme Menüleri alttaki bağlantıdan indirebilirsiniz |
||
 |
||||
25 Temmuz 2010 07:57 32bugrahan demiş ki: Kardeş bu süper de birde drop down açılır yatay menülerin yapımınıda paylaşırmısın.Anlatımın için teşekkür ederim.  |
||||
 |
||||
24 Haziran 2010 18:34 31blackinci demiş ki: <li><a href="#" class="aktif">Ana Sayfa</a></li> fark etmez Kalın ile belirttiğim yerdeki tanımlı aktif kısmını sayfa ismi ile aynı kısmındaki kod ile değiştirmeniz yeterli olur |
||||
 |
||||
23 Haziran 2010 16:03 30Murat demiş ki: merhaba Forum Kismindaki Derken Bi de Ben Forum Da Değil Normal Kendi Yaptiğim Wep Sitesinde Yapmak İstiyorum Ama Halen Beceremedim... |
||||
|
||||
21 Haziran 2010 16:52 28blackinci demiş ki: Murat, <li><a href="#" class="aktif">Ana Sayfa</a></li> Kalın ile belirttiğim yerdeki tanımlı aktif kısmını forum kısmındaki kod ile değiştirmeniz gerekiyor |
||||
|
||||
21 Haziran 2010 10:03 27Murat demiş ki: Merhaba Çok Güzel Ama Benim Burda Bir Sorum Olcak Baya Kariştirdim Ama Bulamadim Sorum : Kirmizi veya gir de anasayfasini aktif durumda ben Forumma Tikladiğim zaman Aktif Durum forumma Geçmiyor bunu nasıl yapabiliriz. Yardimlariniz İçin Şimdiden Teşekkur Ederim... |
||||
|
||||
22 May 2010 20:59 26Mustafa Bozkurt demiş ki: Çok Güzel Teşekkür ederiz |
||||
|
||||
20 Aralık 2009 09:37 25Turk Sword demiş ki: Tebrik ederim cok güzel bir siten var, css de suan sana yazdıgım gibi, veya da ha basit bi yorum menüsü hazırlamak istiyorum, sitende yokmuş ama sağlık olsun. |
||||
|
||||
14 Kasım 2009 08:13 24Erdal ATAŞ demiş ki: çok güzel Tebril ederim Başarıların devamınıda ... |
||||
|
||||
28 Eylül 2009 23:12 23ßy JetMehmet demiş ki: Valla O Seçicilerin nasıl yapılacağına bi bilgim yok.. örnek verirmisin misal nasıl birşey neyi eksik... Birde yeni yaptığım sitem hakında kısa bi yorumunu alabilirmiyim ? |
||||
| Son Yapılan 10 Yorum | ||
|
||
|
Yukarı
İletişim
RSS Takip
İstatistikler
Site İçeriği
Copyright © 2007 - 2010 DLE Blackinci Edition Seri 2 |