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

[Toplam:2    Ortalama:3/5]
Avatar

Sedat Demirdoğan

-Yazılım Sınıfı Kurucusu -Bilişim Grubu Kurucu Üye -Bilişim Derneği Şişli Bölge Temsilcisi -Jollytur Yazılım Geliştirme Ekip Lideri -Kick Boks tutkunu, Gitarist ve Girişimci

Css ile Menü Yapmak” için 8 yorum

  • Avatar
    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
  • Avatar
    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
  • Avatar
    03 Ocak 2015 tarihinde, saat 16:31
    Permalink

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

    Yanıtla
  • Avatar
    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
  • Avatar
    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
  • Avatar
    24 Ocak 2017 tarihinde, saat 17:44
    Permalink

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

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

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

      Yanıtla
  • Avatar
    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. Gerekli alanlar * ile işaretlenmişlerdir

Copy Protected by Chetan's WP-Copyprotect.
%d blogcu bunu beğendi: