Solved

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

Posted on 2014-01-02
5
1,644 Views
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'?
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

0
Comment
Question by:JElster
  • 2
5 Comments
 
LVL 52

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">
<?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
 
LVL 1

Author Comment

by:JElster
ID: 39752853
I would prefer not do server side.
Can you point me to a sample using navigation.js
thx
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39752917
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
 
LVL 41

Expert Comment

by:graye
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.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

860 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