Blackinci » CSS » Css İle Yatay Menü Yapımı 2

(Oy Verenler: 42)

Css İle Yatay Menü Yapımı 2

1667 Kere Okunmuş

CSS blackinci 18 May 2008 Haberi Yazdır

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
menuler.rar [13.33 Kb] (İndirme: 188)

Bu Konuda 13 Yorum Yapılmış
Bu Konuda 13 Yorum Yapılmış

	Baybars	18 May 2008 11:56 Alıntı Yap #1
Eline sağlık Davut abi. Gerçekten çok hoş.

	Oğuz	19 May 2008 10:15 Alıntı Yap #2
Çok Güzel Anlatım Olmuş.. Teşekkürler Eline Sağlık

	Mehmet	20 May 2008 00:48 Alıntı Yap #3
Black inci caLısmaLarini Dikkatle izliyorum .. Gercektende cok yararli bilgiler paylasiyorsun.. bu yatay menude bi harika BASARILARININ DEWAMINI DİLERİM:.....

	ByResul	20 May 2008 12:39 Alıntı Yap #4
Gerçektende Profesyonel Menüler

	ßaHaDıR28	21 May 2008 11:08 Alıntı Yap #5
Çok güzel çalışma saol Davut abi.

	musti	27 May 2008 11:12 Alıntı Yap #6
Çok Süper Olmuş Sağol

	NoktaBilisim	29 May 2008 19:38 Alıntı Yap #7
Menüler Bi Harika Olmuş. Ellerine Sağlık... Sayende bizde Bilgilerimize Bilgi Katıyoruz

	cellulari (AgesKoch)	30 May 2008 20:11 Alıntı Yap #8
çok sağol sayende css'den birkaç şey kapıyoruz

	ReplaX	31 May 2008 11:40 Alıntı Yap #9
çok güzel menüler www.bizimlepaylas.net siteme uyguladım yeşil olanı

	djan	16 Temmuz 2008 11:10 Alıntı Yap #10
Siteni çok beğendim bu butonlar çok işime yarayacak teşekkürler forum sitesi açsanız çok iyi olur....

	blackinci	16 Temmuz 2008 23:05 Alıntı Yap #11
forum konusunda kararsızım ama açtığım ankete bakılırsa bir forum olması gerekiyor bilemiyorum