slidemenü.png-Yana kayan navigasyon menüsü-cahitsoyman.blogspot.com
Bu makalemizde  günümüzde bir çok sitede kullanılan Yana Kayan Navigasyon Menüsünün (açılır kapanır  sidebar, slide menü) nasıl yapıldığını anlatmaya çalışacağım. 

Böylece web sitenize  yandan açılan ve kapanan menü ekleyerek sayfanızda daha fazla içeriğe yer verme imkanına sahip olabileceksiniz.

Uygulamamız da html, css, jquery ve font avesome kullanarak bir geçiş animasyon ile hamburger ikonunu birleştirdik.

Fare ile hamburger ikonumuza yani üst menü butonumuza tıkladığımızda, içerik sayfamız yana kaymakta ve açılan yan menümüz de sayfa içeriğimizin üzerine açılmaktadır.




Çarpı ( x ) butonumuza tıkladığımızda ise yana açılan menümüz kapanmakta ve içerik sayfamız da önceki haline dönmektedir.

 Kaynak Kodları: İNDİR

Uygulamamızın  kapalı ve açık şekli ile bitmiş hali aşağıda ki şekilde görülmektedir.


Açık Hali-Yana Kayan Navigasyon Menüsü


Kapalı Hali-Yana Kayan Navigasyon Menüsü 

Anlatımı aşağıdaki videodan veya youtube kanalından takip edebilirsiniz.