Menú flotante solo con CSS

El menú es el que utilizo en mi plantilla, flotando a la derecha.

A pedido de VRedondoF dejo el código que utilizo.

Como todo estilo, se puede personalizar cambiando colores, fuentes, etc...

Yo copio el que utilizo en mi plantilla.

Ir a Diseño (vieja interfaz) o Plantilla (nueva interfaz), Edición de HTML y justo arriba de ]]></b:skin>

Poner el siguiente código:

/* VkuMenuBar flotante */
#nav a:link{color:#DA1074}
#nav a:visited{color:#DA1074}
#nav a:hover{color:#fff; text-decoration:none}
#nav a:focus{color:#fff; text-decoration:none}
#nav a:hover{color:#fff; text-decoration:none;font-size:100%;//font-size:95%}
#nav ul a:hover{background:#DA1074; text-decoration:none}
#nav a{text-decoration:none; display:block; padding:2px 10px; background:#000; -moz-border-radius:7px; -webkit-border-radius:7px; margin:0; color:#DA1074;font-size:100%;//font-size:95%}
#nav li li a{text-align:left}
#nav ul{-moz-border-radius:8px; -webkit-border-radius:8px; right:0; border:1px solid #000; background:#000}
#nav, #nav ul{padding:5px; list-style:none; line-height:25px}
#nav li{display:block; list-style:none; position:relative; //width: 100%;}
#nav{display:block; position:fixed; list-style:none; z-index:5; top:120px; right:-10px; text-align:left; z-index:1000000000; width:auto}
#nav li li{float:none}
#nav li li a{position:relative; float:none}
#nav li ul{position:absolute; margin-right:-500px; width:140px}
#nav li:hover ul ul{margin-right:-500px}
#nav li:hover ul{margin-right:5px; // margin-right:10px; margin-top:0; //margin-top:0px}
#nav li li:hover ul{margin-right:80px}
/* END VkuMenuBar flotante */

Ahora ponemos arriba de </body> la caja contenedora (div).

Utilizamos listas para los enlaces.

<div id='nav'>
           <li><a href='#'><img alt='Suscribirse' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRpCO_QoFlMyeYso6c5WO48OsobCfoQ2Q25UpBPG9ll6LtZ0r0DCMs2Gv5iqdl6SySVeXYK5zfu9XTZ-r27vY9C2m1duNU3mY0HPVo2gAkB6ZxuOJU7_kPQH225dQzmJAG2cSFySlLSfk1/s0/rssfeed.png' title='Suscribirse'/></a>
    <ul>
               <li><a href='http://feedburner.google.com/fb/a/mailverify?uri=blogspot/qygH' target='_blank' title='Suscribirse a las entradas vía email'>Feed vía Email</a></li>
               <li><a href='http://feeds.feedburner.com/blogspot/qygH' target='_blank' title='Suscribirse a las entradas'>Feed vía RSS</a></li>
               <li><a href='http://loseasi.blogspot.com/feeds/comments/default' target='_blank' title='Suscribirse a los comentarios'>Feed Comentarios</a></li>
               <li><a href='http://www.rss.nom.es/' target='_blank'>¿Que es RSS?</a></li>
                <li><a href='mailto:anfelweb@gmail.com'>Contacto</a></li>
   </ul>
                   </li></div>

Cambiar la imagen y los enlaces por los suyos.

cc.co2.vrf dijo...: muy bueno , lo copio ahora mismo.
Seguro que hay mucha gente que lo copia.
Muy agradecido.; 6 de septiembre de 2011, 9:27
Vku dijo...: Si, ya lo han copiado sin permiso, pero han copiado junto con otros códigos que no pertenecen al menú.; 6 de septiembre de 2011, 9:38
cc.co2.vrf dijo...: Lo he puesto en
http://vinetas-vrf.blogspot.com/

Lo que no me funciona es el contacto por correo, le tendre que dar una vuelta a ver en que lo hice mal.

No entiendo muy bien ??? lo que dices de :
"lo de han copiado sin permiso".
Por ello te pido permiso para copiarlo y ponerlo en mis BLOGs...

y lo de :
"pero han copiado junto con otros códigos que no pertenecen al menú."
Tampoco lo entiendo ???.

Yo voy atrabajarlo y ajustarlo a mi gusto.
MUY AGRADECIDO.; 6 de septiembre de 2011, 11:08
Vku dijo...: Tu no, otros nunca lo pidieron y lo han copiado.

El correo funciona bien, que encontras mal?

