Ir al contenido principal

Menu desplegable con CSS3

Menu desplegable con CSS3 para Blogger.
Este es un menu el cual incluye animacion al desplegarse el menu, tiene un estilo muy moderno de HTML5 y es facil de intalar.

Para los que usan plantillas del diseñador de plantilla primero deben hacer lo que dice en la siguiente entrada, Poner cualquier menu en las plantillas del diseñador de Blogger

Sigue los siguientes pasos para instalarlo.
  • Ve a Plantilla, luego ve a Edicion de HTML.
  • Busca la etiqueta ]]></b:skin> y encima de ella pega lo siguiente.
.menu-a,
.menu-a ul,
.menu-a li,
.menu-a a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

/* Menu */
.menu-a {   
    height: 40px; /* alto del menu */
    width: 100%; /* ancho del menu */
    background: #4c4e5a; /* fondo del menu junto con lo que sigue */
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    -webkit-border-radius: 5px; /* radio del borde del menu opera, Chrome */
    -moz-border-radius: 5px; /* radio del borde del menu Firefox */
    border-radius: 5px; /* radio del borde del menu IE9, etc*/
}
.menu-a li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}
.menu-a li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
    border-left: 1px solid #393942; /* borde izquierdo */
    border-right: 1px solid #4f5058; /* borde derecho */
    font-family: Helvetica, Arial, sans-serif; /* fuente de texto del menu */
    font-weight: bold;
    font-size: 13px; /* tamaño de texto */
    color: #f3f3f3; /* color del enlace */
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
.menu-a li:first-child a { border-left: none; }
.menu-a li:last-child a{ border-right: none; }
.menu-a li:hover > a { color: #8fde62; /* color del enlace al pasar el cursor */}

.menu-a ul {
    position: absolute;
    top: 40px;
    left: 0;
    opacity: 0;
    background: #1f2024; /* fondo del submenu */
    -webkit-border-radius: 0 0 5px 5px; /* radio del submenu opera, chrome */
    -moz-border-radius: 0 0 5px 5px; /* radio del submenu firefox */
    border-radius: 0 0 5px 5px; /* radio del submenu IE9, etc*/
    -webkit-transition: opacity .25s ease .1s; /* opacidad opera, chrome */
    -moz-transition: opacity .25s ease .1s; /* opacidad firefox */
    -o-transition: opacity .25s ease .1s; /* opacidad */
    -ms-transition: opacity .25s ease .1s; /* opacidad */
    transition: opacity .25s ease .1s; /* opacidad */
}

.menu-a li:hover > ul { opacity: 1; }
.menu-a ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
.menu-a li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
}
.menu-a ul li a {
    width: 150px; /* ancho de la subpestaña */
    padding: 4px 0 4px 40px;
    margin: 0;
    border: none;
    border-bottom: 1px solid #353539; /* ancho y color del borde de abajo del submenu */
}

.menu-a ul li:last-child a { border: none; }

