Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

What are some ways to make one navigation menu for all pages of a website?

This is a very basic question, I'm sure, but I have yet to find any tutorials that cover it. How do I make a single navigation menu (like a single HTML file) that I can use on all or multiple pages of a website?

Is there a standard method of doing this?

4 Answers

Alan Mattan贸
PLUS
Alan Mattan贸
Courses Plus Student 12,188 Points

Yes , If you follow this course

http://teamtreehouse.com/library/build-a-simple-php-application

You will make one navigation menu for all pages of a website at the section "Creating the Menu and Footer".

That's perfect! Thanks!

Including HTML within HTML is not yet supported although has been recommended by W3C. For the moment you will have to look into the PHP route where you can split the template up into many different parts and to be honest PHP is very simple to learn and a VERY powerful tool.

For example in PHP I could do this;

<?php
  include('header.html');
  include('main.html');
  include('footer.html');
?>

This would then use the header and footer html files (header would have navigation in it) and the main.html file would be the content. And then when user changes page we load different content. But this is really a basic example to show the power of PHP. For example (again) we could have a url like www.mysite.com/index.php?page=main (or page=contact) which determines what page to load and very simple PHP code to load it like this;

<?php
include('header.html');
include($_GET['page'].".html");
include('footer.html');
?>

Hope this isn't too overwhelming - just wanted to show you how great PHP is together with HTML!

Thank you for the answer - it's very helpful. I guess I'll have to learn some PHP.

Are people still building sites where each page has it's own navigation coded directly into it? It seems like this would be a nightmare to maintain.

Have a watch of the video here - HTML standalone is quite rare and more common on website with pure static content. Even these nowadays are being replaced by Blog systems and CMS's.

PHP is very easy to use and a great place to expand your existing skillset on.

Unfortunately there is no easy way to do it in regards to a front end approach but a one page website would be the easiest way to do it.

You could always create a template that includes everything but the page content if you already know what pages you'll have on the site but its when changes are made that is the difficult part And the most time consuming.

dan lematy
dan lematy
4,157 Points

Well you could always use javascript, so when the page loads, load in the html

Like so

$(function(){
     $('body').prepend('<div id="menu">Add your links etc here</div>');
});