Menu icon Foundation

Developer | Santee, CA

My Posts

  • 1
    Reply
  • Off-Canvas Reflow Issue

    By Richard Getz

    off-canvasReflow

    Hi,    I seem to be asking the wrong question as no one is providing any answers. I posted here previously.    Off-Canvas will not reflow after page load. In particular, the mobile menu does not wrap the body <section> t... (continued)

    Last Reply by Joshua Scott about 3 years ago




My Comments

Richard Getz commented on Richard Getz's post about 3 years

I am currently using dropdown and off-canvas. 
 
I want to insert menus from a template for easy editing, which doT does very well. I would normally do this with includes in PHP, but on this project I am limited to HTML, so doT is my option. 
 
<div id="mobileMenu"><script>addMobileMenu();</script></div>
 
I use this to insert the menu at the point in the page I want. doT + Jquery append. Desktop menu is the dropdown and the mobile menu is the off-canvas. 
 
//////////////////////////////////////////////////
// Mobile Menu //
//////////////////////////////////////////////////

    function addMobileMenu(){
      var mobile_TemplateFile = '/templates/menus/mobile-menu.html',
        mobile_Template,
        $postsDiv = $('#mobileMenu');


        $.get(mobile_TemplateFile, function (template_html) {
            mobile_Template = doT.template(template_html);
        }).done(function() {
          $postsDiv.empty().append(mobile_Template);
      });
    $(document).foundation(); // reset foundation
    $(document).foundation('reflow');
    };

 
The problem is, if the menus are not directly in the HTML, I lose the dropdown and the off-cavas (slide) functionality. 
Thanks 
 
Rafi
 
 

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Richard Getz's post about 3 years

I am currently using dropdown and off-canvas. 
 
I want to insert menus from a template for easy editing, which doT does very well. I would normally do this with includes in PHP, but on this project I am limited to HTML, so doT is my option. 
 
<div id="mobileMenu"><script>addMobileMenu();</script></div>
 
I use this to insert the menu at the point in the page I want. doT + Jquery append. Desktop menu is the dropdown and the mobile menu is the off-canvas. 
 
//////////////////////////////////////////////////
// Mobile Menu //
//////////////////////////////////////////////////

    function addMobileMenu(){
      var mobile_TemplateFile = '/templates/menus/mobile-menu.html',
        mobile_Template,
        $postsDiv = $('#mobileMenu');


        $.get(mobile_TemplateFile, function (template_html) {
            mobile_Template = doT.template(template_html);
        }).done(function() {
          $postsDiv.empty().append(mobile_Template);
      });
    $(document).foundation(); // reset foundation
    $(document).foundation('reflow');
    };

 
The problem is, if the menus are not directly in the HTML, I lose the dropdown and the off-cavas (slide) functionality. 
Thanks 
 
Rafi
 
 

Posts Followed

Following

  • No Content

Followers

  • No Content