After experiencing slow loading times for the navigation menu on mobile devices, I decided to move my code to the <head> area. You can check out the demo at this link:
I'm utilizing TinyNav.js to convert my navigation into a select dropdown. In order to make it work more efficiently, I've added a class to the <ul> using jQuery. Currently, the code is placed in the footer and works fine, but there's still an issue with its loading time.
$(document).ready(function() {
$('#menufy ul').addClass('zigla');
$(".zigla").tinyNav();
});
(function(a, i, g) {
a.fn.tinyNav = function(j) {
var b = a.extend({
active: "selected",
header: "",
label: ""
}, j);
return this.each(function() {
g;
var h = a(this),
d = "tinynav"
g, f = ".l_"
d, e = a("<select/>").attr("id", d).addClass("tinynav "
d);
if (h.is("ul,ol")) {
"" !== b.header && e.append(a("<option/>").text(b.header));
var c = "";
h.addClass("l_"
d).find("a").each(function() {
c = '<option value="'
a(this).attr("href")
'">';
var b;
for (b = 0; b < a(this).parents("ul, ol").length - 1; b) c = "- ";
c = a(this).text()
"</option>"
});
e.append(c);
b.header || e.find(":eq("
a(f " li").index(a(f " li."
b.active))
")").attr("selected", !0);
e.change(function() {
i.location.href = a(this).val()
});
a(f).after(e);
b.label && e.before(a("<label/>").attr("for", d).addClass("tinynav_label "
d "_label").append(b.label))
}
})
}
})(jQuery, this, 0);
I'm facing issues with getting this code to function properly within the <head> section. Any advice on why that might be happening?