Css ile Menü Yapmak

Merhaba arkadaşlar, bugün sizlere css ile nasıl menü yapılır onu kısaca anlatmak istiyorum.

*İlk olarak html kısmımızı body tagları arasına ekliyoruz.


*ikinci olarak css kodlarımızı style tagları arasına ekliyoruz yada genel bir css dosyası oluşturduysak onun içerisine de ekleyebiliriz.

* Yatay menü yapmak istersek css kodlarımız;

#menu {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#menu li {
	float: left;
	width: 150px;
	position: relative;
}
#menu a {
	font-family: Arial;
	font-size: 15px;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #314c5f;
	display: block;
	padding-top: 5px;
	padding-right: 5px;
	border: 1px solid #9fb2bc;
	text-align: center;
	line-height: 30px;
	margin-right: 2px;
	
}
#menu a:hover {
	background-color: #fff;
	color:#000;
}

* Dikey menü yapmak istersek css kodlarımız;

#menu {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#menu li {
	width: 150px;
}
#menu a {
	font-family: Arial;
	font-size: 15px;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #314c5f;
	display: block;
	padding-top: 5px;
	padding-right: 5px;
	border: 1px solid #9fb2bc;
	text-align: center;
	line-height: 30px;
	margin-right: 2px;
	width:100%;
	
        float: left;
}
#menu a:hover {
	background-color: #fff;
	color:#000;
}

Bir başka makalede görüşmek dileğiyle…

Sedat Demirdoğan

PaylaşShare on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on Tumblr0Share on LinkedIn0Email this to someone

Yazar Hakkında Yazarın Bütün Yazıları Yazarın Web Sitesi

sedat demirdoğan

yazilimsinifi.com ve edebiyatsinifi.com Kurucusu, Jollytur Yazılım Geliştirme Ekip Lideri, Kick Boks tutkunu, Gitarist ve Girişimci.

7 YorumYorum Yazmak İçin

  • Merhaba @tamer, float seçeneğine göre margin-left ve margin-right veya left ve right css terimlerini kullanarak ortalayabilirsin.

  • Merhaba, css’ yi yeni öğrenmekte olan biriyim, bir çok siteden bilgi ediniyorum. Fakat henüz böyle kolay ve düzgün kod paylaşan site görmedim..
    Yeni başlayan arkadaşlar için ısrarla takip edin derim.
    Her kim eklediyse bu yazıyı, kod yapısı gerçekten süper 🙂

  • Merhaba acaba bu kodların yani menü nasıl görünüyor ? Bunu denemeden göremezmiyiz ?

Bir Cevap Yazın

Your email address will not be published. Required fields are marked *

*