Creating a responsive menu
-
Update: I am not sure now if that is the reason why it doesn't work on these pages. I am getting the following error on these pages: Uncaught TypeError: $ is not a function on line 6 The menu works as expected if I recreate it outside of Joomla. Hi, I am trying to create a responsive menu using jQuery following a tutorial. I am good with HTML and CSS but very rocky with Javascript. I thought I had got everything working but then realised the mobile toggle menu only works on the pages where the menu item for that page has the css class of 'parent'. Since I have only one dropdown menu in my navigation I need it to also work on the other items. For styling reasons I need the other menu items to have a different class set, which I can do. But I can't figure out how to edit the code to add the toggle menu to the other class as well as the parent class. I hope this makes sense! This is the JS code I have:
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$("#nav").toggle();
});
$("#nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
adjustMenu();
});
function adjustMenu() {
if (ww < 974) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$("#nav").hide();
} else {
$("#nav").show();
}
$("#nav li").unbind('mouseenter mouseleave');
$("#nav li a.parent").unbind("click").bind("click", function(e) {
e.preventDefault();
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$("#nav").show();
$("#nav li").removeClass("hover");
$("#nav li a").unbind("click");
$("#nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
});
}
}$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
}); -
Update: I am not sure now if that is the reason why it doesn't work on these pages. I am getting the following error on these pages: Uncaught TypeError: $ is not a function on line 6 The menu works as expected if I recreate it outside of Joomla. Hi, I am trying to create a responsive menu using jQuery following a tutorial. I am good with HTML and CSS but very rocky with Javascript. I thought I had got everything working but then realised the mobile toggle menu only works on the pages where the menu item for that page has the css class of 'parent'. Since I have only one dropdown menu in my navigation I need it to also work on the other items. For styling reasons I need the other menu items to have a different class set, which I can do. But I can't figure out how to edit the code to add the toggle menu to the other class as well as the parent class. I hope this makes sense! This is the JS code I have:
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$("#nav").toggle();
});
$("#nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
adjustMenu();
});
function adjustMenu() {
if (ww < 974) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$("#nav").hide();
} else {
$("#nav").show();
}
$("#nav li").unbind('mouseenter mouseleave');
$("#nav li a.parent").unbind("click").bind("click", function(e) {
e.preventDefault();
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$("#nav").show();
$("#nav li").removeClass("hover");
$("#nav li a").unbind("click");
$("#nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
});
}
}$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});I actually got this working fine outside of the Joomla CMS I am using so I am wondering if there's some sort of conflict going on and it's not as simple as I thought it might be. Might help if I take a break and eat something as I am going cross eyed with this! The mobile menu works correctly on the Shop item, but not on the others. The site I am working on is here: Home[^]
-
Update: I am not sure now if that is the reason why it doesn't work on these pages. I am getting the following error on these pages: Uncaught TypeError: $ is not a function on line 6 The menu works as expected if I recreate it outside of Joomla. Hi, I am trying to create a responsive menu using jQuery following a tutorial. I am good with HTML and CSS but very rocky with Javascript. I thought I had got everything working but then realised the mobile toggle menu only works on the pages where the menu item for that page has the css class of 'parent'. Since I have only one dropdown menu in my navigation I need it to also work on the other items. For styling reasons I need the other menu items to have a different class set, which I can do. But I can't figure out how to edit the code to add the toggle menu to the other class as well as the parent class. I hope this makes sense! This is the JS code I have:
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$("#nav").toggle();
});
$("#nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
adjustMenu();
});
function adjustMenu() {
if (ww < 974) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$("#nav").hide();
} else {
$("#nav").show();
}
$("#nav li").unbind('mouseenter mouseleave');
$("#nav li a.parent").unbind("click").bind("click", function(e) {
e.preventDefault();
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$("#nav").show();
$("#nav li").removeClass("hover");
$("#nav li a").unbind("click");
$("#nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
});
}
}$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});I actually got this working fine outside of the Joomla CMS I am using so I am wondering if there's some sort of conflict going on and it's not as simple as I thought it might be. Might help if I take a break and eat something as I am going cross eyed with this! The mobile menu works correctly on the Shop item, but not on the others. The site I am working on is here: Home[^]
-
Update: I am not sure now if that is the reason why it doesn't work on these pages. I am getting the following error on these pages: Uncaught TypeError: $ is not a function on line 6 The menu works as expected if I recreate it outside of Joomla. Hi, I am trying to create a responsive menu using jQuery following a tutorial. I am good with HTML and CSS but very rocky with Javascript. I thought I had got everything working but then realised the mobile toggle menu only works on the pages where the menu item for that page has the css class of 'parent'. Since I have only one dropdown menu in my navigation I need it to also work on the other items. For styling reasons I need the other menu items to have a different class set, which I can do. But I can't figure out how to edit the code to add the toggle menu to the other class as well as the parent class. I hope this makes sense! This is the JS code I have:
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$("#nav").toggle();
});
$("#nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
adjustMenu();
});
function adjustMenu() {
if (ww < 974) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$("#nav").hide();
} else {
$("#nav").show();
}
$("#nav li").unbind('mouseenter mouseleave');
$("#nav li a.parent").unbind("click").bind("click", function(e) {
e.preventDefault();
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$("#nav").show();
$("#nav li").removeClass("hover");
$("#nav li a").unbind("click");
$("#nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
});
}
}$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});I actually got this working fine outside of the Joomla CMS I am using so I am wondering if there's some sort of conflict going on and it's not as simple as I thought it might be. Might help if I take a break and eat something as I am going cross eyed with this!
-
Update: I am not sure now if that is the reason why it doesn't work on these pages. I am getting the following error on these pages: Uncaught TypeError: $ is not a function on line 6 The menu works as expected if I recreate it outside of Joomla. Hi, I am trying to create a responsive menu using jQuery following a tutorial. I am good with HTML and CSS but very rocky with Javascript. I thought I had got everything working but then realised the mobile toggle menu only works on the pages where the menu item for that page has the css class of 'parent'. Since I have only one dropdown menu in my navigation I need it to also work on the other items. For styling reasons I need the other menu items to have a different class set, which I can do. But I can't figure out how to edit the code to add the toggle menu to the other class as well as the parent class. I hope this makes sense! This is the JS code I have:
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$("#nav").toggle();
});
$("#nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
adjustMenu();
});
function adjustMenu() {
if (ww < 974) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$("#nav").hide();
} else {
$("#nav").show();
}
$("#nav li").unbind('mouseenter mouseleave');
$("#nav li a.parent").unbind("click").bind("click", function(e) {
e.preventDefault();
$(this).parent("li").toggleClass('hover');
});
} else {
$(".toggleMenu").css("display", "none");
$("#nav").show();
$("#nav li").removeClass("hover");
$("#nav li a").unbind("click");
$("#nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
});
}
}$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});wrote:
Uncaught TypeError: $ is not a function
Either you haven't included jQuery properly, or you've included it after this script.
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
