Creating Sliding Menus

Are you tired of sites that have the same old sidebar navigation? Are your menus taking more and more valuable screen real estate from the content? Are your pages cluttered with links that visitors need only when they're navigating, not when they're focusing on the content?

If you answered "yes" to any of these questions, I have a simple solution: Let visitors pull out or put away menus as needed.

In this example (Figures 23.10 and 23.11), a tab appears on the left side of the screen. When clicked, the menu slides out from the side of the screen and slides back when clicked again.

Figure 23.10. The sliding menu tab is visible in the top left corner of the screen.

Figure 23.11. The menu is fully extended and can be used to navigate the site.

To set up a sliding menu:


var open = 0;

Initialize the variables (Code 23.6):

Code 23.6. The setMenu() function prepares the menu for the slideMenu() function, which animates the slide.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1-strict.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Creating a Sliding Menu</title> <script type="text/javascript"> var open = 0; var slideSpeed = 5; var object = null; function setMenu (objectID) {      object = document.getElementById (objectID);      if (open) {         fX = 15 - (object.offsetWidth);         cX = 0;         open = 0;      }      else {         fX = 0;         cX = 15 - (object.offsetWidth);         open = 1;      }      slideMenu(cX,fX); } function slideMenu (cX,fX) {         if ((open==0) && (cX > fX)) {            cX -= slideSpeed;   = cX + 'px';            setTimeout('slideMenu(' + cX + ',' + fX + ')', 0);         }       else if ((open==1) && (cX < fX)) {         cX += slideSpeed; = cX + 'px';         setTimeout('slideMenu(' + cX + ',' + fX + ')', 0);       }    else return; } </script> <style type="text/css"> body { url(alice23.gif) no-repeat; } h1 {      font:small-caps bold italic 2.5em Georgia, 'Times New Roman', times, serif;      color: red; } h2 { color:#999; } .page {      position: relative;      top: 190px;      left: 165px;      width: 480px; } #menu01 {      position: fixed;      width: 175px;      top: 0px;      left: -160px; } .menuControl {      width: 15px;      float: right; } .menuOptions {      font-size: 12px;      font-family: arial, Helvetica, sans-serif;      width: 158px;      float: right;      background-color: #ccc;      border: 1px solid #999; } .menuOptions a {      display: block;      text-decoration: none;      padding: 4px 4px;      color: red;      border-bottom: 2px solid white; } </style> </head> <body> <div > <div  onclick="setMenu('menu01')">       <img src="/books/3/292/1/html/2/menuTab.gif" height="100" width="15" alt="Menu" /> </div> <div > <a href="index.html" >Introduction</a> <a href="ch01.html">Down The Rabbit- Hole</a><a  href="ch02.html">The Pool of Tears</a><a href="ch03.html">A Caucus- Race and a Long Tale</ a><a href= "ch04.html">The Rabbit Sends in a Little Bill</a><a href="ch05.html">Advice from  a Caterpillar</a><a href="ch06.html">Pig and Pepper</a><a href="ch07.html">A Mad Tea-Party< /a><a href="ch08.html">The Queen's Croquet-Ground</a><a href= "ch09.html">The Mock Turtle's  Story</a> <a href="ch10.html">The Lobster Quadrille</a> <a href="ch11.html">Who Stole The  Tarts?</a><a href="ch12.html">Alice's Evidence</a>    </div></div> <div >      <h1>ALICE'S ADVENTURES IN WONDERLAND</h1> Lewis Carroll      <h2>THE MILLENNIUM FULCRUM EDITION 3.0</h2> </div> </body></html>

  • open records whether the menu is open or closed.

  • slideSpeed records how many pixels the menu should move in an animation cycle. The larger the number, the faster the menu appears to move.

  • object records the object's address on the screen. This is initially set to null.


function setMenu (objectID) {…}

Add setMenu() to your JavaScript.

This function sets the starting (cX) and final (fX) points for the sliding menu, based on whether the menu is open or not. cX defines the current location of the left edge of the menu and is calculated based on the menu's width minus the width of the tab (offsetWidth).

When cX is -160, for example, the first 160 pixels of the menu are off the screen to the left. Only the menu tab, which is about another 20 pixels, is visible on the screen, and the menu is closed.

When cX is 0, the left edge of the menu is against the left edge of the window, and the menu is open. This function also resets the open variable to 0 (closed) if it was open, or 1 (open) if it was closed. The last thing it does is start the slideMenu() function.


function slideMenu (cX,fX) {…}

Add slideMenu() to your JavaScript. This function first checks to see whether the current position (cX) is equal to the final position (fX). If so, the function stops running. If the positions are not the same, the function subtracts or adds a number of pixels (based on the slideSpeed variable set in Step 1) to cX, depending on whether the menu is opening or closing.

It also sets the left edge of the menu to this new position. The function then starts over with the new cX value. slideMenu() continues to loop this way until cX increases or decreases to equal fX, creating the illusion that the menu is sliding across the screen.


#menu01 {…}

Set up a CSS rule for the menu (or for each menu) that will be sliding around your page. You will want to set its position as absolute or fixed (depending on whether you care about earlier versions of Internet Explorer). You'll also want to set its left position so that the menuOptions area is off the screen to the left, but the menuControl (the tab) is peeping out.


.menuControl {…} .menuOptions {…}

Add classes to define the menuControl and menuOptions areas of your sliding menu. The width you set for the menuOptions (including any padding and borders) determines the left position you set for the menu (see Step 4).


<div  onclick= "setMenu('navigation');">…</div>

In the body of the HTML, create the menu with an event handler used to trigger the sliding. You can put anything you want in the slideout (text, pictures, dynamic content, forms, etc.). I set up a menu of links.


  • You can set up as many menus as you want, each in its own <div> element and each with a unique ID. Make sure to move the top margin down for each menu so that it doesn't overlap the menu above it. You can use any type of content in the <div> elementsgraphics, hypertext links, forms, and so onto create your menus.

  • What happens in earlier browsers that do not support CSS or DHTML depends on how you construct the HTML for the menu. In this example, the menu would simply appear above the page content.

  • Not all visitors to your Web site will be using JavaScript. For more details on how to handle this, see the sidebar "Navigation for Nondynamic Browsers."

Navigation for Nondynamic Browsers

Almost everyone surfing the Web today uses a browser that supports JavaScript. But a few browsers don't support it, and some people turn JavaScript off in their browsers.

You still need to provide these Web surfers some basic navigation and possibly some content that you otherwise would include dynamically.

Simply use the <noscript> tag to hold content that is only to be seen if JavaScript is not available:


Content for non-dynamic browser goes here


The result is that browsers that do not support scripting languages ignore the <noscript> tags and display whatever is between them.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: