jQuery Advanced Menu Nav


/ Published in: JavaScript
Save to your folder(s)

Standard list markup, adds button to expand a super dropdown next to the link.


Copy this code and paste it in your HTML
  1. $("#ukn-topbar li.ukn-subnav").load("/menu", "", function(responseText, textStatus, XMLHttpRequest){
  2. //alert(' - textStatus:' + textStatus +' - status: '+ XMLHttpRequest.status);
  3. if (responseText != '' && textStatus == 'success' && XMLHttpRequest.status == 200)
  4. {
  5. initMenuItem('general');
  6. initMenuItem('music');
  7. initMenuItem('fashion');
  8. initMenuItem('film');
  9. initMenuItem('tv');
  10. initMenuItem('sport');
  11. } else {
  12. //alert(' - textStatus:' + textStatus +' - status: '+ XMLHttpRequest.status);
  13. }
  14. }
  15. );
  16.  
  17. function initMenuItem(cat_name) {
  18. $("#ukn-topbar ul li.ukn-subnav ul").hide();
  19. $("#ukn-topbar ul li.ukn-subnav").show();
  20. $("#ukn-topbar ul li.ukn-cat-" + cat_name).append("<a class='ukn-subnav-trigger' href='#' title='Expand " + cat_name + "'>Open</a>");
  21.  
  22. $("#ukn-topbar ul li.ukn-cat-" + cat_name + " a.ukn-subnav-trigger").click(function () {
  23. if ($(this).hasClass('ukn-active')) {
  24. $("#ukn-topbar ul li a.ukn-subnav-trigger").removeClass("ukn-inactive");
  25. $(this).removeClass("ukn-active").html('Open');
  26. $("#ukn-topbar ul li.ukn-subnav ul.ukn-subnav-"+ cat_name).hide();
  27. } else if ($(this).hasClass('ukn-inactive')) {
  28. $("#ukn-topbar ul li a.ukn-subnav-trigger").removeClass('ukn-active').addClass("ukn-inactive").html('Open');
  29. $(this).addClass("ukn-active").removeClass("ukn-inactive").html('Close');
  30. $("#ukn-topbar ul li.ukn-subnav ul:visible").hide();
  31. $("#ukn-topbar ul li.ukn-subnav ul.ukn-subnav-"+ cat_name).show();
  32. } else {
  33. $(this).addClass("ukn-active").html('Close');
  34. $("#ukn-topbar ul li a.ukn-subnav-trigger:not('.ukn-active')").addClass("ukn-inactive");
  35. $("#ukn-topbar ul li.ukn-subnav ul.ukn-subnav-"+ cat_name).show();
  36. }
  37. });
  38. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.