Announcement

Collapse
No announcement yet.

Menu conflict

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • lesliekirk
    started a topic Menu conflict

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


  • lesliekirk
    replied
    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.

    Leave a comment:


  • Matt Zimmermann
    replied
    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);
    or modify your script initialization to include a preventDefault
    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:

Working...
X

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept