Featherlight Web Site Tasarımı

SimplePicture Web Site Tasarımı

Extended Web Site Tasarımı

Faulkner Web Site Tasarımı

HTML ve CSS ile Dropdown Buton Yapımı

Hazır Site Bileşenleri Cuma Aralık 30th, 2016
468 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

Salı Ocak 17th, 2017
1.658 Görüntülenme
Müzik Player | Audio Player

Müzik Player | Audio Player

Salı Ocak 17th, 2017
664 Görüntülenme
Vimeo Player API Demo

Vimeo Player API Demo

Salı Ocak 17th, 2017
1.394 Görüntülenme
Yuvarlak Müzik Player

Yuvarlak Müzik Player

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

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

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

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

Pazar Aralık 18th, 2016
614 Görüntülenme
Filtreli Arama Tablo Yapımı

Filtreli Arama Tablo Yapımı

Cuma Aralık 16th, 2016
568 Görüntülenme
Filtreli Arama Sistemi Yapımı

Filtreli Arama Sistemi Yapımı

Pazar Aralık 11th, 2016
587 Görüntülenme
Popup Resim Galeri Modülü Yapımı

Popup Resim Galeri Modülü Yapımı

Cumartesi Aralık 10th, 2016
657 Görüntülenme
Resimleri Popup Pencerede Gösterme

Resimleri Popup Pencerede Gösterme

Cuma Aralık 9th, 2016
531 Görüntülenme
Bunlar da var!
FBI, iPhone 5C’yi kırmak için 1,3 milyon dolardan fazla para ödemiş

FBI, iPhone 5C’yi kırmak için 1,3 milyon dolardan fazla para ödemiş

Pazartesi Nisan 25th, 2016
250 Görüntülenme
Charitable Organization Web Site Tasarımı

Charitable Organization Web Site Tasarımı

Pazartesi Nisan 3rd, 2017
71 Görüntülenme
Kamerasını Üstünde Taşıyabilen Drone

Kamerasını Üstünde Taşıyabilen Drone

Perşembe Nisan 16th, 2015
201 Görüntülenme
Philips, OLED TV pazarına giriyor

Philips, OLED TV pazarına giriyor

Cumartesi Şubat 20th, 2016
254 Görüntülenme