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
0 Comments
Yorum Gönder