Móvil:955666010
Claro:993015610
Nextel:51*826*3080
RPM:*0233630


CENTRAL :
(511) 578 6934
Tutoriales
Publicación : 2012-02-06 17:56:52
Menú vertical con CSS3 y jQuery para Blogger

Para realizar un menu vertical hecho con CSS3 y libreria jQuery que ademas de tener un aspecto genial ahorra mucho espacio en el blog,seguro que a mas de uno les gustara este genial truco para Blogger.

Para agregar este menu ve a "Diseño | Edición HTML" y alli busca la siguiente línea:


Antes de la etiqueta anterior deberas agregar lo siguiente:


Importante:

Si ya tenías jQuery instalado omite el código resaltado en azul.

Ahora antes de ]]> debes agregar lo siguiente:


.slide-out-div {
padding: 0;
width: 150px;
color:fff;
}

.slide-out-div ul {
margin:0;
margin-left:-40px;
}
.slide-out-div li {
text-align:right;
width:120px;
color:#fff;
margin-top:2px;
font-size:13px;
background: #2facd6; /*Color de fondo de los enlaces*/
padding:4px;
list-style:none;
}

.slide-out-div li:hover {
background: #2d2d2d; /*Color de fondo al pasar el mouse por un enlace*/
padding:4px;
list-style:none;
-moz-transition: 0.2s;
-webkit-transition: 0.2s;
-o-transition:1s;
transition: 1s;
-webkit-transform: rotate(0deg) scale(1.5) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1.5) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1.5) skew(1deg) translate(0px);
}

.slide-out-div li a {color:#fff; text-decoration:none;font-weight:none;font-family: Century Gothic, sans-serif; }


Ahora antes de deberas agregar el siguiente codigo que corresponde a la estructura del menu.

<div class='slide-out-div'>
<a class='handle' href=''/>
<ul>
<li><a href='/'>Inicio</a></li>
<li><a href='URL'>Enlace 1</a></li>
<li><a href='URL'>Enlace 2</a></li>
<li><a href='URL'>Enlace 3</a></li>
<li><a href='URL'>Enlace 4</a></li>
<li><a href='URL'>Enlace 5</a></li>
<li><a href='URL'>Enlace 6</a></li>
</ul>
</div>

En esta ultima parte es en la que deberas agregar tus enlaces.







Compartir en Facebook





Publicación : 2012-02-06 17:56:52 | Leido : 3331 veces
Zona de Programas
» Cute FTP
FTP es uno de los más importantes servicios de Internet, se usa para transferir ficheros d ...

» Tutorial PhpBB
phpBB es un sistema de foros gratuito basado en un conjunto de paquetes de código programa ...

» Winamp
Winamp es un reproductor multimedia, para la plataforma Microsoft Windows creado el 21 de ...

» Shoutcast
SHOUTcast es una tecnología de streaming auditiva freeware, desarrollada por Nullsoft. SHO ...

» PHPDesigner 2009
PHPDesigner 2009 es un excelente editor de programación. PHPDesigner 2009 sirve como ed ...

Soporte Comuniquese
x

¿Cómo podemos ayudarle?
Elige un tema y nos aseguramos de que está en buenas manos.
CHAT
Contacto
Skype

x
Contáctenos
Codigo Generado
x

Central : (01) 578 6934
RPM : *0233630
Nextel : 51*826*3080
Claro : 993015610
Móvil : 955666010