CSS ile Yatay ve Dikey Menüler Yapmak

yagmayok · 24 Şubat 2009

Websitelerinin vazgeçilmezleri arasındadır menüler. CSS ile menü yapmak ise bir başka güzeldir. Ayrıca oldukça kolaydır.

Sonradan sitenizdeki menüyü değiştirmeniz gerektiğinde sadece style dosyasında yapacağınız değişiklikler ile de bunu kolayca yapabilirsiniz.

Bu yazımızda CSS ile yatay menüleri nasıl yapabileceğimize dair basit bir örnekvereceğiz.

Öncelikle menümüzü <ul> ve <li> içine alalım ve bakalım nasıl gözükecek.

HTML:

<ul class="menu">
	<li><a>Ana Sayfa</a></li>
	<li><a>İletişim</a></li>
	<li><a>Reklam</a></li>
</ul>

Ekran Görüntüsü:

Şimdi de görüntü kirliliği olmasın diye yazılarımızın yanında alan nokta şeklindeki işaretleri kaldıralım.

HTML:

ul.menu {
    list-style-type: none;
}

Ekran Görüntüsü:

Birçok tarayıcı da bu kodlar yorumlanırken margin ve padding değerlerini 0 olarak algılama ve boşluklar bırakır. Bunları margin:0; ve padding:0; ekleyerek sıfırlayalım.

HTML:

ul.menu {
    list-style-type: none;
    margin:0;
    padding:0;
}

Ekran Görüntüsü:

Buraya kadarki işlemler dikey ve yatay menüler için geçerlidir.

Şimdi linkleri yatay olarak listelemek için diplay:inline kodunu kullanacağız.

HTML:

ul.menu {
    list-style-type: none;
	padding:0;
	margin:0;
}
ul.menu li {
    display: inline;
}

Ekran Görüntüsü:

Şimdi de linklerin altında yer alan çizgileri text-decoration: none kodunu kullanarak sağlıyoruz.

HTML:

ul.menu {
    list-style-type: none;
	padding:0;
	margin:0;
}
ul.menu li {
    display: inline;
}
ul.menu li a {
    text-decoration: none;
}

Ekran Görüntüsü:

Görüntünün daha güzel olması için linkler arasında biraz boşluk bırakalım. Bunuda padding özelliğini kullanarak yapalım.

HTML:

ul.menu {
    list-style-type: none;
	padding:0;
	margin:0;
}
ul.menu li {
    display: inline;
}
ul.menu li a {
    text-decoration: none;
	padding:10px;
}

Ekran Görüntüsü:

Şimdi sıra renklendirmeye geldi. Background kodunu kullanarak arkaplan rengini mavi, color kodunuda kullanarak ise linklerin rengini beyaz yapıyoruz.

HTML:

ul.menu {
    list-style-type: none;
	padding:0;
	margin:0;
}
ul.menu li {
    display: inline;
}
ul.menu li a {
    text-decoration: none;
	padding:10px;
	color: #ffffff;
    background-color: #217DA5;
}

Ekran Görüntüsü:

Şimdi kutuların üzerine geldiğimiz zaman rengin değişmesini sağlayarak görsellik katıyoruz. Bunu da a:hover özelliğini kullanarak kırmızı renk olarak gerçekleştiriyoruz.

HTML:

ul.menu {
    list-style-type: none;
	padding:0;
	margin:0;
}
ul.menu li {
    display: inline;
}
ul.menu li a {
    text-decoration: none;
	padding:10px;
	color: #ffffff;
    background-color: #217DA5;
}
ul.menu li a:hover
{
background-color: #FF2421;
}

Ekran Görüntüsü:

Konuyu herkesin rahat anlayabilmsi için basit bir şekilde anlattım. İllerki anlatımlarımda daha farklı uygulamaları göstermeye çalışacağım.

Kaynak göstererek yayınlayabilirsiniz.

yagmayok · 24 Şubat 2009

CSS İle Yatay Menüler Yapmak 1 konumuzda bu tarz menülerin nasıl yapılacağına dair örnek vermiştik. Şimdi de CSS ile Dikey menüleri nasıl yapabileceğimize değineceğiz.

HTML:

<ul class="menu">
	<li><a>Ana Sayfa</a></li>
	<li><a>İletişim</a></li>
	<li><a>Reklam</a></li>
</ul>

Ekran Görüntüsü:

Şimdi de görüntü kirliliği olmasın diye yazılarımızın yanında alan nokta şeklindeki işaretleri kaldıralım.

HTML:

ul.menu {
    list-style-type: none;
}

Ekran Görüntüsü:

