Web 2.0 Navigation Crash Course

HTML-DYNAMIC DRIVE NAV SAMPLEThis is a beginners guide to creating a site-wide navigation that is consistent from page to page.

Tired of keeping track of multiple Menu’s on different pages? As your site grows, adding 1 new page to 25 other pages’ navigation can become a full time job. I’ll show you how easy it really is to make a single navigation that will save you time and headaches!

For this you’ll need:

  1. Guts
  2. A little understanding of HTML CSS and PHP (Not Really)
  3. Notepad++ (Or any HTML editor)
  4. A copy of DDtabmenu From Dynamic Drive (This file)

1. Let’s start off with the code you’ll need. The Three Parts are:

A. The CSS include, paste this in the header of your html.

<link rel="stylesheet" type="text/css" href="/solidblocksmenu.css">

B. The Javascript Magic,  paste this near the top of your html.

<script type="text/javascript" src="/ddtabmenu.js"></script>
<script type="text/javascript">ddtabmenu.definemenu("ddtabs1", auto)
</script>

To make adjustments, you can change the tab_menu_id to whatever HTML id your using for your menu, and the number after the comma will select which link is highlighted.
SYNTAX: ddtabmenu.definemenu(“tab_menu_id”, integer OR “auto”)
//initialize Tab Menu with ID “ddtabs1” and select 1st tab by default

C. The HTML for the Links

<div id="ddtabs1" class="basictab">
<ul>
<li><a href="http://green.cx/" rel="sc1">Home</a></li>
<li><a href="http://green.cx/Link1.htm" rel="sc2">Link1</a></li>
<li><a href="http://green.cx/Link2/" rel="sc3">Link2</a></li>
<li><a href="http://green.cx/Link3/">Link3</a></li>
<li><a href="http://green.cx/Link4">Link4</a></li>
</ul>
</div>

D. The HTML for the Subtitles

<DIV class="tabcontainer">

<div id="sc1" class="tabcontent">Sub contents here</div>
<div id="sc2" class="tabcontent">Sub contents here</div>
<div id="sc3" class="tabcontent">Sub contents here</div>

</DIV>

2. Now The Required files you need on your server

Download this file and extract the contents to the root of your webserver, using a FTP client like FileZilla.

And, Volia! You should have a nice HTML/CSS Navigation on your site, but you don’t want to copy/paste this to EVERY page on your site right?
What if you needed to change a link or fix a typo? That would be a LOT of editing for a site with more than a hand full  of pages.

So we get around that using a simple PHP include file.

Woah! Don’t get nervous, this is actually really easy, just keep following along!

Now making that nice flashy menu and making it a PHP include is really quite easy.

First off I feel the need to make it clear, your server needs to support PHP. (Of course)

Start off Coping the HTML code for the MENU and the Subtitles, into a new document, named nav.inc

nav.inc Contents

<div id="ddtabs1">
<ul>
<li><a href="http://green.cx/" rel="sc1">Home</a></li>
<li><a href="http://green.cx/Link1.htm" rel="sc2">Link1</a></li>
<li><a href="http://green.cx/Link2/" rel="sc3">Link2</a></li>
<li><a href="http://green.cx/Link3/">Link3</a></li>
<li><a href="http://green.cx/Link4">Link4</a></li>
</ul>
</div>
<DIV>
<div id="sc1">Sub contents here</div>
<div id="sc2">Sub contents here</div>
<div id="sc3">Sub contents here</div>
</DIV>

Now rename your index.html file to index.php

Keep the CSS and Javascript in the header as per usual.

But where the Menu was located, replace it with this code.

<?php
include ("/nav.inc");
?>

That should put the contents of the navigation include file whenever this line is called. But notice! It will only work when the index (or any file on the server) ends with .php

Give it a try!


//DD Tab Menu- Script rewritten April 27th, 07: http://www.dynamicdrive.com
//**Updated Feb 23rd, 08): Adds ability for menu to revert back to default selected tab when mouse moves out of menu

//Only 2 configuration variables below:

var ddtabmenu={
disabletablinks: false, //Disable hyperlinks in 1st level tabs with sub contents (true or false)?
snap2original: [true, 300], //Should tab revert back to default selected when mouse moves out of menu? ([true/false, delay_millisec]

currentpageurl: window.location.href.replace(“http://”+window.location.hostname, “”).replace(/^//, “”), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)

definemenu:function(tabid, dselected){
this[tabid+”-menuitems”]=null
this[tabid+”-dselected”]=-1
this.addEvent(window, function(){ddtabmenu.init(tabid, dselected)}, “load”)
},

showsubmenu:function(tabid, targetitem){
var menuitems=this[tabid+”-menuitems”]
this.clearrevert2default(tabid)
for (i=0; i<menuitems.length; i++){
menuitems[i].className=””
if (typeof menuitems[i].hasSubContent!=”undefined”)
document.getElementById(menuitems[i].getAttribute(“rel”)).style.display=”none”
}
targetitem.className=”current”
if (typeof targetitem.hasSubContent!=”undefined”)
document.getElementById(targetitem.getAttribute(“rel”)).style.display=”block”
},

isSelected:function(menuurl){
var menuurl=menuurl.replace(“http://”+menuurl.hostname, “”).replace(/^//, “”)
return (ddtabmenu.currentpageurl==menuurl)
},

isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type==”mouseover”)? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},

revert2default:function(outobj, tabid, e){
if (!ddtabmenu.isContained(outobj, tabid, e)){
window[“hidetimer_”+tabid]=setTimeout(function(){
ddtabmenu.showsubmenu(tabid, ddtabmenu[tabid+”-dselected”])
}, ddtabmenu.snap2original[1])
}
},

clearrevert2default:function(tabid){
if (typeof window[“hidetimer_”+tabid]!=”undefined”)
clearTimeout(window[“hidetimer_”+tabid])
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : “on”+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

init:function(tabid, dselected){
var menuitems=document.getElementById(tabid).getElementsByTagName(“a”)
this[tabid+”-menuitems”]=menuitems
for (var x=0; x<menuitems.length; x++){
if (menuitems[x].getAttribute(“rel”)){
this[tabid+”-menuitems”][x].hasSubContent=true
if (ddtabmenu.disabletablinks)
menuitems[x].onclick=function(){return false}
if (ddtabmenu.snap2original[0]==true){
var submenu=document.getElementById(menuitems[x].getAttribute(“rel”))
menuitems[x].onmouseout=function(e){ddtabmenu.revert2default(submenu, tabid, e)}
submenu.onmouseover=function(){ddtabmenu.clearrevert2default(tabid)}
submenu.onmouseout=function(e){ddtabmenu.revert2default(this, tabid, e)}
}
}
else //for items without a submenu, add onMouseout effect
menuitems[x].onmouseout=function(e){this.className=””; if (ddtabmenu.snap2original[0]==true) ddtabmenu.revert2default(this, tabid, e)}
menuitems[x].onmouseover=function(){ddtabmenu.showsubmenu(tabid, this)}
if (dselected==”auto” && typeof setalready==”undefined” && this.isSelected(menuitems[x].href)){
ddtabmenu.showsubmenu(tabid, menuitems[x])
this[tabid+”-dselected”]=menuitems[x]
var setalready=true
}
else if (parseInt(dselected)==x){
ddtabmenu.showsubmenu(tabid, menuitems[x])
this[tabid+”-dselected”]=menuitems[x]
}
}
}
}

We will be happy to hear your thoughts

Leave a reply

Skip to toolbar