HTML5 - Menus - Help.. How to make pages appear as 'sub pages' or content of index.html

Hi.. I'm new at HTML5. I have a simple index page with a menu.
See code below. How do I make the menu behave - so that when they select 'About' from the menu and the href is the about page, That the menu still appears on the About page?
Do  I have to put the menu on all pages?  How do I create a header across all pages?  Does HTML5 have the concept of a 'Master Page'?
thanks


<!DOCTYPE html>
<html lang="en">
	<head>
		
		<meta charset="utf-8">
		<title>Menu</title>
		<link href="style.css" media="screen" rel="stylesheet" type="text/css" />
	
	</head>

<body>
	<div class="wrap">
	
	<nav>
		<ul class="menu">
			<li><a href="about.html">About</a></li>
			

		</ul>
		
	</nav>
	</div>
</body>

</html>

Open in new window

LVL 1
JElsterAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Working sample http://jsbin.com/UnugAwET/1/edit
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="http://jsbin.com/ARahOViZ/1/js"></script>
  <script>
    
    //javascript link http://jsbin.com/ARahOViZ/1/js
    $(function() {  
      $('#one').html(menu1); 
    });  
 </script>
  <script>
    //ajax using http://jsbin.com/OPemIjUw/2
    $.ajax({
      url: "http://jsbin.com/OPemIjUw/2/",
  cache: false
})
  .done(function( html ) {
    $( "#two" ).append( html );
  });
  </script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 
  	<div class="wrap">
	
	<nav id="one">

	</nav>
      <hr>
      <nav id="two">
		
	</nav>
	</div>
</body>
</html>

Open in new window


I have both samples here.  The first one is using an external js file where the only code is
var menu1='<ul class="menu">';
menu1=menu1+'<li><a href="about.html">About one</a></li>';
menu1=menu1+'<li><a href="about.html">Something one</a></li>';
menu1=menu1+'</ul>';

Open in new window


Then a very simple jquery ( I included the jquery library 1.1x so it will work with ie)
$('#one').html(menu1); 

Open in new window

The code above simply says to put the variable menu1 as html to the element with id one.

You will see loading the external js file should load faster then an ajax call which could have a slight delay.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You can use a serverside include, but you have to turn that on I believe.
<!--#include virtual="/ssi/navigation.ssi" -->

If you use a server side language like php or asp it will be similar.
You can use include or require http://www.php.net/manual/en/function.require.php
<div id="nav">
<?php
 require('myNav.php');
?>
</nav>

Open in new window

You can also use a javascript file which can contain javascript or jquery
<script type="text/javascript" src="navigation.js"> </script>
The js file will contain the code for both the navigation and inserting the navigation to your nav or div tag.

You can also use ajax where you have a static html page on your site and use ajax or jquery ajax to insert the html from your navigation.html file to your nav or div tag that contains the navigation.  On that navigation.html file, you just create the navigation code and nothing else.

There are a lot of options.  Statically placing navigation html on every page can work and if you have a change you would do a find and replace.  However, this is pretty cumbersome.

Are you using a serverside language?
0
 
JElsterAuthor Commented:
I would prefer not do server side.
Can you point me to a sample using navigation.js
thx
0
 
grayeCommented:
Just a note... (no points please)

The folks  working on the HTML5 standard deliberately did NOT include a feature that works like an "include directive".  

Their thinking was that this is not something that should be part of the HTML5 standard since it would be better be done via some server-side scripting.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.