Is this menu possible to make?

Hi I'm trying to make a navigation menu, which looks like a stack of bricks. But when you hover over the brick slides out and stays out when clicked. I've added a quick sketch to give you an idea what I'm talking about.

I am presuming I would need to use flash??

Is this possible?? If so could you please point me to a tutorial that would help as so far I can only find simple slide out menu tutorials.

 

I would say its possible, but i don't know flash. So i would not have a clue sorry.

 

I would think this is possible without the use of flash. Probably just images, css, xhtml and jquery.

 

ok I've kinda got it to work using HTML & CSS see Here but is there a way to make them go behind each other?? I tried using z-index but it made no difference.??

 

Assign a class to each li then apply position relative.

<ul id="navlist">
  <li id="active" class="brick1"><a href="#" id="current"></a></li> 
  <li class="brick2"><a href="#"></a></li>
</ul>

Code (markup):

then css:

#navlist li{
 position:relative;}

li.brick1{
 z-index:5;}

li.brick2{
 z-index:4;}

Code (markup):

 

Its a pretty simple Flash thing, but I doubt that the one you showed was made in flash, seems more like a javascript.

 

If you know your way around CSS, Javascript is not necessary (maybe to get the text isometric-like though).

You could just use a background image for all the bricks with the text on top and increase the margins using CSS :hover.

I threw together a quick example without images. Valid xHTML Strict, works with JS, Frames and images disabled, on Opera, Firefox, IE (5.5+), Safari and Konqueror (Windows, Mac and Linux )

http://dredgy.com/examples/menu

The links' left margin is increased by 1em when it is hovered over, and you can make an "active" menu item by putting this into your link:

"class="active""

So an unactive link would look like this:

<li><a href="http://google.com">Google</a></li>

Code (markup):

And an active link would be:

<li><a class="active" href="http://google.com">Google</a></li>

Code (markup):

This is just a base guideline for you to work off, but if you are somewhat familiar with CSS, this should be easy enough.

Both Flash and JS are relatively inaccessible for older browsers, so steer away from Flash altogether. For a Javascript one, it would be wise to have mine either styled with Javascript (sorting through all the list items in the navigation menu, and changing them to bricks) or have a custom javascript one, and one such as mine within a <noscript> tag.

 

Yea, I wish you could go into a little more detail with that Blue.

I need something to allow me to specify an image that will be replaced when the user hovers his/her cursor over one of several text links. I’m looking for a solution that allows me to specify a different image to show dependent on what text link is hovered.

Text here is really preferred to help with the SEO obviously. If anyone has a reference to find this example laid out somewhere I'd appreciate it.

 

Thanks this works a treat