Menú flotante solo con CSS - BloggerS Look
BloggerS Look

INSPITATION AND CREATIVITY IN SOCIAL NETWORKS

Menú flotante solo con CSS

Share This
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.

        <!-- VkuMenuBar Flotante-->
        <div id='nav'>
            <li><a href='#'><img alt='Suscribirse' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOYaWjX-UhyphenhyphenHbgbO1xyFm9nDi4VXJjH6EI4eNuuw8UxTVsgDtFtNWmFAEqX6zXJ4kETPdUwuQ3QP7ePtGkpDkutr7ib-daQhOZKkMI8JvFU-pT3lPviDdTim0GAfxuHi4C487DmvhhHeVi/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'>&#191;Que es RSS?</a></li>
                <li><a href='mailto:anfelweb@gmail.com'>Contacto</a></li>
     </ul>
                    </li></div>          
            <!-- END VkuMenuBar flotante-->

Cambiar la imagen y los enlaces por los suyos.

No hay comentarios:

Publicar un comentario

¡QUE NO SE PIERDAN TUS AMIGOS NINGUNA PUBLICACION!

MANDALES POR CORREO EL LINK DE ESTE BLOG PARA QUE NOS CONOZCAN

Share to Facebook Share to Twitter Email This Pin This Share on Google Plus Más...

Vistas de página en total