Css ile Açılır Menü İkonu Hazırlayalım
Yukarıdaki gibi bir menü butonunu internette çokça görmekteyiz. Böyle bir ikonu resim veya başka şeyler kullanmadan, sadece Css kullanarak hazırlayabiliriz.
İkonun yer alacağı yere aşağıdaki kodları yazalım. Bu örnekte a etiketi içerisinde 3 adet boş div elemanı kullandık. İstersek div yerine blok hale getirerek span veya başka elemanlar da kullanabiliriz.
<div class="menu">
<a href="javascript:void(0);" class="menuIkon" onclick="menuAc()">
<div></div>
<div></div>
<div></div>
</a>
</div>
a etiketinin href özelliği tıklandığında sayfa yukarı kaymasın diye düzenlenmiştir.
Muhtemelen bu ikona tıklandığında bir menü açılacağı için de onclick özelliğine bir fonksiyon atanmıştır. Bu fonksiyonu burada kullanmayacağız ama menünün açılan ve gizlenen halini bir sonraki konuda bulabilirsiniz.
Aşağıdaki Css kodları ile ikonun görünümünü ayarlayınca işlem tamamdır.
.menu .menuIkon div {
width: 35px;
height: 5px;
background-color: green;
margin: 5px 0;
}
Örneğin çalışan halini aşağıdaki örnekler kısmında görebilir ve kendiniz deneyebilirsiniz.
css ile menü butonu, css menü ikonu, css menu icon, açılır menü butonu hazırlama, 3 çizgili menü ikonu hazırla, kendi menü butonunu hazırla
KONU İLE İLGİLİ ÖRNEKLER
10775 kez okundu.