Ders 8: CSS İle Sitemize Basit Bir Menübar Eklemek

CSS Dersleri
Evet arkadaşlar hatırlarsanız bir önceki derste sitemizin banner kısmını yapmıştık. Şimdi size sitemize bir menubar tasarlamanın ne kadar kolay olduğunu adım adım göstereceğim. Daha önce kodlarımızı 7.ci derste bulabilirsiniz.Şimdi burada banner class ‘ını kapattığımız yerde bir satır aşağıya inip menubar classımızı oluşturalım ve içerisine linklerimizi yazalım;——————————————————————————————

<body> (BODY tagını açıyoruz)

<div align=”center”> (siteyi ortalayan divi açıyoruz)

<div class=”banner”> BURAYA BANNER RESMİNİ EKLEYEBİLİRSİNİZ</div> (banner divimizi açıyor, class ını atıyor ve içeriği girip kapatıyoruz)

<div class=”menubar”>

<a href=”index.php”>ANASAYFA</a> |
<a href=”galeri.php”>GALERİ</a> |
<a href=”iletisim.php”>İLETİŞİM</a>

</div> (MENUBARIMIZI OLUŞTURUP İÇERİSİNE LİNKLERİMİZİ YAZDIK VE DİVİMİZİ KAPADIK)

</div> (siteyi ortalayan divi kapatıyoruz)

</body> (Body tagını kapatıyoruz)

——————————————————————————————–

Bu şekilde html kodlarımızı hazırlamış olduk. Burada belirlediğimiz menubar classı ve içerisindeki linkleri düzenlemek için CSS dosyamızı açıyoruz. İlk derslerde harici CSS dosyamızı nasıl import edeceğimizi yazmıştım hatırlamıyorsanız kafanızın karışmaması açısından lütfen dersleri tekrar okuyunuz.

CSS dosyamızı açıyoruz ve menubar classımızı tanımlıyoruz. Örneğin;

arka planı mor renkte , 1000 px genişliğinde her kenarından 10ar piksel padding yani iç boşluk içeren, ve içerisine gelecek yazılar sola dayalı

bir menubar oluşturalım.

KODLARIMIZ ŞU ŞEKİLDE OLMALIDIR.

.menubar {

width:1000px;
padding:10px;
background-color:purple;
text-align:left;

}

PEKİ ŞİMDİ DE MENUBARIN İÇERİSİNE KOYDUĞUMUZ LİNKLERİN BEYAZ ALTI ÇİZGİSİZ OLMASINI VE ÜZERİNE MOUSE GELDİĞİNDE ALTINDA BİR ÇİZGİ BELİRİP RENGİNİN ALTIN SARISINA DÖNÜŞMESİNİ PLANLAYALIM VE CSS DOSYAMIZA YAZALIM:

BURASI LİNKİN MOUSE ÜZERİNDE DEĞİLKENKİ STİLLERİNİ TANIMLAMAKTA:
…………………………………………………….
.menubar a{

color:white;
text-decoration:none;

}

……………………………………………………..

BURASI LİNKİN MOUSE ÜZERİNE GELDİĞİNDEKİ STİLLERİNİ TANIMLAMAKTA:
…………………………………………………….

.menubar a:hover{

color:gold;
text-decoration:underline;

}
……………………………………………………..

 

BU DERS SİZİN İÇİN FAYDALI OLDUYSA LÜTFEN REKLAMLARA TIKLAYARAK DEVAMLILIĞINA KATKIDA BULUNUNUZ. TEŞEKKÜRLER