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]
kardesim yatay olarak ekledim fakat sol tarafa yapıştı kaldı ortalayamadım bir türlü
Merhaba @tamer, float seçeneğine göre margin-left ve margin-right veya left ve right css terimlerini kullanarak ortalayabilirsin.
Süpersin be dostum günlerdir arıyorum.
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 ?
ABi bu hover oluncamı yoksa kliklimi (Cevap gelirse SEVİNİRİM).
Hover işlemleri css üzerinde yapılmıştır. Dilediğiniz gibi revize edebilirsiniz.
center yaptığımda alt alta sırlanıyor yan yana nasıl yapabilirim?