Things you want to know about websites


Pop-out menus

These menus are very common and many platforms use these type of menus. The start menu in you operating system is also a pop-out menu. The main feature of these menus is having submenus which appear normally by poping out horizontally when you move your mouse pointer or focus over them.


See the image below,

pop out menu

There are some enhancements to pop-out sytle where the sub menu pops out by sliding, making it a slide-out or fly-out menu or by using fade effect or dissolving effect, but still the most common i have seen is still simple pop-out style.

Creating the Menu

These menus can be made by using html and css only but there is a problem with this, Internet explorer does not support css hover functionality other than achor elements, which makes it useless on internet explorer. So, the best solution i think, that works with every browser is to use javascript.

Example Code

The example code i am going to show you here uses Html, CSS, Javascript and DOM(Document Object Model) for dynamic effects. To keep it simple, it just shows how the menu works and has no fancy stuff. 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 :

Drop-down menus


Expand Collapse Menus
Directory Style Menus
Navigation Methods

Link to this page :

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