00:41
a
Merhaba arkadaşlar yeni bir menü yapım uygulamasında tekrar buluştuk. Bu yazımda JQuery ile açılıp kapanır menü yapımını anlatacağım. Bu menüyü sitenizdeki kategorilere hızlı erişim sağlamak için kullanabilirsiniz. Bu yazıyla bunun nasıl yapıldığını kolayca öğreneceksiniz. Bundan sonra ki makalemde de treeview menü yapımını da anlatacağım. Yapacağımız bu uygulamalarda yine hazır kütüphanelerden yararlanacağız. Uygulamamızda ana kategoriler ve bunların altında bağlantılar olacak. Hangi kategoriyi seçersek onun altındaki bağlantılar gözükecek ve bu menü sayesinde hızlıca başka sayfaya geçebileceğiz. Bu uygulamayı site içi veya site dışı sayfalara yönlendirme amacıyla kolayca kullanabilirsiniz. Uygulamamızın çalışabilmesi için js ve css dosyasına ihtiyacınız olduğundan dolayı çalışır halini yazının sonunda sizlere vereceğim. Şimdi uygulamamızı yapmaya başlayabiliriz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html><html><head><title>Accordion Menü Yapımı</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript" src="accordion.js"></script><link rel="stylesheet" href="style.css" /><script type="text/javascript">ddaccordion.init({ headerclass: "expandable", contentclass: "categoryitems", revealtype: "click", mouseoverdelay: 200, collapseprev: true, defaultexpanded: [0], onemustopen: false, animatedefault: false, persiststate: true, toggleclass: ["", "openheader"], togglehtml: ["prefix", "", ""], animatespeed: "fast", oninit:function(headers, expandedindices){}, onopenclose:function(header, index, state, isuseractivated){}});</script></head><body><div class="arrowlistmenu"> <h3 class="menuheader expandable">Web Sitleri</h3> <ul class="categoryitems"> <li><a href="http://www.bcakir.com">bcakir</a></li> <li><a href="http://www.egitimmateryalleri.com">egitimmateryalleri</a></li> </ul> <h3 class="menuheader expandable">Facebook Yazıları</h3> <ul class="categoryitems"> <li><a href="http://bcakir.com/?p=835">Facebook Tarzı Resim Galerisi</a></li> <li><a href="http://bcakir.com/?p=858">Video Oyunları Kan Kaybediyor</a></li> <li><a href="http://bcakir.com/?p=833">Sosyal Oyun Pazarı Büyüklüğü</a></li> </ul> <h3 class="menuheader expandable">Css Yazıları</h3> <ul class="categoryitems"> <li><a href="http://bcakir.com/?p=650">Sabit Reklam Alanı Yapma</a></li> <li><a href="http://bcakir.com/?p=653">Css ile Tarayıcı Sıfırlama</a></li> </ul></div></body></html> |
Uygulamamızı JQuery kütüphanesinden yararlanarak kolayca yaptık. Kategorileri kendinize göre ayarlarsınız. Ayrıca, dışarıdan çağırdığımız css dosyasında değişiklik yaparak menümüze farklı bir görünüm de verebilirsiniz. Bütün içeriğin olduğu çalışan dosyayı buradan indirebilirsiniz. Bu yazıda anlatacaklarımın sonuna gelmiş oldum. Yararlı bir uygulama olması dileğiyle.
