Solved

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

Posted on 2014-01-02
5
1,489 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now