CSS Açılır Liste (Dropdown) - Onur KUL | Kişisel Blog

Có thể bạn quan tâm

CSS Açılır Liste (Dropdown)

Temel Açılır Liste

Bu örneğimizde, kullanıcı fareyi bir öğenin üzerine getirdiğinde görünen bir açılır kutu (alan) oluşturacağız.

Örnek: <!DOCTYPE html> <html> <head> <style> .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); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <p>Açılır içeriği açmak için fareyi aşağıdaki metnin üzerine getirin.</p> <div class="dropdown"> <span>Üzerime Gel!</span> <div class="dropdown-content"> <p>Merhaba Dünya!</p> </div> </div> </body> </html>

Açılır içeriği açmak için herhangi bir öğeyi kullanınabilirsiniz (bir <span> veya bir <button> öğesi gibi).
Açılır içeriği oluşturmak ve içine istediğinizi eklemek için bir kapsayıcı öğesi (<div>) kullanabilirsiniz.
Açılır içeriği CSS ile doğru şekilde konumlandırmak için öğelerin etrafına bir <div> öğesi ile sarabilirsiniz.
CSS) .dropdown sınıfı, açılan içeriğin açılır düğmenin hemen altına yerleştirilmesini istediğimizde gerekli olan position:relative kullanır. (position:absolute kullanarak bu eylem gerçekleştirilir.)
.dropdown-content sınıfı, gerçek açılır içeriği tutar. Varsayılan olarak gizlidir ve üzerine gelindiğinde görüntülenecektir. Minimum genişliğin 160 piksel olarak ayarlandığını unutmayın. Bunu değiştirmekten çekinmeyin.
İpucu: Açılan içeriğin genişliğinin açılır düğme kadar geniş olmasını istiyorsanız, genişliği %100'e ayarlayın (ve küçük ekranlarda kaydırmayı etkinleştirmek için overflow:auto özelliğini de kullanabilirsiniz).
Bir kenarlık kullanmak yerine, açılır menüyü bir "kart" gibi göstermek için box-shadow özelliğini kullanabilirsiniz.
:hover seçicisi, kullanıcı fareyi açılır düğmenin üzerine getirdiğinde açılır menüyü göstermek için kullanılır.

Aşağıya Doğru Açılan Liste

Bu örneğimizde, kullanıcının listeden bir seçenek seçmesini sağlayan bir açılır liste oluşturacağız.

Örnek: <style> /* Açılır Düğmeye Stil Verir */ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* <div> alanı - açılır içeriği konumlandırmak için gereklidir */ .dropdown { position: relative; display: inline-block; } /* Açılır İçerik (Varsayılan Olarak Gizlidir) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Açılır listenin içindeki bağlantılar */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Fareyle üzerine gelindiğinde açılır bağlantıların rengini değiştirir */ .dropdown-content a:hover {background-color: #f1f1f1} /* Fareyle üzerine gelindiğinde açılır listeyi gösterir */ .dropdown:hover .dropdown-content { display: block; } /* Açılır içerik gösterildiğinde açılır düğmenin arka plan rengini değiştirir */ .dropdown:hover .dropbtn { background-color: #f00; } </style> <div class="dropdown"> <button class="dropbtn">Açılır Liste</button> <div class="dropdown-content"> <a href="#">Bağlantı 1</a> <a href="#">Bağlantı 2</a> <a href="#">Bağlantı 3</a> </div> </div>

Açılır Gezinti Çubuğu

Örnek: <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { 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); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1;} .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <ul> <li><a href="#home">Ana Sayfa</a></li> <li><a href="#news">Haberler</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Açılır Liste</a> <div class="dropdown-content"> <a href="#">Bağlantı 1</a> <a href="#">Bağlantı 2</a> <a href="#">Bağlantı 3</a> </div> </li> </ul> </body> </html>

Từ khóa » Html Açılır Liste örnekleri

CSS Açılır Liste (Dropdown) - Onur KUL | Kişisel Blog