Navigation may be the cornerstone to the usability of any website, but there’s no reason why such a feature should become a pivotal component to your standard page layout. As we continue our quest into the most suitable navigation method, it’s time to take a closer look at the sliding navigation bar. This method enables constant access to as much of a site as we feel fit, without detracting from the core page content by hiding itself off the page (only to be displayed when the user prompts).

Click here to get the files for this tutorial.

The code
Dig out the key files index.htm, findDOM.js and menu.gif from the CD and copy them over to your system. These files form the core elements we’ll need to explore how the sliding menu method works, with index.htm providing the core web page, findDOM.js the necessary Document Object Model detection Javascript code, and the menu.gif graphic, that acts as the visual prompt to the existence of the menu. The only file we’re going to focus on is the index.htm file. The findDOM.js file can remain untouched as this provides a function we’ve already discussed in a previous Masterclass but, if you need reminding, take a look back at the first part in this series.

Check out the script
View the code to the index.htm file and, following the opening lines, you’ll find the reference to the external findDOM.js file which determines the viewer’s chosen browser Document Object Model. This is then followed by the Javascript that controls the sliding action of the actual menu. The open variable dictates whether the menu is open or closed, and we’ll look more into this within the following function. Feel free, however, to change the slideDelay value, as this records the delay in animating the slide – a larger number means a slower delay but will result in jerky motion. The domStyle variable records the DOM settings for the menu and should also be left unchanged:

function setMenu (objectID) {…} 

The first function sets the starting (cX) and final (fX) points for the sliding menu, based on whether the menu is open or closed. cX defines the current location of the left edge of the menu and ranges between -80 and zero. The low value depends on the width of your menu minus the width of the tab. When cX is -80, the first 80 pixels of the menu are off the screen to the left. Only the menu tab graphic, which is a a further 20 pixels, remains visible and the menu appears closed. When cX is zero, the left edge of the menu is positioned against the left edge of the window and the menu is fully visible. This function also resets the open variable to zero (closed) if it was open, or one (open) if it was closed. The last thing it does is start the slidemenu() function.

function slideMenu (cX,fX) {…} 

The second function checks whether the current position (cX) is the same as the final position (fX) and, if so, stops the function from running. If not, the function will add or subtract two pixels to cX, depending on whether the menu is opening or closing. It also sets the left edge of the menu to this new position before resuming with the new cX value. The function then continues this loop until cX is equal to fX, which provides the illusion of movement to the menu.

Navigation appearance
We’ve embedded a simple style sheet into the page. Other than the font preferences within the opening body class, you’ll notice we’ve set the left-hand margin to 30 pixels to compensate for the sliding menu tab that sits along the left-hand side of the browser.

Similarly, the concluding link attributes shouldn’t present any unusual features, specifying the font, size and colour to be used throughout the page (including the navigation bar) and giving a simple underlined effect when the mouse is passed over the link.

#mainMenu {…} 

The mainMenu ID works in conjunction with the HTML table that contains the actual navigation bar itself. As you’ll see later on, we’ve defined this table to have a width of 100 pixels, but by offsetting the position of this layer with a -80px setting, we’ve managed to hide the majority of the menu to reveal only the menu.gif graphic that will act as the trigger to launch the Javascript functions necessary to reveal the entire menu.

Both the left and top values can be freely adapted to better suit the dimensions of your own navigation bar, though you’ll need to bear in mind that the fX and cX settings will need appropriate adjustment within the opening setMenu function for this to perform as you’d expect. Continuing into the body of the HTML code, you’ll find the table that contains the navigation links as well as the menu.gif image and its associated link, which prompts the opening setMenu function that triggers the menu.

Testing the results
Using Dynamic HTML to control the effect through Javascript, CSS and layers, the resulting page should work without any problems on any current browsers you care to test it on. There will be problems with older browsers that don’t recognise such technologies, but even these shouldn’t present too many problems, as the layout we’ve used will simply mean that the sliding table should be positioned towards the left-hand side of the page, taking on the appearance of a more traditional flat HTML navigation column. Building a page around such a feature shouldn’t present too many problems, as long as you bear in mind the 30 pixel gutter defined within the CSS attributes for the main body tag.

As you can see, the navigation method allows for easy access to a site’s core navigation without detracting from the core content of the page. Using these methods, you can choose to embed only core links through to primary pages within your site or, using methods we discuss below, you could choose to create independent sliding menus that provide deeper access, with separate sliding menus that cater for different sections of your site.