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

(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.

Body

Ş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.

nav

Şimdi yazılarımızı yazmamız gerek. HTML kodları arasında yazımızı bu şekilde yazıyoruz:

Body
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.

nav ul

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.

nav ul li

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.

nav ul li a

 

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.

nav ul li a

Yazar: Fish

sitemizde 1 yazı eklemiş...

Share