Menú Flash... sin flash

Eso mismo: parece hecho con flash, pero no lleva nada de eso. Para comprobarlo, echad un vistazo mi blog de pruebas

El "secreto" es la opacidad:

.- CSS:

#menu {
width:720px;
height:400px;
overflow:hidden;
margin:10px;
}
#menu ul {
position:absolute;
z-index:99;
}
#menu ul li {
list-style:none;
width:180px;
float:left;
}
#menu ul li.first {
border:0;
}
#menu ul li ul {
overflow:hidden;
width:178px;
background-color:lightblue;
border:solid #fff;
border-width:0 2px;
opacity: 0.75;
-moz-opacity: 0.75;
filter: alpha(opacity=75);
}
#menu ul li.first ul {
width:180px;
border-left:0;
}
#menu ul li ul li {
padding:10px;
border-top:solid 1px #fff;
font-size:0.8em;
font-family:Arial, sans-serif;
float:none;
}
#menu ul li ul li.first {
border:0;
}
#menu ul li ul li h3 {
font-size:1.2em;
}
#menu ul li ul li ul {
position:relative;
border:0;
}
#menu ul li ul li ul li {
font-size:0.9em;
padding:0 0 0 15px;
line-height:1.3em;
border:0;
background:url(http://.../03.gif) no-repeat left center;
}
#menu ul li h2 a {
display:block;
padding:10px 5px;
font-family:Arial, sans-serif;
text-decoration:none;
font-size:0.7em;
font-weight:normal;
color:#fff;
background-color:#666;
border:solid 2px #fff;
border-width:0 0 2px 2px;
}
#menu ul li.first h2 a {
border-left:none;
}
#menu ul li.hover h2 a {
background-color:#663;
}
#menu_content {
background: url(http://.../en-velay4-375.jpg) no-repeat center;
height:100%;
padding:3em 1em 1em 1em;
color:#fff;
}
* {
margin:0;
padding:0;
}

.- SCRIPTS:

<script src='http://.../mootools-release-1.11.js' type='text/javascript'/>



<script type='text/javascript'>

var Menu = {

start: function () {

var menu = $(&#39;menu&#39;);

var img_opacity = new Fx.Style(&#39;menu_content&#39;, &#39;opacity&#39;, {&#39;wait&#39;: false, &#39;duration&#39;: 400});

menu.getFirst().addEvents({

&#39;mouseenter&#39;: function () {

img_opacity.start(0.5);

},

&#39;mouseleave&#39;: function () {

img_opacity.start(1);

}

});

menu.getFirst().getChildren().each(function (el) {

var second_list = el.getElement(&#39;ul&#39;);

second_list.setStyles({

&#39;opacity&#39;: 0,

&#39;height&#39;: menu.getStyle(&#39;height&#39;).toInt() - menu.getFirst().offsetHeight

});

var fx = second_list.effect(&#39;opacity&#39;, {&#39;wait&#39;: false, &#39;duration&#39;: 200});

el.addEvents({

&#39;mouseenter&#39;: function () {

fx.start(1);

this.addClass(&#39;hover&#39;);

},

&#39;mouseleave&#39;: function () {

fx.start(0);

this.removeClass(&#39;hover&#39;);

}

});

});

}

};

window.addEvent(&#39;domready&#39;, Menu.start);

</script>

.- El HTML:

<div id='menu'>

<ul>



<li class='first'>

<h2><a href='#'>&gt; Menu 1</a></h2>

<ul>

<li class='first'>

<h3>Section 1</h3>

<p>Here are a few links:</p>

<ul>



<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>

<li>



<h3>Section 2</h3>

<p>Más links:</p>

<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>



<li><a href='#'>Link 4</a></li>

</ul>

</li>

<li>

<h3>Section 3</h3>

<p>Más links:</p>

<ul>



<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>

</ul>



</li>

<li>

<h2><a href='#'>&gt; Menu 2</a></h2>

<ul>

<li class='first'>

<h3>Section 1</h3>

<p>Here are a few links:</p>



<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>



<li>

<h3>Section 2</h3>

<p>Aquí hay más Links:</p>

<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>



<li><a href='#'>Link 4</a></li>

</ul>

</li>

<li>

<h3>Section 3</h3>

<p>Even more links:</p>

<ul>



<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>

</ul>



</li>

<li>

<h2><a href='#'>&gt; Menu 3</a></h2>

<ul>

<li class='first'>

<h3>Section 1</h3>

<p>Here are a few links:</p>



<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>



<li>

<h3>Section 2</h3>

<p>Here are some more links:</p>

<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>



<li><a href='#'>Link 4</a></li>

</ul>

</li>

<li>

<h3>Section 3</h3>

<p>Even more links:</p>

<ul>



<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>

</ul>



</li>

<li>

<h2><a href='#'>&gt; Menu 4</a></h2>

<ul>

<li class='first'>

<h3>Section 1</h3>

<p>Here are a few links:</p>



<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>



<li>

<h3>Section 2</h3>

<p>Aquí hay algunos links más:</p>

<ul>

<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>



<li><a href='#'>Link 4</a></li>

</ul>

</li>

<li>

<h3>Section 3</h3>

<p>Even more links:</p>

<ul>



<li><a href='#'>Link 1</a></li>

<li><a href='#'>Link 2</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</li>

</ul>



</li>

</ul>

<div id='menu_content'>

<p>Más contenido <a href='#'>clickable</a>.</p>

</div> </div>

Vía