How was it done?

It works! It really works!

The idea was given to me by a friend who, due to a great lack of taste didn't like my original picture layout. He suggested that I combine two pages into one, the hidden menu bar I had been working on and the picture page.

In a sense I did what any good designer would do, took several existing ideas put them together in a completely original way.

And while  the code is my own I did swipe the transparency idea from a great site called www.cssplay.co.uk. Please check them out and support them, they have a lot of great tutorials and tools.

The JavaScript came from www.hypergurl.com a wonderful little site, with some handy examples.

The menu was done using a variety of techniques. I used several nested lists and a combination of absolute and relative positioning for the basic structure of the list. The pictures are links within an unordered list and use OnMouseDown, OnMouseOver and OnMouseOut to create the effects you see.

JavaScript was use to swap out the source picture each time a link is moused over. The whole idea produces a cool effect but I used way to much code to do it and the page takes to long to load. One day I would like to go back over this and condense the code.

Menus

An excellent way to bring life to your pages is pictures. Pictures of your products, employees or friends. But every site has pictures. So bring life to your site by adding dynamic menus. Below is an example of a hidden menu with MouseOver effects. To view the pictures run your mouse down the center of the blue sidebar below, then when the menu pops out run your mouse along the menu bar, highlighting each link as you go. To view the full picture without the menu simply move the mouse down and away from the menu or click the link.

Picture Menu (or how to use unordered lists to amaze your friends)

This page last updated on ()

Contact Us | Privacy | Legal | Careers