Announcement

Collapse
No announcement yet.

Menu conflict

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

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

    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    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.
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      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.

      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment

      Working...
      X