/* ========================== TinyNav with active label style ========================== */ (function (e, t, n) { e.fn.tinyNav = function (r) { var s = e.extend({ active: "selected", header: "", label: "" }, r); return this.each(function () { n++; var r = e(this), o = "tinynav", u = o + n, a = ".l_" + u, f = e("<select/>").attr({ id: u }).addClass(o + " " + u); if (r.is("ul,ol")) { if (s.header !== "") { f.append(e('<option value="select-header"/>').text(s.header)) } var l = ""; r.addClass("l_" + u).find("a").each(function () { l += '<option value="' + e(this).attr("href") + '">'; var t; for (t = 0; t < e(this).parents("ul, ol").length - 1; t++) { l += "- " } l += e(this).text() + "</option>" }); f.append(l); if (!s.header) { f.find(":eq(" + e(a + " li").index(e(a + " li." + s.active)) + ")").attr("selected", true) } else { f.find(":eq(" + e(a + " li").index(e(a + " li." + s.active)) + ")").next().attr("selected", true) } f.change(function () { if (e(this).val() != "select-header") { t.location.href = e(this).val() } }); e(a).after(f); if (s.label) { f.before(e("<label/>").attr("for", u).addClass(o + "_label " + u + "_label").append(s.label)) } } }) } })(jQuery, this, 0) // Configuration $(function () { $('html').addClass('js-enabled'); $('.hs-categories ul').tinyNav({ active: 'active', // The class for the active item in menu (don't change) header: 'Menu' // Default value if there is no active item in menu (optional for COS) // label: '' // Add a label (optional) }); }); $(function () { var value1 = window.location.href.substring(window.location.href.lastIndexOf('/') + 1); $('.hs-categories ul li a').each(function () { var url = $(this).attr('href'); var lastSegment = url.split('/').pop(); if (lastSegment == value1) { if( $(this).html() == 'All' ){ $('select#tinynav1>option:first-child').html('Filter: All Categories'); } else { $('select#tinynav1>option:first-child').html($(this).html()); } } }); });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter