martes, 6 de septiembre de 2011

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.

        <!-- VkuMenuBar Flotante-->
        <div id='nav'>
            <li><a href='#'><img alt='Suscribirse' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYX-AEFxKqxx1JxGaoFfiBu52Noa33LQy0ZBlo0b7ujMXRx6zp1dtrk2BFnyJ8Rr61Nt_ilbp5Rh5qCbnTuZUUYo9RfxKOPgg7dKZHYDexseWsr87pBP1IkA_jZhe-LRMgdYcdP8KYCOg3/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