Menu icon Foundation
Off-Canvas Not Working When Imported From Template

Thank you for taking the time to look into my issue.

 

Foundation 5.5.3

Off-Canvas & Dropdown not working

Loading meus via doT template (http://olado.github.io/doT/).

 

After page loads...

$(document).foundation();

$(document).foundation('dropdown','reflow');

$(document).foundation('offcanvas','reflow');

 

 

If the menus are in the HTML, they work flawlessly, however, when I try to import them, the functionality is broke. It does not matter by which method I try to import. If the menu is not in the page on first load, functionality is broke. Trying to reflow does not help.

Please advise.

off-canvasReflowdropdownfoundation 5.5.3

Thank you for taking the time to look into my issue.

 

Foundation 5.5.3

Off-Canvas & Dropdown not working

Loading meus via doT template (http://olado.github.io/doT/).

 

After page loads...

$(document).foundation();

$(document).foundation('dropdown','reflow');

$(document).foundation('offcanvas','reflow');

 

 

If the menus are in the HTML, they work flawlessly, however, when I try to import them, the functionality is broke. It does not matter by which method I try to import. If the menu is not in the page on first load, functionality is broke. Trying to reflow does not help.

Please advise.

Rafi Benkual about 3 years ago

Are you loading the dropdown after the page loads?

What is the design you are trying to achieve for this?

Richard Getz about 3 years ago

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