miércoles, diciembre 30, 2015

[TutosBlogs] Menu Deslizante!

By: Ghaaby Captor | Fecha: 12/30/2015 |

 mis loqueros!! aquí vengo con un pequeño tutorial, de ese menú que ven arriba! es muy facil de colocarlo!! 




<div class="module blue">
  <h2>AQUI EL TEXTO<a href="AQUI-EL-URL">TITULO 1</a></h2>
</div>
<div class="module yellow">
   <h2>AQUI EL TEXTO<a href="AQUI-EL-URL">TITULO 2</a></h2>
</div>
<div class="module green">
   <h2>AQUI EL TEXTO<a href="AQUI-EL-URL">TITULO 3</a></h2>
</div>
<div class="module red">
   <h2>AQUI EL TEXTO<a href="AQUI-EL-URL">TITULO 4</a></h2>
</div>

/* Menu --------------------------------- */
.module h2 {
    background-color: #DCD7D7;
    border-radius: 20px 0 0 20px;
    color:#333;
    font-family: Verdana;
    font-size: 16px;
    font-weight: bold;
    line-height: 32px;
    margin: 0;
    padding: 0 0 0 20px;
   text-shadow: -5px 5px 5px rgba(0,0,0, 0.3);
    border-bottom: 1px;
    border-bottom-style: inset;
    border-color: #222;
    box-shadow: inset 0 0 15px 10px #B9B4B4;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out 0s;
}
.module h2:hover {
    background-color: #DCD7D7;
    border-radius: 20px 0 0 20px;
    color:#000;
    font-family: Verdana;
    font-size: 16px;
    font-weight: bold;
    line-height: 32px;
    margin: 0;
    padding: 0 0 0 20px;
   text-shadow: -5px 5px 5px rgba(0,0,0, 0.3);
    border-bottom: 1px;
    border-bottom-style: inset;
    border-color: #222;
    box-shadow: inset 0 0 15px 10px #B9B4B4;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out 0s;
}
.module h2 a { /* el rectángulo de la derecha con el subtítulo */
    /* el color del fondo y el borde son iguales al color de fondo de la página */
    border-left: 5px solid #101921;
    color: #101921;
    float: right;
    /* la fuente del texto */
    font-size: 18px;
    text-decoration: none;
    text-shadow: none;
    /* efectos varios incluyendo una transición */
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover { /* se agranda al poner el cursor encima */
  padding: 0 32px;
}
/* las reglas genéricas de after y before */
.module h2 a:before, .module h2 a:after {
    content: "";
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #101921; /* el color es igual al fondo de la página */
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}
/* y los colores de cada uno de los enlaces */
.module.blue h2 a {background-color: #A2D6EB;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D6EB;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}
.module.green h2 a {background-color: #9CF1A4;}
.module.green h2 a:hover {background: #BBFFCF;}
.module.green h2 a:after {border-right: 6px solid #9CF1A4;}
.module.green h2 a:hover:after {border-right-color: #BBFFCF;}
.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}
.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;} 
avatar
Rukii Holic
Admin
30 de diciembre de 2015, 17:44

*A*
maravilloso! muchas gracias por el tutorial! <3

avatar
30 de diciembre de 2015, 18:07

Uy yo me hago un lio con los códigos si ando de animo lo intentare gracias por el tutorial . Te deseo un buen año

avatar
genesis
Admin
30 de diciembre de 2015, 18:10

GRACIAAAAAAS!
Yo quiero colocar el menu arriba, antes de la cabecera y aun no se xd
ese esta bueno, saludos

avatar
Tinti chan
Admin
30 de diciembre de 2015, 19:43

Holaaa!!!!!.
Me encanto el tutorial y el meno,voy a ver si lo pongo en mi nueva plantilla :D.A proposito me sigue encantando tu voz ^^.
Besos ^3^

avatar
Bam
Admin
30 de diciembre de 2015, 20:18

Gracias por le tuto del menu n.n
Besos!

avatar
Yurika
Admin
30 de diciembre de 2015, 22:45

muy chulo gracias ^^

avatar
Mine -Chan
Admin
31 de diciembre de 2015, 13:13

Hola!!^^
Muchas gracias por el tutorial! siempre hace falta saber mas cositas para decorar nuestros blog~
Saluditos♥ y feliz año nuevo!

avatar
S4ku-Chan
Admin
7 de enero de 2016, 5:49

​(≧▽≦)/ Holaaa!!!
Hermoso tutorial me gustan mucho los menus deslizante :D

穛 S4Ku SEK4i®

avatar
Natalia
Admin
9 de enero de 2016, 1:23

De momento el mundo de los códigos lo veo super complicado. Cómo no puede existir una forma más sencilla? Muchas gracias por el tutorial con tiempo creo que se puede aprender guay con tus explicaciones. Un besazo y buen finde.