V prvních třech částech jsme rozebrali základní principy práce selektorů a ukázal jsem několik příkladů. V tomto článku zkusim akcentovat Váši pozornost na realizaci JavaScript menu.

Kliknutím na odkaz s třídou btn-class, vzjíždí panel s menu. Částečně se daný příklad vyskytuje v třetí části, takže nebudu ho rozebírat detailně, uvédu jenom JavaScript kód s poznámkami:

// Když se stránka načte $(document).ready(function(){ // když zmačkneme tlačítko s třídou btn-slide (horní menu) $(".btn-slide").click(function(){ // vysouváme/schováváme panel s id = panel1 $("#panel1").slideToggle("slow"); // Měníme třídu odkazu $(this).toggleClass("active"); // a nic neděláme dál (abysme nepřešli na odkazovanou stránku) return false; }); // вешаем обработчик на ссылку с классом "btn-slide2" (нижнее меню) $(".btn-slide2").click(function(){ // vysouváme/schováváme panel s id = panel2 $("#panel2").slideToggle("slow"); // Měníme třídu odkazu $(this).toggleClass("active2"); // a nic neděláme dál (abysme nepřešli na odkazovanou stránku) return false; }); });

// zpracování události pro odkaz s třídou btn-slide $(".btn-slide").toggle(function(){ // ... první kliknutí na odkaz // vracíme false return false; }, function(){ // ... druhý kliknutí na odkaz // vracíme false return false; });