[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now


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

Posted on 2014-01-02
Medium Priority
Last Modified: 2014-01-17
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'?

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

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



Open in new window

Question by:JElster
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39752595
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">

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?

Author Comment

ID: 39752853
I would prefer not do server side.
Can you point me to a sample using navigation.js
LVL 54

Accepted Solution

Scott Fell,  EE MVE earned 2000 total points
ID: 39752917
Working sample http://jsbin.com/UnugAwET/1/edit
<!DOCTYPE html>
<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>
    //javascript link http://jsbin.com/ARahOViZ/1/js
    $(function() {  
    //ajax using http://jsbin.com/OPemIjUw/2
      url: "http://jsbin.com/OPemIjUw/2/",
  cache: false
  .done(function( html ) {
    $( "#two" ).append( html );
<meta charset=utf-8 />
<title>JS Bin</title>
  	<div class="wrap">
	<nav id="one">

      <nav id="two">

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>';

Open in new window

Then a very simple jquery ( I included the jquery library 1.1x so it will work with ie)

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.
LVL 41

Expert Comment

ID: 39775411
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.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question