Duyarlı (Responsive) Dikey Açılır Navigasyon Menüsu Yapma

Bu makalede duyarlı (responsive) dikey açılır bir navigasyon menüsünün HTML ve CSS le nasıl yapıldığını anlatmaya çalışacağım.

Aşağıda gördüğünüz gibi yapacağımız menünün sol tarafında bir logo ve slogan yazısı ve sağ tarafında  fare ile üzerine geldiğimizde transition efekti ile dikey olarak (aşağıya inen) açılır üç adet menümüz bulunmaktadır.

Açılır menüler aşağıya doğru açılarak alt menüleri ortaya çıkararak açılır menülerini göstermektedir. Sayfamızı küçülttüğümüzde menümüzün de genişliği değişerek ayarlanmaktadır.

Sayfamızı daha da küçülttüğümüzde logo ve sloganımız tamamen menülerin altına inerek responsiv bir şekilde  çalışmaktadır. Fare ile üzerine gelmedikçe açılır listelerimiz ise asla görünmez.

Üzerine geldiğimizde ise açılır listelerimiz güzel şekilde çalışmaktadır.

Kaynak Kodları: İNDİR

Anlatımı aşapıda ki videodan veya youtube linkinden takip edebilirsiniz.