Cami Halısı Avrupada Lider Firma Gülseven Halı

Arçelik Güvenilir Servis Hizmetleri

Arçelik Buzdolabı Servisi

WordPress Eklentiye ait Klasör Dizin Adresi Öğrenebileceğiniz Kodlar

HTML ve CSS ile Dropdown Buton Yapımı

Hazır Site Bileşenleri 30 Aralık 2016
238 Görüntülenme

Merhaba arkadaşlar HTML ve CSS ile mouse’nizi butonun üzerine getirince bir liste açılmasını istiyorsanız bunu aşağıda sizler ile paylaşacağımız kodlar yardımı ile yapabilirsiniz. Uzun ve karmaşık bir menü veya ara yüz tasarımından kurtulabilirsiniz.

HTML Kodlarımız
<div class="dropdown">
  <button class="dropbtn">Açılır Button</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
CSS Kodlarımız
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

 

Yorumlar

Henüz hiç yorum yapılmamış.

İlginizi Çekebilir
CSS only Müzik Player Elementi

CSS only Müzik Player Elementi

17 Ocak 2017
128 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

17 Ocak 2017
117 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

17 Ocak 2017
118 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

17 Ocak 2017
117 Görüntülenme
Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

Mause Üzerine Gelince Ipucu ( Tooltip ) Sistemi Yapımı

24 Aralık 2016
272 Görüntülenme
JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

JavaScript İlerleme Çubuğu ( Progress Bar ) Yapımı

18 Aralık 2016
407 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

16 Aralık 2016
339 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

11 Aralık 2016
375 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

10 Aralık 2016
386 Görüntülenme
Resimleri Popup Pencerede Gösterme

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
308 Görüntülenme
Bunlar da var!
Unutulan Çantayı Açanlar Pişman Oldu

Unutulan Çantayı Açanlar Pişman Oldu

18 Mart 2016
114 Görüntülenme
Güvenli Alış Veriş için Astropay Kart Satın Al

Güvenli Alış Veriş için Astropay Kart Satın Al

29 Aralık 2015
2.484 Görüntülenme
Güvenli İş Takip Sistemi Scripti

Güvenli İş Takip Sistemi Scripti

18 Şubat 2015
940 Görüntülenme
Telefonun Karıncalar Üzerindeki Etkisi

Telefonun Karıncalar Üzerindeki Etkisi

5 Eylül 2015
85 Görüntülenme
Kendi Adını Yazabilen Köpek [Video]

Kendi Adını Yazabilen Köpek [Video]

28 Aralık 2015
146 Görüntülenme
Hızlı tren Maglev dünya hız rekoru kırdı

Hızlı tren Maglev dünya hız rekoru kırdı

21 Nisan 2015
83 Görüntülenme