Solved

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

Posted on 2014-01-02
5
1,712 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
[X]
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
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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 …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

749 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