.menu-a a.documents { background: url(http://dl.dropbox.com/u/53097108/ihojosestudios/example/menucss3/docs.png) no-repeat 6px center; }
.menu-a a.messages { background: url(http://dl.dropbox.com/u/53097108/ihojosestudios/example/menucss3/bubble.png) no-repeat 6px center; }
.menu-a a.signout { background: url(http://dl.dropbox.com/u/53097108/ihojosestudios/example/menucss3/arrow.png) no-repeat 6px center; }
  • y guardas los cambios.
  • Luego ve a Diseño y agrega un nuevo gadget HTML/Javascript.
  • y agrega lo siguiente.
<ul class="menu-a">
<li><a href="#">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a></li>

<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="#" class=" ">Subpestaña 3.1</a></li>
<li><a href="#" class=" ">Subpestaña 3.2</a></li>
<li><a href="#" class=" ">Subpestaña 3.3</a></li>
</ul>
</li>

<li><a href="#">Pestaña 4</a></li>
</ul>
  • Lo de azul es donde se pondrá la URL de la pestaña.
  • Lo de rojo es donde pondrás el nombre de la pestaña.
  • lo de rojo oscuro son los nombres de las subpestañas.
  • Si quieres añadir otra pestaña solo agrega lo siguiente antes de </ul>.
 <li><a href="#">Pestaña</a></li>
  • Si quieres añadirle subpestañas a la pestaña, pasa </li> hacia abajo y encima de </li> pegas lo siguiente.
<li><a href="#">Pestaña</a>
<ul>
<li><a href="#" class=" ">Subpestaña</a></li>
</ul>
</li>
  • Si quieres agregar una pestaña con subpestañas agrega lo siguiente antes de </ul>.
<li><a href="#">Pestaña</a>
<ul>
<li><a href="#" class=" ">Subpestaña</a></li>
<li><a href="#" class=" ">Subpestaña</a></li>
<li><a href="#" class=" ">Subpestaña</a></li>
</ul>
</li>
  • Si quieres añadir otra subpestaña a la pestaña solo agrega lo siguiente antes de </ul>.
 <li><a href="#" class=" ">Subpestaña</a></li>
  • donde se ve class="" es para poner un pequeña imagen. ejemplo.
 class="documents" =http://dl.dropbox.com/u/53097108/ihojosestudios/example/menucss3/docs.png
 class="messages" = http://dl.dropbox.com/u/53097108/ihojosestudios/example/menucss3/bubble.png
 class="signout" = http://dl.dropbox.com/u/53097108/ihojosestudios/example/menucss3/arrow.png 
  • Eso es todo ya tendran un fabuloso menu desplegable con animacion en su blog.

Tipo: CSS3
Licencia: License Free (credito)
Sitio Web: Designmodo.com
Sitio Web: Valeriu Timbuc (web amiga)
Sitio Web: vladimirkudinov.com (web amiga)
enlaces de Valeriu Timbuc
Twitter: @vtimbuc

Entradas populares de este blog

Manual:Crear un Servidor dedicado para Halo CE

Halo CE es una variacion de halo combat e, solo que este halo solo puede usarse en multijugador, se pueden agregar mapas y estilos llamado mods.
A pesar de ser un juego que salió hace ya mucho tiempo aun es uno de los juegos más jugados Online con más de 300 servidores y más de 3000 jugadores al día.
Por tal motivo hay muchos que quieren tener un servidor dedicado a este juego para que los jugadores entren a su servidor.

Indice
Descarga de archivos necesarios.Configuracion de red.Creacion de Partidas.Configuracion del archivo init.txt y otros codigos.
Nombre de los mapas en codigo para init.txtIndicaciones de codigo
Descarga de los Archivos Necesarios.
- Archivos: (init.txt, haloceded.exe, haloce.exe, sapp/sapp.txt, Bienvenida.txt).

DescargarDescargas
Configurar RED.
Para configurar la red debes hacer lo siguiente.
Ve a Panel de Control, luego a Firewall de Windows.Ve a la pestaña de Excepciones. y das click en Agregar puerto.Para que sea más reconocible, en nombre escribe "Halo Cliente

Paquetes de Idioma Windows 7 MUI (64bits / x64)

Paquete de idiomas para windows 7 para aquellos que nacesitan tener varios idiomas en su pc.
Es compatible con la mayoria de versiones de Windows 7

Hay que tomar nota de que si se instalan demasiados paquetes de idioma adicionales, el espacio de disco y el rendimiento del sistema puede verse afectados. En particular, el espacio de disco y el rendimiento del sistema se ven afectados durante las operaciones de servicios, tales como las instalaciones de Service Pack (KB972813). Por lo tanto, se recomienda sólo añadir un paquete de idioma, el que necesitares exclusivamente.
Paquete de idiomas Windows 7 RTM MUI 64-bit (x64)
ArabeDescargasBulgaroDescargasChino (Simplifi...)DescargasChino (Tradicio...)DescargasCroataDescargasChecoDescargasDanésDescargasHolandésDescargasInglésDescargasEstonioDescargasFinlandésDescargasFrancésDescargasAlemánDescargasGriegoDescargasHebreoDescargasHúngaroDescargas

Manual:Codigos y plantillas Aegisub

Aegisub es un programa que le permite a las personas añadir subtitulos y karaoke a sus videos, actualmente Aegisub para dar esos estilos y animaciones a los subtitulos y karaokes usa una serie de codigos que activan dichas animaciones en un tiempo y colores determinados, como un script en HTML.
Los que más utilizan este programa son los Fansubs y empresas de karaoke.Los codigos son dificiles de aprender pero no imposibles si mantienes practica.REGLAS DE LOS CÓDIGOS.
Debes saber unas reglas para los codigos y es que cada coigo está entre parentesis {}. El codigo inicia con una diagonal inversa (invert slash) \.El indicador de la accion biene negreado.El codigo numerico saldrá normal.El codigo viene antes del texto.Cada codigo se divide con una diagonal inversa \. BÁSICO.
_________________________________________________________________________
Lo basico son esos codigos que son los más utilizados y faciles, además de que el mismo programa te da las opciones y no necesariamente tienes que…