You are here:
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:
<form name="navform">
<select name="sections">
<option value="index.shtm">Webdesign home
<option value="http://www.sean.co.uk/list.shtm">Join the mailing list
<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 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
<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
for (h=0; 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 by Sean McManus - www.sean.co.uk
if (top.location==self.location)
{top.location.href="framesetup.htm";}
// -->
</script>
Related links
- Drop down menu maker - visual tool for making dropdown menus
- If Goya had learned Javascript - famous painter demystifies Javascript rollovers
- Javascript Smart Marketing Toolkit - make your site more responsive with these tools for managing cookies, reacting to times and dates and cycling banner adverts
- Syndication scripts - promote your website by syndicating its content to other sites. This tutorial shows how.
- Javascript include file creator - takes the hard work out of making Javascript syndication files
- Javascript delay / wait / pause script - want to set something to happen after a delay or want to pause the program? See this concise guide and naughty script.