HTML5-CSS İle Hover Özelliği Olan Basit Bir Menü Yapımı
Bugün sitemize nasıl üzerine gelince yazı rengi değişen bir menü yapılacağını göstereceğim.
En temel işlerimizden biri olan “style.css” dosyamızı html dosyaları arasına eklememiz olacaktır.Meta tagından sonraki kodu yazarak eklemiş oluyoruz.Aşağıdaki resme bakarak bunu kolaylıkla yapabilirsiniz.
(Style.css ile yazmak yerine html kodları arasına da yazabilirsiniz bu kodları.Fakat bu örneğimizde “style.css” üzerinden ilerleyeceğiz.)
Style.css’mize gelerek “body”mizi ayarlamamız gerek.Aşağıda ki resimde nasıl yapılacağı gözükmektedir.
Şimdi ise nav’ımızın büyüklüğünü,genişliğini,rengini ve tam olarak nerede olacağını ayarlıyoruz.Resimde daha detaylı bir şekilde anlatım vardır.Resme aşağıdan ulaşabilirsiniz.
Şimdi yazılarımızı yazmamız gerek. HTML kodları arasında yazımızı bu şekilde yazıyoruz:
Yazıları yazdıktan sonra,yazdığımız yazıların başında ki daireleri kaldırmamız ve aralarında ki boşlukları kaldırmamız lazım.Aşağıda ki resimde bunu görebilirsiniz.
NOT: “nav” ın içerisinde ki “ul” yi seçmemizin sebebi sadece onu düzeltmemiz için!
Ufak ayarları yaptıktan sonra yazdığımız yazıları yan yana getirmemiz lazım.Bunun için aşağıdaki resime bakabilirsiniz.
NOT:”nav” ın içerisinde ki “ul” nin içerisinde ki “li” yi seçmemizin sebebi sadece onu düzeltmemiz için!
Tamamen görsel ayarlamalar yapmak için aşağıda ki kodlara bakabilirsiniz.
NOT:”nav” ın içerisinde ki “ul” nin içerisinde ki “li” nin içerisinde ki “a”yı seçmemizin sebebi sadece onu düzeltmemiz için!
Şimdi ise tamamen isteğe bağlı olan yerdeyiz.Üzerine gelince yazı rengimizin değişmesini sağlayacağız.Aşağıdaki
resime bakarak bunu rahatlıkla yapabilirsiniz.