Menu icon Foundation
Is there a way to imbed nav bar and footers

Hi

im sure this is a naive question but I have searched a lot and not found an answer. 

Can an I put the code for my nav menus and footer in separate files and have those files dynamically loaded inline as the page loads. The idea, of course, is I don't want to have to edit the nav bar and footer on each page. I don't think HTML can embed another HTML file directly. Obviously some JavaScript will be involved. But is there an efficient 'Foundation' way of doing this?

FYI I am new to JavaScript. I have developed several PHP-only sites in the past where this is easy to do. I don't know why I resisted leaving JS for so long. Could have saved myself hundreds of hours doing backflips to do in PHP which I now see is so much easier in JavaScript. I am a convert!!

Thanks in advance for what to most of you will probably be a stupid question. 

 

...Dale

Imbedincludenav-barsMenusfooters

Hi

im sure this is a naive question but I have searched a lot and not found an answer. 

Can an I put the code for my nav menus and footer in separate files and have those files dynamically loaded inline as the page loads. The idea, of course, is I don't want to have to edit the nav bar and footer on each page. I don't think HTML can embed another HTML file directly. Obviously some JavaScript will be involved. But is there an efficient 'Foundation' way of doing this?

FYI I am new to JavaScript. I have developed several PHP-only sites in the past where this is easy to do. I don't know why I resisted leaving JS for so long. Could have saved myself hundreds of hours doing backflips to do in PHP which I now see is so much easier in JavaScript. I am a convert!!

Thanks in advance for what to most of you will probably be a stupid question. 

 

...Dale

Dale Dietrich over 2 years ago

OK, wow, meme. I think you sold me on just living with cutting and pasting my footers and headers back and forth between files! :)

Thanks.

meme over 2 years ago

There are other ways if you do not need to stay strictly to the way of working .
http://fab.cba.mit.edu/classes/863.15/section.CBA/people/Shtarbanov/OneMenuForAllPages.html

Rafi Benkual over 2 years ago

You can use handlebars for this. The ZURB Stack has Panini built in which is a handlebars templating engine. Learn more: 

http://zurb.com/university/lessons/panini-a-delicious-way-to-optimize-your-workflow

meme over 2 years ago

yes of course...and a time investment for someone just doing one site...
Love the zurb stack...I am using it...works great...love the building blocks too!
Things can go wrong though and if someone wants a quick fix for one site...they need to plan on a solid block of time to devote to getting this working...
The MIT solution is just a quick fix for someone who is not invested in going through the configuration of their system.

Foundation cli ---love it!

Scott Koons over 2 years ago

I recently used partials to accomplish this task.  I created a partial called nav_links.html.  

<li><a href="#">beer</a></li>
<li><a href="#">food</a></li>
<li><a href="#">locations</a></li>
<li><a href="#">store</a></li>
<li><a href="#">banquets</a></li>
<li><a href="#">reservations</a></li>

then, I added the partial into various nav elements.  This way I only have to update, add, delete, and etc through one file.  Works great for needing variations based upon breakpoints.

Daren Barry over 2 years ago

 Yes there are several ways to do this, one of my favorites would be using PHP. Create a folder called includes (just like your css folder, images folder etc... place on the root) in the includes folder, create a file named links.php

 

Place your repeated code in links.php

 

Then place: 

<?php include("includes/links.php"); ?>

 

on each page where you want the links.

 

for more info you can reach out to me at www.web4uinc.com

 

Dale Dietrich over 2 years ago

Thanks Darren.  Yes, as I wrote in my original question, the way you are suggesting is the way I've always done it in PHP. Easy peasy. Was just thinking there must be an easy way to accomplish the same thing with HTML and Javascript but it appears there is not.

Daren Barry over 2 years ago

PHP is better at doing this than using HTML or Js. Another option is using a Framework like Laravel - but it depends on what you're trying to accomplish and the type of sites you're building