Lo que comentaste: Es bárbaro.
Eso sí: el HTML tiene "mandanga"... yo no sé si es porque enreda de tal manera con tantas tabs, imágenes y códigos en "pre", que termina una por no saber por dónde entra ni sale. El caso es que me cansé desde el principio, ya en el "Hola", jajjajaaa. Pero bueno: tienes AQUÍ una muestra (si se "atranca" un poco al cambiar de tab, es cosa de tanto script que tengo en ese blog... pero funciona bien).
Y en cuanto pueda te comento sobre el HTML (si se me olvida me lo recuerdas, ¿vale?... me temo que todo lo que no hago sobre la marcha se me va olvidando :$ )
----------------------
.- Como el CSS y los scripts ya están comentados por el autor (no he tocado nada al respecto del ejemplo en mi blog: con vistas, precisamente, a que este aspecto se explique por sí solo), voy a comentar el HTML:
Hay que tener muy en cuenta que si cambiáis la "id" de un elemento, sin haberlo hecho en el CSS y scripts, el hack no funcionará, luego, muy atentos a este punto. Yo he dejado, en mi blog, las "id" de cada elemento tal y como venían, para no armar más jaleo a quien quiera realizar este hack:
<div id='MenuBar'>
<div id='HeaderBar'>
<div class='Wrapper'>
<h1 id='HeaderTitle'>Mootools Swish Menu</h1><div id='HeaderLogo'/>
</div>
</div>
<div id='MenuBar'>
<div class='Wrapper'>
<div class='SwishMenu' id='MainMenu'>
<span class='LBuff'/>
<span class='RBuff'/>
<ul class='Main'>
<li><A class='MI' href='#Welcome'><img height='16px' src='http:/.../url.png' width='16px'/><b>Inicio</b></A><ul>
<li><A href='#Hola'>Hola</A></li>
</ul></li>
<li><A class='MI' href='#Code'><img height='16px' src='http://.../transmit.png' width='16px'/><b>Códigos</b></A><ul>
<li><A href='#Code'>Códigos</A></li>
<li><A href='#CSS'>El CSS</A></li>
<li><A href='#JS'>El Javascript</A></li>
</ul></li>
<li><A class='MI' href='#Download'><img height='16px' src='http://.../op3.png' width='16px'/><b>Descargas</b></A><ul>
<li><A href='swish.zip'>Source (Zip)</A></li>
<li><A href='swish.rar'>Source (Rar)</A></li>
</ul></li>
<li><A class='MI' href='#Links'><img height='16px' src='http://.../html.png' width='16px'/><b>Links</b></A><ul>
<li><A href='http://www.mootools.net'>Mootools</A></li>
<li><A href='http://mindmeat.blogspot.com'>Pat.Cullen</A></li>
</ul></li>
<li><A class='MI' href='#Feedback'><img height='16px' src='http://.../clipping.png' width='16px'/><b>Feedback</b></A><ul>
<li><A href='http://forum.mootools.net/viewtopic.php?id=9457'>Si le quieres comentar algo... por aquí.</A></li>
</ul></li>
</ul>
</div>
<div class='cleaner'/>
</div>
</div></div></div>
<div id='ContentBar'>
<div class='Wrapper'>
<div id='ContentViewPort'>
<div id='ContentScrollPane'>
<div class='Window' id='C_Welcome'><a id='Welcome'><h2>Hola</h2></a>
<h3 id='W_Welcome'>Esto es una prueba de Swish Menu</h3>
<div id='W_Description'>Este es un menú animado, con dos niveles. confeccionado en Mootools y Javascript-</div>
<div id='W_Features'><h4>Funcionalidades:</h4>
<ul>
<li>Navegadores.<em>Testado en <a href='http://www.getfirefox.com'>Firefox</a> e IE</em></li>
<li>Fácil de insertar. <em>sólo copiar, pegar y reemplazar (aquí está lo "bueno", je).</em></li>
<li>Dicen que no pesa mucho. <em>pero son ~ 24kb de código</em></li>
<li>IDRCWYUIF Public License. <em>(Dice el autor que le importa un pito para qué lo usemos... por eso la Licencia es Pública)</em></li>
</ul>
</div>
</div>
<div class='Window' id='C_Code'><a id='Code'><h2>The Code</h2></a>
<div id='Code_Links'>
<h3>(Ya me cansé de arreglar ésto: como prueba, basta) El Código tiene tres partes:</h3>
<ul>
<li><a href='#HTML' id='Link_HTML'>El HTML</a></li>
<li><a href='#CSS' id='Link_CSS'>El CSS</a></li>
<li><a href='#JS' id='Link_JS'>The Javascript</a></li>
</ul>
</div>
</div>
<div class='Window' id='C_HTML'><a id='HTML'><h2>The HTML</h2></a>
<div class='CodePane'>
<pre>
<div class="SwishMenu" id="MainMenu">
<span class="LBuff"></span>
<span class="RBuff"></span>
<ul class="Main">
<li><A class="MI" href="#Welcome"><img src="images/swish/op1.png" width="16px" height="16px"><b>Home</b></A><ul>
<li><A href="#Welcome">Welcome</A></li>
</ul></li>
<li><A class="MI" href="#Code"><img src="images/swish/op2.png" width="16px" height="16px"><b>The Code</b></A><ul>
<li><A href="#HTML">The HTML</A></li>
<li><A href="#CSS">The CSS</A></li>
<li><A href="#JS">The Javascript</A></li>
</ul></li>
<li><A class="MI" href="#Download"><img src="images/swish/op3.png" width="16px" height="16px"><b>Download</b></A><ul>
<li><A href="Swish.zip">Source (Zip)</A></li>
<li><A href="Swish.gz">Source (Gz2)</A></li>
</ul></li>
<li><A class="MI" href="#Links"><img src="images/swish/op4.png" width="16px" height="16px"><b>Links</b></A><ul>
<li><A href="http://www.mootools.net">Mootools</A></li>
<li><A href="http://mindmeat.blogspot.com">Pat.Cullen</A></li>
</ul></li>
<li><A class="MI" href="#Feedback"><img src="images/swish/op5.png" width="16px" height="16px"><b>Feedback</b></A><ul>
<li><A href="http://mindmeat.blogspot.com/wadawada">Comment Here</A></li>
</ul></li>
</ul>
</div>
</pre>
</div>
</div>
<div class='Window' id='C_CSS'><a id='CSS'><h2>El CSS</h2></a>
<div class='CodePane'>
<pre>
.SwishMenu {
margin: 0px 0px 0px 0px;
width: auto; height: 55px;
}
.SwishMenu .Main {
padding: 0px; margin: 0px;
display: block;
list-style-type: none;
font-weight: normal;
height: 48px; width: auto;
background-image: url(images/swish/stripe2.png);
border-top: 4px solid #47B2DE;
border-bottom: 4px solid #47B2DE;
}
.LBuff {
width: 4px; height: 56px; float: left;
background: url(images/swish/lbuff.png) top left no-repeat;
}
.RBuff {
width: 4px; height: 56px; float: right;
background: url(images/swish/rbuff.png) top left no-repeat;
}
.SwishMenu li {
float: left;
margin: 0px 0px 0px 0px;
background: url(images/swish/m_li.gif) left no-repeat;
}
.SwishMenu li:first-child { background-image: none; }
.SwishMenu .MI {
width: 135px; height: 48px;
display: block;
margin: 0px;
z-index: 6;
cursor: pointer;
text-decoration: none;
}
.SwishMenu .MI img {
z-index: 13; border: none;
float: left;
width: 1px; height: 1px; position: relative;
}
.SwishMenu .MI b {
position: relative;
left: 10px; top: 15px;
font-weight: bold;
color: #f2f2f2;
font-size: 12px;
}
.SwishMenu li ul {
padding: 0px; margin: -7px 0px 0px 90px;
list-style-type: none;
z-index: 10;
overflow: hidden;
height: 23px; width: 0px;
position: absolute;
background: url(images/swish/sm_r2.png) no-repeat top right;
}
.SwishMenu li ul li {
background: none;
z-index: 10;
}
.SwishMenu li ul li a {
display: block;
height: 23px; width: 110px;
padding-top: 4px;
text-decoration: none;
font-weight: bold;
color: #222266;
text-align: center;
background: url(images/swish/sm_m.png) repeat-x;
}
.SwishMenu li ul li:first-child{
padding-left: 11px;
background: url(images/swish/sm_l.png) no-repeat top left;
}
</pre>
</div>
</div>
<div class='Window' id='C_JS'><a id='JS'><h2>El JavaScript</h2></a>
<div class='CodePane'>
<pre>
// JS to implement the Swish Menu.
window.addEvent('domready', new function() {
initSwish('MainMenu');
});
// El resto del Swish's JS puedes encontrarlo en swish.js
</pre>
</div>
</div>
<div class='Window' id='C_Download'><a id='Download'><h2>Descargas</h2></a>
<div id='DL_Latest'>
Aqui tienes todo el paquete del SwishMenu.
<ul>
<li><a class='AlertBox' href='swish.zip' id='DL_Zip'>Formato Zip </a></li>
<li><a class='AlertBox' href='swish.rar' id='DL_Gz2'>Formato Rar </a></li>
</ul>
</div>
</div>
<div class='Window' id='C_Links'><a id='Links'><h2>Links</h2></a>
<div id='Links_Friends'>
<h3>Y aquí vienen los méritos y esas cosas...</h3>
<ul>
<li><a href='http://www.mootools.net'>Mootools</a> <em>Eternal respect here.</em></li>
<li><a href='http://www.b22222.com'>b22222</a> <em>Firebrick. Just because.</em></li>
<li><a href='http://www.TheStripeGenerator.com'>The Stripe Generator</a> <em>For endless hours of fun,..</em></li>
<li><a href='http://tango.freedesktop.org/Tango_Icon_Library'>Tango Icon Library</a> <em>For the icons used here.</em></li>
<li><a href='http://mindmeat.blogspot.com'>Pat.Cullen</a> <em>Me</em></li>
</ul>
</div>
</div>
<div class='Window' id='C_Feedback'><a id='Feedback'><h2>Feedback</h2></a>
<div id='FB_Contact'>
<h3>Where I'll keep an eye open for comments and queries:</h3>
<ul>
<li><a href='http://forum.mootools.net/viewtopic.php?id=9457'>Mootools Forum Post</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Parece bastante enrevesado con tanta subdivisión... pero sólo lo parece... :)
✍ ¿Quieres hacer algún comentario? ✍