Things you want to know about websites


Expand-Collapse menus

In Expand-collapse menus, when you click a menu item it opens by expanding down(therefore expands) and shows the sub-menu. When you click the menu item again it closes by collapsing up(therefore collapses).


See the image below,

expand collapse menu

Based on choice, one can design either a menu in which opening a second menu item closes the first menu item automatically or a menu which remains open untill you close the first item manually.

These menus are not used much on websites, mainly because when they expand they push other objects out of their way taking up more space and disturbing the effective layout of the page, thus creating a problem. Anyway, i am mentioning it for completion purposes and who knows you may use it sometime.

Creating the Menu

Code Example

The example i am going to show you here is a simple three items menu. It uses Html, CSS, Javascript and DOM(document object model) for dynamic effects. Lets see the example,

Just copy and paste the following code in a text editor, save it with in an html file extension and run it in your browser.

Bookmark or Add to Favourites

Next :

Dirctory-style menus


Pop out Menu
Drop down Menu
Navigation Methods

Link to this page :

Copy and paste the following code in an html document to link to this page,