JavaScript

  1. Home
  2. Computing & Technology
  3. JavaScript

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.

Explore JavaScript

About.com Special Features

Build Your Own Website

Step-by-step advice on how to do everything from choosing a Web host to promoting your content. More >

Connect Your Home Computers

Easy ways to connect two computers for networking purposes. More >

JavaScript

  1. Home
  2. Computing & Technology
  3. JavaScript

©2009 About.com, a part of The New York Times Company.

All rights reserved.