Birçok tarayıcı da bu kodlar yorumlanırken margin ve padding değerlerini 0 olarak algılama ve boşluklar bırakır. Bunları margin:0; ve padding:0; ekleyerek sıfırlayalım.

HTML:

ul.menu {
    list-style-type: none;
    margin:0;
    padding:0;
}

Ekran Görüntüsü:

Buraya kadarki işlemler dikey ve yatay menüler için geçerlidir.
her linke rollover özelliği kazandırmak için:

HTML:

ul.menu a {
    display: block;
}

Color ve Background özelliğini kullanarak menümüzü renklendiriyoruz.

HTML:

ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu a {
    display: block;
    color: #ffffff;
    background-color: #217DA5;
}

Ekran Görüntüsü:

Menümüz için width değerini belirtmediğimizden dolayı isteğimiz dışında uzadı. Tasarımlarımıza entegre ederken bu uzunluğu width özelliğini kullanarak istedğimiz gibi ayarlayabiliriz. Şimdi bu uzunluğu ayarlıyoruz.

HTML:

ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu a {
    display: block;
    color: #ffffff;
    background-color: #217DA5;
    width:120px;
}

Ekran Görüntüsü:

Yazılarımız çok birbirine çok bitişik olduğu için görüntümüz pek güzel olmadı. Biraz daha görsellik katmak için linkleri padding özelliği ile birbirinden biraz uzaklaştırıyoruz.

HTML:

ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu a {
    display: block;
    color: #ffffff;
    background-color: #217DA5;
	width:120px;
	padding:4px;
}

Ekran Görüntüsü:

Not: Yukarıdaki padding özelliğinin farklı şekillerde kullanarak görselliği daha farklı şekilde geliştirebilirsiniz.

Şimdi kutuların üzerine geldiğimiz zaman rengin değişmesini sağlayarak görsellik katıyoruz. Bunu da a:hover özelliğini kullanarak kırmızı renk olarak gerçekleştiriyoruz.

HTML:

ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu a {
    display: block;
    color: #ffffff;
    background-color: #217DA5;
	width:120px;
	padding:4px;
}
ul.menu li a:hover
{
background-color: #FF2421;
}

Ekran Görüntüsü:

Linklerin altındaki çizgileri text-decoration: none; ile kaldıralım ve örneğimizi sonlandıralım.

HTML:

ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu a {
    display: block;
    color: #ffffff;
    background-color: #217DA5;
	width:120px;
	padding:4px;
	text-decoration: none;
}
ul.menu li a:hover
{
background-color: #FF2421;
}

Ekran Görüntüsü:

Cagatay · 24 Şubat 2009

teşekkürler yagmayok güzel bilgi.

yagmayok · 24 Şubat 2009

Teşekkür ederim Cagatay.
Amacım sadece yeni başlayanlar veya zorlananlar için örnek teşkil edebilecek basit uygulamalar vermek.

...::LorD::... · 24 Şubat 2009

ellerine sağlık yeni başlayanlar için iyi bir başlangıç

osahin · 8 Nisan 2009

yagmayok görmemiştim yazılarını, css konusu çok önemli ne kadar çok kişi css bilirse o kadar iyi artık, teşekkürler bunlar için.

Ozcan · 8 Nisan 2009

güzel anlatım olmuş.

http://www.cssmenumaker.com/index.php burdada hazır bir kaç örnek var. açılır kapanır menüler vs.

anofen · 19 Ağustos 2009

eline sağlık hocam çok güzel bir anlatım olmuş, yavaş yavaş öğreniyorum işde yardımcı olacak böyle anlatım yapacak arkadaşlardan anlatım bekliyorum
selametle

EhoWuser · 9 Şubat 2010

Konuyu hortlatayım.

Açılır menülere de (dikey ya da yatay)örnekler ekleyecek arkadaş yok mu?

yagmayok · 9 Şubat 2010

EhoWuser bu konuda bir örnek hazırladım, ekte mevcut. İndirerek inceleyebilirsiniz.

js dosyalarıyla oynarakta düzenlemeleri (renk gibi) yapabilirsiniz.

EhoWuser · 9 Şubat 2010

yagmayok, mesaj için teşekkür ederim ama css ile menü yaparken bunun js yapılmamasından yanayım..Pure css ile yapılan menülerle ilgili örnekler arıyorum. Özcan arkadaşımızın verdiği sitede örnekler buldum fakat kodlanmaları berbattı işin açıkçası.İlgi ve bilgilendirme için tekrar teşekkür ederim.

lusek · 22 Şubat 2011

güzel anlatım için sağol,