Compartir en Facebook





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 : 2378 veces
Zona de Programas
» Tutorial PhpBB
phpBB es un sistema de foros gratuito basado en un ...
» Shoutcast
SHOUTcast es una tecnología de streaming auditiva ...
» Cute FTP
FTP es uno de los más importantes servicios de Int ...
» Filezilla
FileZilla es un cliente FTP, gratuito, libre (GNU) ...
» PHPDesigner 2009
PHPDesigner 2009 es un excelente editor de program ...
» Manual OSCommerce
osCommerce (de Open Source Commerce) es una aplica ...
» Winamp
Winamp es un reproductor multimedia, para la plata ...

Tu página en las primeras posiciones de Google. Compita a lo grande siendo uno de los primeros, deje este trabajo a nuestros especialistas SEO. Somos Profesionales no pierda su tiempo.

Ver Más

Te ofrecemos la mejor señal de radio por internet, contamos con los mejores servidores del mercado en el mejor datacenter del Mundo, Panel Whmsonic, AutoDj o Dj Automatico, cero buffer.

Ver Más

Contamos con el mejor equipo de programadores y diseñadores, con la experiencia en la elaboración de proyectos web. Innovamos nuevas tendencias. Diseños orientados a Redes Sociales.

Ver Más

¿Qué es Softaculous? Es un auto instalador que permite en solo un click instalar WordPress, Joomla, Moodle y otros Script. Puede solictar a nuestros programadores ayuda en la instalación.

Ver Más
Plugins
Sobre Nosotros
La Empresa
DOCTOR PC PERU E.I.R.L
R.U.C 20515853724
Reportar Enlace Roto o Abusos
Recibe Ofertas y Promociones :
Contacto

Soporte: soporte
inkawebdesign.com
Informes: info
inkawebdesign.com
Facturación: facturacion
inkawebdesign.com
Pagos: pagos
inkawebdesign.com

Promociones y Novedades
Partners
Alojamiento Web

Qué es hosting ?
Hosting para Pymes
Qué es una Página Web
Diseño Web para PYMEs

Tu IP es : 50.16.132.180
Siguenos
Aceptamos pagos de
Copyright © 2013 InkaWebDesign.com - LIMA, PERU - T/Fax: (511) 5786934 - Claro: (511) 9 9301 5610 - Movistar: (511) 9 5566 6010 - Nextel: 826*3080 - RPM: *0233630
XHTML - CSS