You are here:About>Computing & Technology>JavaScript> Site Navigation> Menus>        Collapsible Menus     
About.comJavaScript

Collapsible Menu

1. Introduction

clr gif

Navigation menus can take up a lot of space on the screen. Mostly your visitors are looking at your web page to see the page content but they need the navigation as well in order to be able to find their way between the pages on your site. One way to satisfy both of these needs is to hide most of the navigation links away except when your visitors actually want to see the navigation. There are a variety of ways to hide menus away one of which is to have various sections of the menu collapse (disappear) when they are not needed. By opening and collapsing different sections of the menu as required the maximum amount of space is available on the page to display the actual page content.

An example of a collapsible menu appears at the top right of the content section of this page. The menu contains links to the other pages on setting up a collapsible menu as well as two other menu types that can also be used to save screen space.

If you want to add collapsible menus like this to your page then the first thing you need to di is to obtain the head script. If you prefer one of the alternative menu styles then simply select the appropriate option from the collapsible menu above to go straight to the required page.

From Stephen Chapman,
Your Guide to JavaScript.
FREE Newsletter. Sign Up Now!
Newsletters & RSSEmail to a friendSubmit to Digg
 All Topics | Email Article | | |
Advertising Info | News & Events | Work at About | SiteMap | Reprints | HelpOur Story | Be a Guide
User Agreement | Ethics Policy | Patent Info. | Privacy Policy©2008 About, Inc., A part of The New York Times Company. All rights reserved.