Css ile Dropdown Yapımı

Bu yazımızda Css ile dropdown (açılır menü) nasıl yapılır onu öğreneceğiz. Öncelikle dropdown yani açılır menü nedir ondan bahsedelim. Web sitelerinde üzerine gelindiğinde veya fare ile tıklandığında açılan menülerdir. Daha çok menü öğelerinin çok olduğu durumlarda tercih edilir.

Örneğin bir ETicaret sitesini düşünelim. Onlarca kategoride ürün olabiliyor. Bu gibi durumlarda menülerin daha düzenli olması için dropdown menüler ile iç içe kategoriler oluştururuz. Böylece daha sade bir tasarım ile kullanıcının daha rahat gezinmesi amaçlanır.

Aşağıda birden fazla açılır menü bulunuyor. İlerleyen zamanlarda örneklerin sayısını arttırmayı düşünüyorum. Artık örneklerimize geçebiliriz.

İlk önce Html ve Css kodlarını yazıp daha sonra örneklerimizin demo sunu paylaştım. Kodları incelediğinizde daha anlaşılır olacaktır.

Açılır Menü Html ve Css Kodları

Açılır Menü Html ve Css Kodları

Açılır Menü Html ve Css Kodları

Açılır Menü Html ve Css Kodları

Ş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 Açılır 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.

2 Yorum

  1. Erol Nisan 8, 2019 Cevapla
    • admin Nisan 17, 2019

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link