It's Sean!

UK freelance journalist, author
and copywriter 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="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