CSS ile aşağı doğu açılır yatay menü nasıl yapılır?

CSS ile Web Tasarım derslerimize devam ediyoruz. Bu yazımızda CSS ile aşağıda doğru açılan yatay menü yapımını inceleyeceğiz. Önceki çalışmalarımızı inceleyerek konu hakkında bilgi sahip olabilirsiniz, böylece aşağıda yazdığımız CSS kodlarını daha rahat anlayabilirsiniz.

CSS ile Yatay Menü Yapımı - Bölüm 1
CSS ile Yatay Menü Yapımı - Bölüm 2


Şimdi gelelim yeni menümüze;

Önce .menu isimli bir CSS class'ı (sınıfı) tanımlıyoruz. Bu arada font tipi Arial, font büyüklüğü 15px olarak tanımlanıyor. 

.menu {
    position: relative;
    display: inline-block;
    font-family: Arial;
    font-size: 15px;
}

Şimdi .menubutton isimli class'ımızı tanımlayalım.

.menubuton {
    background-color: #000040;
    color: white;
    padding: 16px;
    font-size: 15px;
    border: none;
    cursor: pointer;
}

.menubutton isimli class'ımızı tanımlayarak;

zemin rengi larcivert (background-color: #000040),
yazı rengi beyaz olan (color: #FFF; )
iç boşluk(padding) değeri 16px olan,
yazı font büyüklüğü 15px,
cursor:pointer ile menü üzerine gelince fare imleci el görünümüne geçen bir div tanımlıyoruz.




Şimdi kodlarımızın tamamını inceleyelim.
 
<!DOCTYPE html>
<html>
<head>
 
<style>

.menubuton {
    background-color: #000040;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
 
.menu {
    position: relative;
    display: inline-block;
    font-family: Arial;
    font-size: 15px;
}
 
.menu-icerik {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
 
.menu-icerik a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
 
.menu-icerik a:hover {background-color: #73B9FF}
 
.menu:hover .menu-icerik {
    display: block;
}
 
.menu:hover .menubuton {
    background-color: #0059B2;
}
</style>
</head>
<body>
 
<div class="menu">
  <button class="menubuton">Menümüz</button>
  <div class="menu-icerik">
    <a href="#">Ana Sayfa</a>
    <a href="#">Hakkımda</a>
    <a href="#">İletişim</a>
  </div>
</div>

<div class="menu">
  <button class="menubuton">Ürünler</button>
  <div class="menu-icerik">
    <a href="#">Defter</a>
    <a href="#">Kalem</a>
    <a href="#">Silgi</a>
  </div>
</div>
 
 
</body>
</html>


CSS ile çalışmalarımıza devam edeceğiz.

Mutlu kodlamalar,
Oğuzhan TAŞ
Ocak, 2017
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale