CSS ile Yatay ve Dikey Menüler Yapmak

[yagmayok]

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.

<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.

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.

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.

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.

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.

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.

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.

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]

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.

<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.

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.

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:

ul.menu a {
    display: block;
}

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

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.

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.

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.

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.

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]

teşekkürler yagmayok güzel bilgi.

[yagmayok]

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

[...::LorD::...]

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

[osahin]

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]

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]

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]

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

[yagmayok]

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

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