Menú vertical con css3

Menú vertical con css3

Hola amigos, en esta nueva ocasión vamos a crear un menú vertical con css3 y html5, en la entrada anterior vimos como hacer este mismo menú vertical pero con versiones de HTML y css antiguas aunque agregamos algunos efectos de css3. Hoy vamos aprender a crear un menú vertical con css3 y html5 de una forma fácil y sin complicaciones. Si no has leído el mini-tutorial de crear menú con html5 y css3 creo que el mejor momento para darle un vistazo.

Al momento de plantearnos crear una página web es my importante pensar en el diseño que les vamos a ofrecer al visitante, y si le ofrecemos un diseño de calidad entonces tu web también será calificada como una web de calidad, en la siguiente imagen mostramos el menú vertical que vamos a crear.

También puedes entrar en el siguiente link para ver el ejemplo del menú vertical en línea.

Ver ejemplo online:menú vertical con css3

 

Mi primer menú vertical con css3 y html5

Bueno empezando con nuestro menú vamos a crear un documento HTML el cual le vamos a indicar que es HTML y por tanto tenemos que colocar etiquetas HTML para eso copiamos la estructura de nuestro documento HTML5 que contendrá nuestro menú.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Menu vertical con css3</title>
</head>
<body>
<section>
    <aside>
        <menu id="navegacion">Navegación</menu>
        <menu>Vertical-menu-css3</menu>
        <menu>Vertical-menu-css3</menu>
        <menu>Vertical-menu-css3</menu>
        <menu>Vertical-menu-css3</menu>
        <menu>Vertical-menu-css3</menu>
        <menu>Vertical-menu-css3</menu>
    </aside>
</section>
</body>
</html>

Si te fijas en nuestro documento HTML lo que hicimos fue crear la estructura básica en HTML5 y luego dentro de la etiqueta body o el cuerpo de nuestro documento html5 creamos un section el cual contendrá nuestra etiqueta aside que es propia de html5 para crear menú tanto a la izquierda como a la derecha.

Aunque ya sabemos que los menú se crean en lista dentro de una etiqueta ul aquí vamos a utilizar la etiqueta menú del propio html5 por eso creamos 6 etiquetas menú para cada link que vamos a crear, en caso de que quieras algunas mas puedes agregarla sin problema y estas tendrán el mismo estilo de las demás.

Ahora sitúate dentro de las etiquetas head y pega el siguiente código css3 que es el que le dará una apariencia mucho más elegante a nuestro menú vertical con css3.

<style>
section{
    width:90%;
    margin:10px auto;
    height:auto;
    background:#fff;   
    }
aside{
    width:25%;
    color:#06F;
    border:solid 1px #06F;   
    background:-moz-linear-gradient(#999 0%, #dadada 100%);
    background:-ms-linear-gradient(#999 0%, #dadada 100%);
    background:-o-linear-gradient(#999 0%, #dadada 100%);
    background:-webkit-linear-gradient(#999 0%, #dadada 100%);
    background:#dadada;
    border-radius:5px;
    }
menu{
    text-align:left;
    padding-top:5px;
    padding-bottom:5px;
    margin:5px auto;
    width:80%;
    padding:0px auto;
    border:dotted 0.5px #999;
    cursor:pointer;
    background:-moz-linear-gradient(#f9f9f9 0%, #dadada 100%);
    background:-ms-linear-gradient(#f9f9f9 0%, #dadada 100%);
    background:-o-linear-gradient(#f9f9f9 0%, #dadada 100%);
    background:-webkit-linear-gradient(#f9f9f9 0%, #dadada 100%);
    }
menu:hover{   
    background:-moz-linear-gradient(#f9f9f9 0%, #dadada 100%);
    background:-ms-linear-gradient(#f9f9f9 0%, #dadada 100%);
    background:-o-linear-gradient(#f9f9f9 0%, #dadada 100%);
    background:-webkit-linear-gradient(#f9f9f9 0%, #dadada 100%);
    color:blue;
    box-shadow:0 0 10px #fff;
    -moz-box-shadow:0 0 10px #fff;
    -ms-box-shadow:0 0 10px #fff;
    -o-box-shadow:0 0 10px #fff;
    -webkit-box-shadow:0 0 10px #fff;
    font-size:18px;
    }
menu#navegacion{
    margin:0px auto;
    background:-moz-linear-gradient(#F60 0%, #FC0 100%);
    background:-ms-linear-gradient(#f90 0%, #f60 100%);
    background:-o-linear-gradient(#f90 0%, #f60 100%);
    background:-webkit-linear-gradient(#f90 0%, #f60 100%);
    width:100%;
    color:#fff;
    padding:0px;
    border-top-right-radius:5px;
    border-top-left-radius:5px;
    height:30px;
    text-align:center;
    padding-top:10px;
    padding-bottom:10px;
    font-size:18px;   
    }
</style>

A diferencia de versiones anteriores a HTML5 lo que hacemos con css3 es llamar cada etiqueta por su nombre y aplicarle el estilo que les vamos a dar a cada uno en caso que dentro de dicha etiqueta hayan mas etiquetas entonces lo hacemos del mismo modo, primero llamamos a la etiqueta principal y luego a la etiqueta que está dentro de esta. Por eso notara que hay en una parte del código css3 que se escribe una llamada css3 de la siguiente forma menu#navegacion

Esto lo hacemos para que css3 le dé un estilo diferente a esta única etiqueta menú..
Para cambiar el estilo del menú solo tenemos que ir probando con los colores de fondo o background en caso de que quieran cambiar el color al pasar el mouse por encima solo tienen que irte a la línea menú:hover y camibar el background por el que ustedes quieran.

Bueno esto está todo sobre este menú vertical con css3, espero nos encontremos muy pronto en una próxima entrada.

Ver ejemplo online: menú vertical con css3

 

Gracias y hasta la próxima….

Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada.