/ Published in: JavaScript
Standard list markup, adds button to expand a super dropdown next to the link.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
$("#ukn-topbar li.ukn-subnav").load("/menu", "", function(responseText, textStatus, XMLHttpRequest){ //alert(' - textStatus:' + textStatus +' - status: '+ XMLHttpRequest.status); if (responseText != '' && textStatus == 'success' && XMLHttpRequest.status == 200) { initMenuItem('general'); initMenuItem('music'); initMenuItem('fashion'); initMenuItem('film'); initMenuItem('tv'); initMenuItem('sport'); } else { //alert(' - textStatus:' + textStatus +' - status: '+ XMLHttpRequest.status); } } ); function initMenuItem(cat_name) { $("#ukn-topbar ul li.ukn-subnav ul").hide(); $("#ukn-topbar ul li.ukn-subnav").show(); $("#ukn-topbar ul li.ukn-cat-" + cat_name).append("<a class='ukn-subnav-trigger' href='#' title='Expand " + cat_name + "'>Open</a>"); $("#ukn-topbar ul li.ukn-cat-" + cat_name + " a.ukn-subnav-trigger").click(function () { if ($(this).hasClass('ukn-active')) { $("#ukn-topbar ul li a.ukn-subnav-trigger").removeClass("ukn-inactive"); $(this).removeClass("ukn-active").html('Open'); $("#ukn-topbar ul li.ukn-subnav ul.ukn-subnav-"+ cat_name).hide(); } else if ($(this).hasClass('ukn-inactive')) { $("#ukn-topbar ul li a.ukn-subnav-trigger").removeClass('ukn-active').addClass("ukn-inactive").html('Open'); $(this).addClass("ukn-active").removeClass("ukn-inactive").html('Close'); $("#ukn-topbar ul li.ukn-subnav ul:visible").hide(); $("#ukn-topbar ul li.ukn-subnav ul.ukn-subnav-"+ cat_name).show(); } else { $(this).addClass("ukn-active").html('Close'); $("#ukn-topbar ul li a.ukn-subnav-trigger:not('.ukn-active')").addClass("ukn-inactive"); $("#ukn-topbar ul li.ukn-subnav ul.ukn-subnav-"+ cat_name).show(); } }); }