Click here to Skip to main content
12,356,784 members (66,408 online)
Click here to Skip to main content
Add your own
alternative version


16 bookmarked

Sliding JavaScript Menu

, 3 Sep 2009 GPL3
Rate this:
Please Sign up or sign in to vote.
Easily build and customize your very own sliding JavaScript menu.



I wanted to make a menu that slides across the page into its final position. I needed something customizable and extendable, and I wanted something that would work across browsers. A few hours of coding later I got this mean menu, and I'd like to share it with you.

Using the code

To get the sliding JavaScript menu working for your site, save the source files to your web server. Open MenuTemplate.html with a text editor and change it to match your website. Next, save MenuTemplate.html and open it with a web browser. What loads will be the output JavaScript file for your menu. Copy the text area and save it to a file named OutputMenu.js. Now, open ViewFinalMenu.html and your menu will slide into view. Tweak the menu accordingly and add it to your site by adding the external JavaScript reference and calling LoadMenu() from the body's onload event.

<textarea runat="server" rows="678" 
      wrap="off" style="width: 525px; overflow-y: hidden">
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 


The first version of the JavaScript menu required a handful of changes if you wanted to add or remove elements. Now, I have created a JavaScript framework that writes the output JavaScript, making changes take seconds not minutes.


This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


About the Author

Andrew S. Kloos
Software Developer (Senior) IMS Company
United States United States
I've been programming for about six years now and thankfully its not one of those fields that stagnates year after year. Programming always feels new and it forces you to learn new things and if you don't stay on top of the newest standards you'll be looking for a different line of work.

Programming is fun… after you get past the excruciating part.

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160621.1 | Last Updated 3 Sep 2009
Article Copyright 2009 by Andrew S. Kloos
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid