Fancy Menu

Hacía tiempo que un hack no me daba tanta guerra. Y tenía que ser este menú de apariencia sencilla, aunque con un efecto fabuloso... pero endemoniadamente complicado de instalar: sobre todo por las explicaciones de su autor (me temo que los dioses no le llamaron para la enseñanza, precisamente). Total: que hasta dejó de parecerme "divertido" el tal menú.

Finalmente, tras mucho leer en su foro y terminar por hacer con los códigos lo que me pareció oportuno, salió como debía. Así (a mi manera, claro... no a la del autor, pero con el mismo resultado). Podéis ver cómo funciona en Mi Blog de Pruebas (allí he dejado la URL del autor del menú, a ver si hay algún valiente que entiende media palabra de sus instrucciones, jajajaaa ;) )

.- CSS; Hice un "amagüestu" con el estilo y dejé otras funcionalidades instaladas (una especie de submisión con imágenes... que al autor no le funciona en su demo"... pero la dejo, por si acaso un día se decide a arreglarla: a mí se me quitaron las ganas, jajajaja). He dejado un apartado también para la inclusión de imágenes en el menú... y es que el autor lo confecciona con imágenes de texto, en lugar de con el texto... lo que puede resultar un lío tremendo para quien, como yo, se lleva fatal con eso de las imágenes. Ahí lo dejo para quien guste de trabajar con imágenes de texto.
Además, he cambiado el background original, consistente en una imagen de esquinas redondeadas, por un fondo de color... y es que éste no se ajusta a contenidos largos y cabeceras tan anchas como las de alguna plantilla de blogger.

En resumen, así fue como me las ingenié con el CSS:

#fancymenu {
position: relative;
height: 29px;
width: 800px;
background:orange ;
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7b94PMRZwG_JdlNjMZwQt28lJwOKoi_p1Ajzf6CRx1NAq6Wi5j4yeMr9eAI2tljiqb_ZnKRo6bowCnn4czsgb4q30_f3bVe7GKfs1Qu40KO5adx_JPMLgoSCUA0Zz7JKQex0Rw8m3UIM/s400/bg_menu_right.png') no-repeat top right !important;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFzEG4R3fKGVbR3zgMUFkzG8UyAfWBupe6IrBKd9ouxV09PfoyByX2a-2rQwehwN-CjYaH8wEjiPSw5HldUdCp8HsdDEl977AcisDnvj9jGO0qhuhYBr6oKEBlO8Oug_01seKrjLjoJ5o/s400/bg_menu_right.gif') no-repeat top right;
z-index: 8;
position: absolute;
visibility: hidden;
}

#fancymenu .background .left {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCiQ2SqOHz7yw2WmPWWNUFwCTyDby2Ajd3q83YNPJiA1P-WpnctCNlJLo8yr3tsE2jdIBxI6AlOG0cXa8p2mdX38Cc8N478VAW7ycZ0i_ONZ5y7iy4fIYHg6kFH5XmtWdmpCHcbMpFDcM/s400/bg_menu.gif') no-repeat top left !important;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFzEG4R3fKGVbR3zgMUFkzG8UyAfWBupe6IrBKd9ouxV09PfoyByX2a-2rQwehwN-CjYaH8wEjiPSw5HldUdCp8HsdDEl977AcisDnvj9jGO0qhuhYBr6oKEBlO8Oug_01seKrjLjoJ5o/s400/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhMhcovO7L2XaLihkZvAsAHGzIHZNocLlIQQAIci7vA3-BYE9d3uviTqCe25f2CVDaZhO2H5wlNwT7Lr1tCKrsDyW8BBx2tw6Lw9yNt9Lne0ma_J5VNvrut7sppXUfzNjaAEdwI7vjNb0/s400/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://.../bg_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;
}

.- Vamos a los scripts (que son unos cuantos, amén de nuestro amigo Mootools):

<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'/>

.- Y el HTML para "rellenar" el menú y llamar a los scripts:

<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>

No he cambiado las "id" del HTML porque no cambiaban en nada el resultado y... terminé francamente hasta las narices del menú en cuestión... me llevó días imaginar cómo podía insertarlo, ya que el autor no facilita precisamente la cuestión, ni siquiera en cuanto a los scripts.

Por otro lado, algo parecido (sin tanto como me compliqué para dar con un CSS que me funcionara), puede hacerse de la siguiente manera:

.- Eliminando todo el CSS que hemos puesto para el Fancy Menú y colocando, en su lugar éste (LOS SCRIPTS LOS DEJAMOS COMO ESTAN, AVISO):

#fancymenu {
position: relative;
width: 100%;
background:#2E5F6B;
padding: 15px;
margin: 10px 0;
overflow: hidden;}
#fancymenu ul{
padding: 0;
margin: 0;}
#fancymenu ul li {
float: left;
list-style: none;}
#fancymenu 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; }

#fancymenu li.background {
z-index: 8;
border-bottom:5px solid #18B3DB;
position: absolute;
visibility: hidden;
padding:0 0 0;
height:40px;
}

Esta demo podéis verla en el footer de mi blog de pruebas Imagen