Abre el correo predeterminado en tu computadora, en mi caso abre una página para contactar, pero por lo que vi tu no tienes ese tipo de página.; 6 de septiembre de 2011, 11:14
cc.co2.vrf dijo...: En Chrome a mi no me sale lo del correo , he cambiado a firefox y si sale una opcion para correo, "usease" esta bien.

Esto de usar los distintos navegadores que hay es un problema ... pero es asi , que se le va hacer.

Lo que es muy interesante es la UTILIDAD de que se despliegue al pasar por encima el raton y que no tengas que clikear, la verdad es que me gustaria aplicarlo a todo lo que tengo en mi blog ... es muy util y el visitante lo tiene que "AGRADECER MUCHO"

REpito agradecido por tu amabilidad.; 7 de septiembre de 2011, 2:39
Vku dijo...: Yo lo veo bien en los 3 navegadores

http://img75.xooimage.com/files/0/e/5/dibujo-2c9aa92.png; 7 de septiembre de 2011, 2:47
cc.co2.vrf dijo...: Ver, si se ve.

A lo que me referia es que (a mi) con chrome no me sale nada en contacto , en cambio si clickeo contacto desde firefox , si me sale la utilidad de correo.

Un saludo; 7 de septiembre de 2011, 4:27
Vku dijo...: A mi me sale bien en los 3 navegadores.

Yo utilizo IncredoMail 2.0 pro.

Vku.; 7 de septiembre de 2011, 9:21
cc.co2.vrf dijo...: Quitare lo de contacto , ya que en cada publicacion pongo mi direccion de contacto y es suficiente.

llevo un rato grande intentando pasarlo al lado izquierdo del blog.
para ello ( y como se muy poco de esto) lo que he hecho es ir cambiando uno a uno todas las "right" (derecha) por "left"(izquierda), "usease" cambio una y cierro para ver si me lo ha llevado a la izquierda ... y nada ... que no he sido capaz ...

Resumiendo ...
¿me podrias indicar como lo pongo a la izquierda?.
Nada , nada ... que soy "UN CARROZA" y a partir de una edad , esto se hace muy dificil..
Saludos.; 7 de septiembre de 2011, 10:31
Vku dijo...: Para quitar lo de comentario elimina esta línea:
<li><a href='mailto:anfelweb@gmail.com'>Contacto</a></li>

A la izquierda no se puede, hay que hacer muchos cambios y en este momento me es imposible.; 7 de septiembre de 2011, 10:48
cc.co2.vrf dijo...: OK.
Probablemente viene ya preparado para que quede a la derecha.

Tranki, no pasa nada.
Lo hacia porque a la izquierda lo tengo muy cargado de artilugios , en cambio tengo la derecha vacia.

Este tipo de menus fijos y desplegable automatico son muy operativos, es una forma de hacer MUCHO MAS OPERATIVO el blog.

Yo voy a ver los que encuentro por la nube , para utilizarlos todo lo que pueda.

Como veras
http://vinetas-vrf.blogspot.com/
tengo uno igual, con un menu , pero hay que clikear para que salga, en cuanto enciuentre algo lo cambio.

Una vez mas MUY AGRADECIDO por tu amabilidad.

SALUDOS.; 8 de septiembre de 2011, 0:43
Vku dijo...: Prueba cambiar en ese menú
onclick='VerOcultarMenu();'
Por
onmouseover='VerOcultarMenu();'; 8 de septiembre de 2011, 3:10
Unknown dijo...: Hola querido amigo, espero estés bien. Un gran abrazo Vku.:23); 8 de septiembre de 2011, 3:48
Unknown dijo...: probando haber si me acuerdo!! :35); 8 de septiembre de 2011, 3:49
Unknown dijo...: Bueno realmente no me acuerdo, pero me ayudas cual es mi imagen de la bandera de mi pais ??? Gracias amigo. La tuya es :18); 8 de septiembre de 2011, 3:51
cc.co2.vrf dijo...: OK.
Probado , funciona perfectamente.

Agradecido por tu ayuda.

Saludos.; 8 de septiembre de 2011, 4:54
Vku dijo...: Jajaja amigo Antonio, es la 31 :31)
Cuando empiezas la recorrida en bici?; 8 de septiembre de 2011, 8:22
Unknown dijo...: :31):26)Jajajaja Gracias querido amigo. Creo que el 29 o 30 de octubre salgo a mi ciclotur. En todo caso tengo bitàcora para despues hacer algo en el blog de mi aventura, me he ejercitado bastante. Un abrazooo. :31); 8 de septiembre de 2011, 13:23

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.