Home > Articles > Webmaster resources > Navigation Javascripts

Navigation scripts

Make your site easier to use with these nifty routines

Used carefully, these scripts will enable your visitors to get around your site more easily. But make sure that your site is still perfectly navigable with Javascript switched off.

You're allowed to include these scripts on your website for free. A link to this site would be appreciated but is not required. Please note that other content on this website cannot be reproduced without permission. More copyright information

At a glance:

Pulldown form

I've changed the pages referred to in this example so that it's live. In the magazine I talk about pages about different bands, but you can use this to access different parts of this section of the site from here. For convenience, the number of links is kept small here:

<!-- Script by Sean McManus - www.sean.co.uk -->
<form name="navform">
<select name="sections">
<option value="index.shtm">Webdesign home
<option value="https://www.sean.co.uk/books/index.shtm">Books by Sean
<option value="dailybg.shtm">Daily Background changer
</select>
<input type="button" value="Go!" onClick="self.location=navform.sections.options[navform.sections.selectedIndex].value;">
</form>

Keypress divert

This script diverts you to a different page when you press a key. Press the H key now to go to the webdesign homepage.

Paste this code into the HEAD of your HTML document. To add other keys, just add new pairs of lines that define the key letter (always lower case for the script to work) and the website address to divert to.

<script language="JavaScript">
<!-- Script by Sean McManus - www.sean.co.uk
function keyDivert(keyPressed)
{
var whichbrowser = (document.layers) ? keyPressed.which : event.keyCode;
var letterpressed = String.fromCharCode(whichbrowser).toLowerCase();

// next two lines define key and address
if (letterpressed == "h")
{self.location.href="index.shtm";}

}

document.onkeypress = keyDivert;
// --> </script>

You are here

This script takes the website address and turns it into a list of hierarchical links to help visitors climb back up the tree. Make sure that folders and files are sensibly named, and include a default file (usually index.htm or index.html) in each subdirectory which is the menu for that section. This is what it looks like:

You are here

<strong>You are here
<script language="javascript">
<!-- Script by Sean McManus - www.sean.co.uk
var pageaddr=window.location.href;
var doubleslashes=pageaddr.indexOf("//") + 2;
var header=pageaddr.substring(0,doubleslashes);
pageaddr=pageaddr.substring(doubleslashes, pageaddr.length);
var urlsarray=pageaddr.split("/");

for (g=0; g<urlsarray.length; g++)
{document.write (" : <a href=\""+header);
for (h=0; h<g+1; h++)
{document.write(urlsarray[h]);
var endbit=urlsarray[h].substring(urlsarray[h].length-3, urlsarray[h].length);
if (endbit != "htm" && endbit != "tml")
{document.write("/");}}
document.write("\">" + urlsarray[g] +"");}
// -->
</script>
</strong>

Climb back inside frames

If you're using frames to display your navbar, visitors will be lost if a search engine drops them at a page without its surrounding frame. Use this code to plop them back where they belong:

<script language="Javascript">
<!-- Script by Sean McManus - www.sean.co.uk
if (top.location==self.location)
{top.location.href="framesetup.htm";}
// -->
</script>

Related links

Credits

© Sean McManus. All rights reserved.

Visit www.sean.co.uk for free chapters from Sean's coding books (including Mission Python, Scratch Programming in Easy Steps and Coder Academy) and more!

Discover my latest books

Coding Compendium

Coding Compendium

A free 100-page ebook collecting my projects and tutorials for Raspberry Pi, micro:bit, Scratch and Python. Simply join my newsletter to download it.

Web Design in Easy Steps

Web Design IES

Web Design in Easy Steps, now in its 7th Edition, shows you how to make effective websites that work on any device.

100 Top Tips: Microsoft Excel

100 Top Tips: Microsoft Excel

Power up your Microsoft Excel skills with this powerful pocket-sized book of tips that will save you time and help you learn more from your spreadsheets.

Scratch Programming in Easy Steps

Scratch Programming IES

This book, now fully updated for Scratch 3, will take you from the basics of the Scratch language into the depths of its more advanced features. A great way to start programming.

Mission Python book

Mission Python

Code a space adventure game in this Python programming book published by No Starch Press.

Cool Scratch Projects in Easy Steps book

Cool Scratch Projects in Easy Steps

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

Walking astronaut from Mission Python book Top | Search | Help | Privacy | Access Keys | Contact me
Home | Newsletter | Blog | Copywriting Services | Books | Free book chapters | Articles | Music | Photos | Games | Shop | About