Thank you, Matt - it needed the preventDefault. I removed the jQuery link that I was provided (I didn't want to use it anyhow) and put the function code right after the Global Footer tag on this page.
Announcement
Collapse
No announcement yet.
Menu conflict
Collapse
X
-
Hi Leslie,
You should be able to use a newer version of jQuery with the site, so you could replace the global call if you would like. I would also recommend moving the call to your 'script'js' file for the menu to the global footer below the other script calls. As for the loading of the page, this is happening because the element is a link. The best solutions to this would be to either change that element to a 'span'
Code:(function ($) { $(document).ready(function () { // Cache the elements we'll need var menu = $('#cssmenu'); var menuList = menu.find('ul:first'); var listItems = menu.find('li').not('#responsive-tab'); // Create responsive trigger menuList.prepend('<li id="responsive-tab"><span href="#">Menu</span></li>'); // Toggle menu visibility menu.on('click', '#responsive-tab', function () { listItems.slideToggle('fast'); listItems.addClass('collapsed'); }); }); })(jQuery);
Code:(function ($) { $(document).ready(function () { // Cache the elements we'll need var menu = $('#cssmenu'); var menuList = menu.find('ul:first'); var listItems = menu.find('li').not('#responsive-tab'); // Create responsive trigger menuList.prepend('<li id="responsive-tab"><a href="#">Menu</a></li>'); // Toggle menu visibility menu.on('click', '#responsive-tab', function (element) { element.preventDefault(); listItems.slideToggle('fast'); listItems.addClass('collapsed'); }); }); })(jQuery);
Last edited by Matt Zimmermann; 04-16-18, 08:01 AM.
Leave a comment:
-
Menu conflict
I was given a snippet of code to integrate. It's to display a mobile menu (instead of using the built-in ReadyTheme Navigations Sets). When viewing the menu on a mobile sized device, the hamburger menu displays as expected. The problem is when you click on the menu. It takes you to the directory level instead of opening the menu.
I'm convinced that there is javascript conflict but I cannot find it. I have tried placing the javascript references (included with the code) in both the Global Footer or the HEAD tag. The code snippet I was given also included a reference to code.jquery.com/jquery-latest.min.js. I thought perhaps that might be conflicting with the Base ReadyTheme file reference ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js. I've tried using just it along with the javascript for the mobile menu.
I've added the code to just one page that isn't used: https://www.jagbits.com/ABUS.html
You need to view it mobile sized, then click the hamburger menu (ignore the CSS issue with the menu disappearing - I don't think that is the problem).
Yes, I would prefer to use the built-in ReadyTheme option, but this menu is used on numerous static pages (and works on them).
Tags: None
Leave a comment: