Después de todo el trabajo que me ha dado... de divertido y mono que me parecía, me parece menos, je. Pero ahí está: PRUEBA FANCY-MENU.
Antes de nada, casi que os leéis el contenido de las dos entradas que he escrito en ese blog: porque allí comento, en la primera, una forma más sencilla para este menú y, en la segunda entrada, las dificultades que he visto en el menú en su forma "difícil".
Y, vamos a esta última, puesto que la primera ya la he dejado explicada en el blog de pruebas.
.- CSS:
He colocado un link con el CSS básico de del Fancy-Menú, dentro de la apertura de la tag head de mi plantilla (imediatamente detrás del "title", al comienzo):
<link href='http://junioscripts.googlepages.com/menu.css' media='screen' rel='stylesheet' type='text/css'/>
Además, y para poder manejarlo a mi antojo, he colocado un CSS dentro de la tag skin (así no tengo que entrar en el link para cambiar el fondo, sobre todo... y si me apetece cambiar el texto por imágenes; el ancho, para acomodarlo al de otra plantilla, etc...):
#fancymenu {
position: relative;
height: 29px;
width: 800px;
background: lightblue ;
padding: 15px;
margin: 10px 0;
overflow: hidden;
}
#pictureselect {
position: relative;
height: 1%; /* ie bug */
}
#fancymenu ul, #pictureselect {
padding: 0;
margin: 0;
}
/* Don't apply padding here (offsetWidth will differ in IE)
If you need padding add it to the child anchor */
#fancymenu ul li a {
z-index: 10;
display: block;
float: left;
width: .1em;
position: relative;
font: bold 14px tahoma, sans-serif;
color: #fff;
text-decoration: none;
white-space: nowrap;
padding: 6px 15px 7px;
}
#fancymenu > ul li a {width: auto;}
#nopicture a {
background: url('http://no_picture.gif') no-repeat center;
}
#picture_1 a {
background: url('http://picture_1.jpg') no-repeat center;
}
#picture_2 a {
background: url('http://picture_2.jpg') no-repeat center;
}
#picture_3 a {
background: url('http://picture_3.jpg') no-repeat center;
}
#picture_4 a {
background: url('http://picture_4.jpg') no-repeat center;
}
#fancymenu li.background {
background: url('http://bg_menu_right.png') no-repeat top right !important;
background: url('http://bg_menu_right.gif') no-repeat top right;
z-index: 8;
position: absolute;
visibility: hidden;
}
#fancymenu .background .left {
background: url('http://bg_menu.gif') no-repeat top left !important;
background: url('http:///bg_menu_right.gif') no-repeat top left;
height: 30px;
margin-right: 9px; /* 7px is the width of the rounded shape */
}
#pictureselect li.background {
background: url('http://bg_images.gif') no-repeat top;
z-index: 8;
position: absolute;
width: 53px;
visibility: hidden;
}
#pictureselect li.background .left { display: none; }
#userprofile {
margin-top: 15px;
background: url('http:form.gif') no-repeat top left;
width: 360px;
height: 180px;
overflow: hidden;
padding: 0 15px;
}
#userprofile h4 {
font: bold 11px Verdana;
margin-bottom: 10px;
}
#userprofile p.input {
background: #EBEBEB;
overflow: hidden;
padding: 0 !important;
padding: 2px 0;
}
#userprofile p.input input {
display: block;
margin: 3px;
width: 348px;
border: 1px solid #D4D4D4;
padding: 3px 0 3px 4px;
}
#userprofile p.input input:focus {
border: 1px solid #999;
}
------Fancy2---------
#fancymenu2 {
position: relative;
width: 100%;
background:#2E5F6B;
padding: 15px;
margin: 10px 0;
overflow: hidden;}
#fancymenu2 ul{
padding: 0;
margin: 0;}
#fancymenu2 ul li {
float: left;
list-style: none;}
#fancymenu2 ul li a {
display: block;
float: left;
color:#fff;
padding:10px 20px;
position: relative;
overflow: hidden;
z-index:10;
text-decoration:none;
font-size:18px; }
#fancymenu2 li.background {
z-index: 8;
border-bottom:5px solid #18B3DB;
position: absolute;
visibility: hidden;
padding:0 0 0;
height:40px;
}
En cuanto a las definiciones para las "pictures" y "userprofile", se corresponden con otro ejemplo de este menú, que he dejado a propósito porque no sólo no estorban, sino que ayudan al menú y pueden valer a la hora de añadirle imágenes, solas o con texto (mujer precavida, vale por dos).
.- Y vamos a los scripts... nada menos que cuatro: un viejo conocido, Mootools y tres que no nos han sido presentados. Estos son los míos y, para variar, mejor subís los vuestros, no sea que me quede sin ellos y vosotros sin menú:
<script src='http://junioscripts.googlepages.com/mootools.js' type='text/javascript'/>
<script src='http://junioscripts.googlepages.com/menu.js' type='text/javascript'/>
<script src='http://junioscripts.googlepages.com/main.js' type='text/javascript'/>
<script src='http://junioscripts.googlepages.com/devthought.js' type='text/javascript'/>
.- Por últimno, el HTML, que irá... donde queráis ver el menú: antes del widget de la cabecera (header), debajo... como os parezca:
<div id='fancymenu'>
<ul>
<li class='0' id='menu_home'><a href='http://cafe-junio.blogspot.com/'>Epílogo</a></li>
<li class='current' id='menu_plantatree'><a href='http://cuentos-historias.blogspot.com/'>Revolutum</a></li>
<li class='0' id='menu_forum'><a href='http://adrihome.blogspot.com/'>Trabajos Oscuros</a></li>
<li class='0' id='menu_orali'><a href='http://imagen-junio.blogspot.com/'>Imagen-Pruebas</a></li>
<li class='0' id='menu_tutorial'><a href='http://jj-junio.blogspot.com/'>JJ-Pruebas</a></li>
<li class='0' id='menu_travel'><a href='http://nada-junio.blogspot.com/'>Nada</a></li>
<li class='background'><div class='left'/></li>
</ul>
</div>
Cambiad el HTML a vuestras urls y textos y las "li-id" (que he dejado las originales del hack, porque no me afectaban mucho a la prueba y, francamente, estaba ya del menú hasta las narices). Y ya está...
Ha sido de lo más complicado que me he encontrado en mucho tiempo... uf.
Para más información, echad un ojo al menú de pruebas donde lo he insertado, y cuya dirección tenéis al comienzo de esta entrada.
Mañana (u otro día) explico el menú "Suckerfish", que ese sí es una monada, por bonito y fácil de insertar :)
¡Ah!: Y suerte para todos en este nuevo año :D
✍ ¿Quieres hacer algún comentario? ✍