Web tasarımında kullanılan dropdown menüler, kullanıcıların kolayca erişebileceği ve navigasyonu daha kullanıcı dostu hale getiren önemli bir özelliktir. Bu yazıda, CSS kullanarak basit ve etkileyici dropdown menüler oluşturmanın yollarını öğreneceğiz.
1. Temel Dropdown Menü:
HTML:
<div class="dropdown">
<button class="dropbtn">Menü</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
CSS:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
z-index: 1;
}
.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;
}
Yukarıdaki kod blokları, basit bir dropdown menü oluşturmak için gereken HTML ve CSS kodlarını içerir. Dropdown menüye tıkladığınızda, içinde bulunan bağlantılar açılır.
2. Çoklu Sütunlu Dropdown Menü:
HTML:
<div class="dropdown">
<button class="dropbtn">Menü</button>
<div class="dropdown-content">
<div class="column">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
</div>
</div>
</div>
CSS:
.column {
float: left;
width: 50%;
}
.column a {
padding: 10px;
text-decoration: none;
display: block;
}
/* Clear floats after the columns */
.dropdown-content {
overflow: auto;
}
Yukarıdaki kodlar, dropdown menünüzü birden fazla sütunda düzenlemek için gereken HTML ve CSS kodlarını içerir.
Dropdown menüler, kullanıcı deneyimini geliştirmenin harika bir yoludur ve CSS kullanarak kolayca oluşturulabilirler. Yukarıdaki örnekler, basit dropdown menülerden çok sütunlu menülere kadar geniş bir yelpazede kullanılabilir. Deneyin ve kendi tasarımlarınızı oluşturun!