Results 1 to 2 of 2
  1. #1

    Default How to Enable Mobile Menu (Jquery mmenu) on Desktop Layout of Responsive Classic?

    Zen Cart v1.5.6a
    PHP v7.2.4

    Our company is creating a new look for our website based on Zen Cart's Responsive Classic template. In the new design there is a hamburger menu that is ever-present along with a main header navigation; and then at smaller sizes (mobile/portrait tablet) the main nav lives inside the hamburger menu as well.

    I've been trying to get the mmenu implementation that's used in the tablet and mobile versions from the responsive_classic template to appear in the default/desktop/full layout as well, but to no avail. I've added the statement to load tpl_modules_mobile_menu.php even in default layout, and I've added a link to jquery.mmenu.all.css also in the desktop/default layout. After doing this, the desktop page produces the HTML:
    HTML Code:
    <div id="mm-blocker" class="mm-slideout"></div>
    but not the "class=header" <div> that would normally come after it on the functioning layouts.

    I think that if I could get the mmenu to load on the desktop layout then I could style it the way that we need it to be styled, but I'm having trouble getting it to build itself correctly.

    I'm also wondering the best way to get a list of links in the mmenu navigation that would be conditional on device or window width. Would it be easiest to make the ezpages and then enable the ezpages link to the mmenu, even if we don't actually utilize the ezpages feature? Or can I pass it a specific list of links that would exist when at a certain layout/width, but not exist (or be visible) when at default/desktop?

    I would appreciate any assistance or advice that anyone has to offer on the subject.

    Thank you very much,

    –Robert

  2. #2

    Default Re: How to Enable Mobile Menu (Jquery mmenu) on Desktop Layout of Responsive Classic?

    Quote Originally Posted by RobertH View Post
    Zen Cart v1.5.6a
    PHP v7.2.4

    Our company is creating a new look for our website based on Zen Cart's Responsive Classic template. In the new design there is a hamburger menu that is ever-present along with a main header navigation; and then at smaller sizes (mobile/portrait tablet) the main nav lives inside the hamburger menu as well.

    I've been trying to get the mmenu implementation that's used in the tablet and mobile versions from the responsive_classic template to appear in the default/desktop/full layout as well, but to no avail. I've added the statement to load tpl_modules_mobile_menu.php even in default layout, and I've added a link to jquery.mmenu.all.css also in the desktop/default layout. After doing this, the desktop page produces the HTML:
    HTML Code:
    <div id="mm-blocker" class="mm-slideout"></div>
    but not the "class=header" <div> that would normally come after it on the functioning layouts.

    I think that if I could get the mmenu to load on the desktop layout then I could style it the way that we need it to be styled, but I'm having trouble getting it to build itself correctly.

    I'm also wondering the best way to get a list of links in the mmenu navigation that would be conditional on device or window width. Would it be easiest to make the ezpages and then enable the ezpages link to the mmenu, even if we don't actually utilize the ezpages feature? Or can I pass it a specific list of links that would exist when at a certain layout/width, but not exist (or be visible) when at default/desktop?

    I would appreciate any assistance or advice that anyone has to offer on the subject.

    Thank you very much,

    –Robert
    Nevermind, I found the
    PHP Code:
    <?php 
     
    if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {
    echo 
    '<div class="header Fixed"><a href="#menu" title="Menu"><i class="fa fa-bars"></i></a></div>';
     } else if ( 
    $detect->isTablet() || $_SESSION['layoutType'] == 'tablet' ){
    echo 
    '<div class="header Fixed"><a href="#menu" title="Menu"><i class="fa fa-bars"></i></a></div>';
    } else { 
    //
    }
    ?>
    block in tpl_header.php.

    Now I just need to learn how to control what links go inside the mmenu, and how to get it to slide out from the right side. In the documentation for the plugin on https://mmenujs.com/ it mentions a configuration section, does this already exists somewhere in the mmenu files in the responsive_classic template or would it need to be created?

 

 

Similar Threads

  1. v155 Method to show only subcategories in mobile menu Responsive Classic Stock 1.55f
    By twitchtoo in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 23 Oct 2020, 08:40 PM
  2. v155 Responsive Classic vs Responsive Sheffield Blue vs ?
    By Zean in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 13 May 2016, 07:01 AM
  3. Replies: 6
    Last Post: 14 Jan 2016, 01:01 PM
  4. Replies: 36
    Last Post: 16 Jan 2015, 07:08 PM
  5. v139h I bought a mobile template; how do I Mobile Device to Show Desktop version by Default
    By explorer1979 in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 2 Mar 2013, 03:42 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR