Menu conflict

[lesliekirk]

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).

[Matt Zimmermann]

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'

(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);

or modify your script initialization to include a preventDefault

(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);

[lesliekirk]

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.