CSS ile Çok Katmanlı Açılır Menü Yapmak

Menüler, web sitelerin genelinin temel kısmını oluşturan unsurlardan birisidir. Böylesine önemli bir unsurun işlevselliği de hayli önemlidir. Standart menülerden ziyade daha çok katmanlı şekilde açılır menülere ihtiyaç duyulması durumunda bunu pratik bir şekilde çözmek için uygulanması gereken iki basit adım var. 1. Adım: HTML <nav class=”menu”> <ul class=”menu-ic”> <li><a href=”#”>Ana Sayfa</a></li> <li><a href=”#”>Hakkımızda</a></li> <li class=”ustmenu”><a href=”#”>Kategoriler</a> <ul class=”altmenu”> <li><a href=”#”>Cemal Süreya</a></li> <li><a href=”#”>Özdemir Asaf</a></li> <li><a href=”#”>Nazım Hikmet Ran</a></li> <li><a href=”#”>Mehmet Akif Ersoy</a></li> </ul> </li> <li><a href=”#”>İletişim</a></li> <li class=”ustmenu”><a href=”#”>Arşiv</a> <ul class=”altmenu”> <li><a href=”#”>2014</a></li> <li class=”ustmenu”><a href=”#”>2015</a> <ul class=”altmenu”> <li><a href=”#”>01/2015</a></li> <li><a href=”#”>02/2015</a></li> <li><a href=”#”>03/2015</a></li> </ul> </li> <li><a href=”#”>2016</a></li> </ul> </li> </ul>…

Devamını Oku ›

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: Bu adımdan sonra artık stil dosyasını düzenlemeye başlıyoruz. Daha sonra açıklamalarını…

Devamını Oku ›
kod.gen.tr