I found code for a navigation menu on codepen which I would like to use found here https://codepen.io/Jamwal/pen/OxgymX
(I have to post code to publish the codepen link, so this is the JS for the navigation. Please visit link to see full code)
$(document).ready(function(){
/*mega menu*/
$('#mega-menu-fresher li').on('hover', function(){
if ($(this).siblings().children().hasClass('active-mega-menu')) {
$(this).siblings().children().removeClass('active-mega-menu');
}
$(this).children().addClass('active-mega-menu');
});
$('#mega-menu-fresher').on('mouseleave', function(){
$('#mega-menu-fresher li').children().removeClass('active-mega-menu');
$('#mega-menu-fresher li:first-child').children().addClass('active-mega-menu');
});
$('.navigation-bar ul.menu-list li#mega-menu-parent').on('hover',function(){
$('#mega-menu-fresher').toggle();
});
$('#mega-menu-fresher ul li.vegies').on('mouseenter', function(){
$(this).children('a.active-mega-menu').css('color','#fff');
});
$('#mega-menu-fresher ul li.vegies').on('mouseleave', function(){
$(this).children('a.active-mega-menu').css('color','#000');
});
});
I am only interested in using the dropdown content setup under the "Home" section, but I want to add more menu items with unique content, but following the same format. For example - Home, Page1, Page2, Page3 and have each one with it's own set of sections and links following the same format.
On my end, I have created multiple menu items and unique content similar to what is in "Home". But, when I hover over any of the other navigation items (Page1, Page2, Page3), they all trigger the first "Home" menu dropdown.
How do I trigger the dropdown for Page 1 when I hover over Page 1 menu item, Page2 when hovering over Page2, etc.. Currently all trigger Home. I am not very fluent with JS, and I can't seem to figure it out. If you can help me solve this it would be very very helpful!
Please let me know if you need any more clarification.
You must use $ to enter the function
$(document).ready(function($){
// code here
}