Eklenti için Admin Panelinde Menü ve Alt Menüler Oluşturma | Eklenti Kodlama

Eklenti Tanımlama Yazar Adı, Eklenti Adı, Versiyon Bilgisi | Eklenti Kodlama

Periscope İndirme Bağlantısı ve Uygulama Hakkında Detaylı Bilgi

Ucuza Uçmanın Keyfini Sürün

HTML ve CSS ile Dropdown Buton Yapımı

Hazır Site Bileşenleri 30 Aralık 2016
299 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
328 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

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

Vimeo Player API Demo

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

Yuvarlak Müzik Player

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

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

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

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

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

Filtreli Arama Tablo Yapımı

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

Filtreli Arama Sistemi Yapımı

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

Popup Resim Galeri Modülü Yapımı

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

Resimleri Popup Pencerede Gösterme

9 Aralık 2016
367 Görüntülenme
Bunlar da var!
Galaxy S6 Edge elle nasıl monte edilir? (Video)

Galaxy S6 Edge elle nasıl monte edilir? (Video)

9 Nisan 2015
116 Görüntülenme
Dell, Avrupadaki ilk IoT laboratuvarını açtı

Dell, Avrupadaki ilk IoT laboratuvarını açtı

4 Ağustos 2015
182 Görüntülenme
Titanfall 2 için Hazırlıklar Başladı

Titanfall 2 için Hazırlıklar Başladı

15 Ocak 2016
160 Görüntülenme
Apple iPhone SE etkinliğini canlı izleyin!

Apple iPhone SE etkinliğini canlı izleyin!

21 Mart 2016
161 Görüntülenme