Sliding Menu

One of the important things to consider when placing navigation links on your web page is just how much of the space on the page will be taken up with your navigation menu and how much is allocated to content. Remember that your visitors are visiting primarily to see the content but need the navigation to be able to find their way around your site.

The ideal solution is to use most of your page to display the content and have a way for your visitor to access the site navigation when they need it. One way to achieve this goal is to place the navigation into a menu box that is mostly hidden off the side of the screen until such time as it is required and which slides into view when needed.

To add a sliding menu to your web page you first need to select the code from the text box below (there is a highlight all button beneath it to make this easier) and copy it into a file called slideh.js.

JavaScript

You also need to obtain the stylesheet code by selecting the code from the text box below and copy it into a file called slide.css.

CSS

The next step is to link these two files into the head of your page using the following code:

<script type="text/javascript" src="slideh.js">
</script>
<link rel="stylesheet" href="slide.css" type="text/css"/>

To create the menu that will actually appear you just need to copy the following HTML and insert it immediately after the body tag on your page. The part of the code shown in bold needs to be included exactly as shown. You substitute the links for your own menu in place of the sample <a> tags.

<div id="smenu"><div id="sleft">
<a href="blsmenu.htm">Part 1: Introduction</a><br />
<a href="blsmenu1.htm">Part 2: The Script</a>
</div><div id="sright"><a href="#"
onclick="return slide();return false;"
>M<br />E<br />N<br />U</a></div></div>

You can include as many menu entries as you like and the menu will take up more space down the page. It will only take up 50 pixels of space horizontally except when it is opened out onto the page at which time it will be 250 pixels wide.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate