CSS ile Açılır Menü Yapımı

CSS kodlarını kullanarak açılır menü nasıl yapılır sorusunun cevabını bir örnekle anlatmaya çalışacağım. Checkbox ve radio butonlarını kullanarak 2 farklı açılır menü yapacağız. Bunlar bilinen adıyla toogle ve accordion olarak adlandırılan açılır menü stilleri. Anlatımı checkbox üzerinden yapacağım ve daha sonra radio şekline çevireceğiz. Haydi başlayalım…

Öncelikle HTML kodlarımızı verelim:

<section class="acilir-menu">
<div>
<input id="c-m1" name="c-menu" type="checkbox" />
<label for="c-m1">Menu 1</label>
<article>
<p>...</p>
</article>
</div>
<div>
<input id="c-m2" name="c-menu" type="checkbox" />
<label for="c-m2">Menu 2</label>
<article>
<p>...</p>
</article>
</div>
...
</section>

HTML kodlarını ekledikten sonra aşağıdaki gibi bir görüntü oluşacaktır:

css açılır menü anlatımı 1

Bu adımdan sonra artık stil dosyasını düzenlemeye başlıyoruz. Daha sonra açıklamalarını vereceğimiz stil dosyasında bulunması gereken kodlar aşağıdadır:

.acilir-menu label {
padding: 5px 10px;
position: relative;
z-index: 20;
display: block;
height: 20px;
cursor: pointer;
background: #1abc9c;
color: #fff;
line-height: 20px;
margin: 5px 0;
font-size: 18px;
}
.acilir-menu label:hover {
background: #16a085;
}
.acilir-menu input {
display: none;
}
.acilir-menu article {
margin-top: -1px;
overflow: hidden;
display: none;
height: 0;
position: relative;
z-index: 10;
}
.acilir-menu article p {
border-bottom: 1px solid #e2e2e2;
margin: 0;
padding: 0px 10px 5px 10px;
}
.acilir-menu input:checked ~ article {
box-shadow: none;
display: block;
height: 80px;
margin: 0;
}

CSS kodlarını da ekledikten sonra aşağıdaki görüntüyü elde edeceksiniz:

css açılır menü anlatımı 1

Bu adımdan sonra tasarımınıza uygun olarak stil dosyasındaki kodları şekillendirebilirsiniz. Dilerseniz HTML kodlarında bulunan type=”checkbox” bölümündeki checkbox kelimesini radio kelimesi ile değiştirerek. Radyo butonları şeklinde accordion menü elde edebilirsiniz.

Kısaca CSS kodlarından bahsetmek gerekirse:

  • acilir-menu label başlığı altındaki kodlar menü başlığı stilinizi belirlemenizi sağlamaktadır.
  • acilir-menu label:hover‘daki kodlar ise menü başlığının üzerine mouse ile gelindiğinde oluşturulacak stili belirtmektedir.
  • acilir-menu input bölümünde butonlar gizleniyor.
  • acilir-menu article başlığı altında da aktifleştirilmeyen menülerin içeriklerinin gizlenmesi işlemi yapılıyor.
  • acilir-menu article p bölümünde ise açılan menü içeriğinin stil kodlarını ayarlıyoruz.
  • acilir-menu input:checked ~ article başlığı altında da aktifleştirilen menülerin içeriklerin görünür olması işlemi yapılmaktadır.

Daha iyi anlamak ve uygulamak için örneği görüntüleyebilir ya da örneği indirebilirsiniz.

01.10.2014 CSS Yorum yapılmamış

, , , , ,

Yorum yapılmamış

Yorum Yazın

kod.gen.tr