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

Click to rate this post!
[Total: 1 Average: 5]

Sedat Demirdoğan

-Yazılım Sınıfı Kurucusu -Global Bilişim Derneği Kurucu Üye -Bilişim Grubu Kurucu Üye -Jolly Tur BT Proje ve İş Geliştirme Departman Müdürü

Css ile Menü Yapmak” için 8 yorum

  • 31 Ağustos 2014 tarihinde, saat 22:35
    Permalink

    kardesim yatay olarak ekledim fakat sol tarafa yapıştı kaldı ortalayamadım bir türlü

    Yanıtla
  • 08 Eylül 2014 tarihinde, saat 13:47
    Permalink

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

    Yanıtla
  • 03 Ocak 2015 tarihinde, saat 16:31
    Permalink

    Süpersin be dostum günlerdir arıyorum.

    Yanıtla
  • 19 Mart 2015 tarihinde, saat 00:25
    Permalink

    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 🙂

    Yanıtla
  • 21 Mart 2016 tarihinde, saat 03:28
    Permalink

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

    Yanıtla
  • 24 Ocak 2017 tarihinde, saat 17:44
    Permalink

    ABi bu hover oluncamı yoksa kliklimi (Cevap gelirse SEVİNİRİM).

    Yanıtla
    • 04 Şubat 2017 tarihinde, saat 20:16
      Permalink

      Hover işlemleri css üzerinde yapılmıştır. Dilediğiniz gibi revize edebilirsiniz.

      Yanıtla
  • 12 Ekim 2017 tarihinde, saat 23:30
    Permalink

    center yaptığımda alt alta sırlanıyor yan yana nasıl yapabilirim?

    Yanıtla

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.