Css ile Yatay Açılır Menü Yapımı

Bu yazımızda Html ve Css ile yatay açılır menü nasıl yapılır? onu öğreneceğiz. Açılır menü dediğimiz aslında iç içe menülerden oluşuyor.

Örneğin ilk menü elemanları Anasayfa, Kategoriler ve Hakkımda olsun. Kategoriler öğesinin üzerine gelindiğinde buna bağlı yeni bir listenin açılmasını sağlayalım.

Bu şekilde iç içe açılır menüler yapabiliriz. Menülerimizi oluştururken en temelde sırasız listeleri (<ul><li> </li></ul>) kullanıyoruz. Daha sonra ise Css kodlarıyla menümüzü şık bir tasarıma kavuşturuyoruz.

Örneğimizi inceledikten sonra Html listeleri konusunda eksikleriniz olduğunu düşünürseniz,

Html Listeleme Etiketleri – ul Etiketi – ol Etiketi

Html Listeleme Örnekleri – İç İçe Listeler

yazılarımı okuyabilirsiniz.

Html ve Css kodlarını paylaştıktan sonra nasıl bir menü oluştuğuna uygulamalı olarak bakalım.

Css ile Yatay Açılır Menü Yapımı

Yatay Açılır Menü Html Kodları

<ul>
<li class="active">
<a href="#">Anasayfa</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Kategoriler</a>
<div class="dropdown-content">
<a href="#">Asp.net MVC</a>
<a href="#">jquery</a>
<a href="#">Css</a>
<a href="#">Html</a>
<a href="#">Javascript</a>
<a href="#">Bootstrap</a>
<a href="#">C#</a>
</div>
</li>
<li>
<a href="#">Hakkımda</a>
</li>
</ul>

<ul>

<a href="#">Anasayfa</a>

</li>

<a href="javascript:void(0)" class="dropbtn">Kategoriler</a>

<a href="#">jquery</a>

<a href="#">Javascript</a>

<a href="#">Bootstrap</a>

</div>

</li>

<li>

<a href="#">Hakkımda</a>

</li>

</ul>

Yatay Açılır Menü Css Kodları

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4fb99f;
}
li {
float: left;
border-bottom: 3px solid #4fb99f;
}
li.active {
background-color: #068587;
border-bottom: 3px solid #f2b134;
}
li a {
display: inline-block;
color: #fff;
padding: 12px 24px;
text-decoration: none;
font-size: 18px;
}
li:hover {
background-color: #068587;
border-bottom: 3px solid #f2b134;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4fb99f;
min-width: 130px;
z-index: 1;
}
.dropdown-content a {
padding: 12px 16px;
display: block;
font-size: 16px;
}
.dropdown-content a:hover {
background-color: #f2b134;
}
.dropdown:hover .dropdown-content {
display: block;
margin-top: 3px;
}

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #4fb99f;

}

li {

float: left;

border-bottom: 3px solid #4fb99f;

}

li.active {

background-color: #068587;

border-bottom: 3px solid #f2b134;

}

li a {

display: inline-block;

color: #fff;

padding: 12px 24px;

text-decoration: none;

font-size: 18px;

}

li:hover {

background-color: #068587;

border-bottom: 3px solid #f2b134;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #4fb99f;

min-width: 130px;

z-index: 1;

}

.dropdown-content a {

padding: 12px 16px;

display: block;

font-size: 16px;

}

.dropdown-content a:hover {

background-color: #f2b134;

}

.dropdown:hover .dropdown-content {

display: block;

margin-top: 3px;

}

Yaptıklarımızı kısaca özetleyecek olursak;

► Menü elemanları için bir <ul> <li> listesi yazıyoruz.

► Class’ı active olan link’e farklı bir renk vererek belirgin hale getiriyoruz.

► Menü elemanlarının (<li> etiketlerine) float özelliğine left değeri vererek yan yana gelmelerini sağlıyoruz.

► Menü elemanlarına hover efekti ve alt kenarlık veriyoruz.

► Açılır menünün elemanları için a etiketleri tanımlıyoruz ve bu listenin en başta görünmemesi için display özelliğine none değeri veriyoruz. Kategorilerin üzerine gelindiğinde display değerini block yapıyoruz.

Yatay Açılır Menümüzün Son Hali

Şu Html ve Css menü örnekleri de ilginizi çekebilir.

Responsive Menü Yapımı

Css ile Yatay Sticky Menü Yapımı

Css ile Yatay Sabit Menü Yapımı

Css ile Yatay Menü Yapımı

Css ile Dikey Sabit Menü Yapımı

Css ile Dikey Menü Yapımı

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.