lunes, septiembre 08, 2014

[ TutosBlogs ] Menú con CSS3

By: Ghaaby Captor | Fecha: 9/08/2014 |

Hola mis loqueros!!  .....¿como les van?  ......yo bien!  .... en esta ocasión les enseñare como colocar un menu con Css3 en blogger! si quieren ver el demo



CODIGO HTML

<ul class="mh-menu">

    <li>

        <a href="URL DE LA PAGINA">

            <span>TITULO 1</span>

            <span>TITULO2</span>

        </a>

        <img src="URL DE LA IMAGEN"/>

    </li>

   

</ul>




NOTA: Si quieren agregar mas opciones al menú deben copiar desde <li> HASTA </li>
y que este dentro del <ul> y </ul>



CODIGO CSS
.mh-menu{

    height: 385px;

    width: 600px;

    margin: 20px auto;

    position: relative;

list-style:none;

}

.mh-menu li{

    width: 300px;

list-style:none;

}

.mh-menu ul{

list-style:none;

}

.mh-menu li a {

    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);

    border: 1px solid #ddd;

    display: block;

    height: 97px;

    padding: 0 10px;

    position: relative;

    text-align: right;

    width: 280px;

    z-index: 10;

    border-radius: 10px;

  transition: all 0.3s ease-in-out 0s;

}

.mh-menu li:hover a {

    background: none repeat scroll 0 0 rgba(225, 239, 240, 0.4);

    border-radius: 50px 10px;

    transition: all 0.3s ease-in-out 0s;

}



.mh-menu li a span{

    display:block;

}

.mh-menu li a span:first-child {

    color: #000;

    font-family: 'Alegreya SC',Georgia,serif;

    font-size: 16px;

    padding-top: 10px;

    text-shadow: 0 0 1px #ccc;

}

.mh-menu li a span:nth-child(2){

    font-weight: 400;

    font-style: italic;

    font-size: 28px;

    font-family: 'Alegreya SC', Georgia, serif;

    -webkit-transition: color 0.2s linear;

    -moz-transition: color 0.2s linear;

    -o-transition: color 0.2s linear;

    -ms-transition: color 0.2s linear;

    transition: color 0.2s linear;

}

.mh-menu li:nth-child(1):hover span:nth-child(2){

    color: #ae3637;

}

.mh-menu li:nth-child(2):hover span:nth-child(2){

    color: #c3d243;

}

.mh-menu li:nth-child(3):hover span:nth-child(2){

    color: #d38439;

}

.mh-menu li:nth-child(4):hover span:nth-child(2){

    color: #8e7463;

}

.mh-menu li img{

    position: absolute;

    z-index: 1;

    left: 0px;

    top: 0px;

    opacity: 0;

    -webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

    -moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

    -o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

    -ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

}

.mh-menu li:hover img{

    left: 300px;

    opacity: 1;

}



 By tympanus




avatar
Lee Rae Mi
Admin
8 de septiembre de 2014, 13:23

waaaa se ve muy bueno^^gracias por el menu,waa hace tiempo que no pasaba por aqui^^
saludos

avatar
Rukii Saito
Admin
8 de septiembre de 2014, 13:33

Wooooo me gusto mucho eso, no sabia como utilizar el cs3 ya q lo probé en mi blogs de pruebas para ver como queda! *-*
Muy buena entrada, saludooos

avatar
кuму
Admin
8 de septiembre de 2014, 15:31

muchaas gracias por el menu es espectacular *o*

avatar
8 de septiembre de 2014, 16:48

Uy gracias, por el codigo. Te deseo una buena semana

avatar
scaramanga
Admin
8 de septiembre de 2014, 22:04

Esto me recuerda al curso de CSS que hice hace tres años. Te ha salido un tutorial con el que lograr resultados muy funcionales y alegres para la vista; desde luego bastante más completos que la web que me salió en su día XD. Felicidades.

avatar
Rei Osaki:
Admin
9 de septiembre de 2014, 3:19

Un menú bonito y sencillo ^^
Gracias Ghaaby! :3

Espero que todo vaya bien! :D

avatar
Yurika
Admin
9 de septiembre de 2014, 7:29

buen tutorial gracias ^^

avatar
Amary Miau
Admin
9 de septiembre de 2014, 8:30

Muchas gracias por el tutorial, el menu se ve genial!! Me encantó el efecto de las imágenes :3 Lo anotaré para próximos diseños. Se agradece!

avatar
Neko-chan
Admin
9 de septiembre de 2014, 10:37

wooooow me encanto el tuto *0* me gusta como queda :3 puede que lo use ^u^
saluditos! ^^

avatar
Yami chan
Admin
9 de septiembre de 2014, 11:56

Me encanto el tutorial,lo voy a usar en uno de mis blogs,besos ^3^