It's Sean!

UK freelance journalist, author
and writer Sean McManus

Printed from www.sean.co.uk. © Sean McManus.
Home > Articles > Webmaster resources > Javascript examples > 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="http://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

Books by Sean McManus

Scratch Programming in Easy Steps

Scratch Programming in Easy Steps

Raspberry Pi For Dummies

Raspberry Pi For Dummies

Learn to program with the Scratch programming language, widely used in schools and colleges.

Set up your Pi, master Linux, learn Scratch and Python, and create your own electronics projects.

Coder Academy

Coder Academy

Cool Scratch Projects in Easy Steps

Cool Scratch Projects in Easy Steps

Learn to make games and other programs in Scratch 2.0, and make a web page in HTML, with this highly interactive book for 7-10 year olds.

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

More books

Recommended articles

Stylised coloured photo of a synth

Discover my music and home recording articles

Interested in starting home recording? Follow me as I start recording, using instruments such as the Novation MiniNova and Korg Kaossilator, and share my synth and sample-based music online.

Scratch cat and rainbow circle

10-block demos for Scratch programming

Lots of people of all ages are learning to program with Scratch. Discover some useful tricks and techniques in my 10-block Scratch demos, including special effects you can drop into your games.

Paper Raspberry Pi case

Download free book chapters and more!

Download a free case for your Raspberry Pi, and free chapters from my books about the Raspberry Pi, Scratch, web design and more!

©Sean McManus. www.sean.co.uk.