03 junio 2014

[3] Como crear tu pagina web HTML5/CSS3 desde cero - El menú

 

Publicaciones relacionadas: 

Continuando con la serie de tutoriales sobre como realizar una pagina web en lenguaje HTML5/CSS3, y una vez terminada la cabecera, continuamos con la segunda sección, una de las mas importantes pues será el que llevara a los usuarios a cada pagina dentro de tu blog o pagina web, un sitio web sin menú es como comerse un huevo cocido sin sal, es una expresión muy popular acá en mi país, hermanos. Pero en fin, les muestro la estructura del menú, el cual debe incluirse entre la etiqueta <nav>...</nav> del sitio

<ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Blogs</a> <ul> <li><a href="#">Wordpress</a></li> <li><a href="#">Blogger</a></li> <li><a href="#">Joomla!</a></li> <li><a href="#">Blogia</a></li> </ul> </li> <li><a href="#">Programación</a> <ul> <li><a href="#">PHP</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">JAVA</a></li> <li><a href="#">C++</a></li> <li><a href="#">Python</a></li> <li><a href="#">VB.NET</a></li> </ul> </li> <li><a href="#">HTML/CSS</a></li> <li><a href="#">Generadores</a></li> <li><a href="#">Contacto</a></li> </ul>

Por los momentos se vería algo así



Es importante que sustituyamos el tamaño automático de la sección NAV en los estilos CSS, estableciéndole un limite de 28 píxeles, de manera que este no se agrande a mas de ese punto, recurre a los estilos CSS de la etiqueta NAV y cambia el height:auto; por height:28px;. Una vez realizado esto, pega el siguiente codigo CSS dentro de los estilos.


   body nav ul#menu {
    width:100%;
    height:auto;
   }
   body nav ul#menu a {
    text-decoration:none;
    color:#FFF;
    transition:all ease-in .3s;
   }
   body nav ul#menu a:hover {
    color:#2d3035;
   }
  
   body nav ul#menu li {
    float:left;
    margin: 0% 2%;
    margin-top:2px;
    list-style:none;
    transition:all ease-in-out .7s;
    padding-left:7px;
    padding-right:7px;
    border-radius:10px 10px 10px 10px;
    -webkit-border-radius:10px 10px 10px 10px; /* Chrome y Safari */
    -moz-border-radius:10px 10px 10px 10px; /* Firefox */
    -o-border-radius:10px 10px 10px 10px; /* Opera */
    -ms-border-radius:10px 10px 10px 10px; /* Internet Explorer */

   }
   body nav ul#menu li:hover {
    background:#EEE;
    color:#2d3035;
    border-radius:10px 10px 10px 10px;
    -webkit-border-radius:10px 10px 10px 10px; /* Chrome y Safari */
    -moz-border-radius:10px 10px 10px 10px; /* Firefox */
    -o-border-radius:10px 10px 10px 10px; /* Opera */
    -ms-border-radius:10px 10px 10px 10px; /* Internet Explorer */
   }
   body nav ul#menu ul {
    background:rgba(0, 0, 0, 0.8) url('') no-repeat fixed;
    display:none;
    position:absolute;
    width:18%;
    padding: 5px 5px 5px 18px;
    margin: 0;
    margin-top:2px;
    border-radius:0px 0px 10px 10px;
    -webkit-border-radius:0px 0px 10px 10px; /* Chrome y Safari */
    -moz-border-radius:0px 0px 10px 10px; /* Firefox */
    -o-border-radius:0px 0px 10px 10px; /* Opera */
    -ms-border-radius:0px 0px 10px 10px; /* Internet Explorer */
   }

   body nav ul#menu ul li {
    width:89%;
    margin:2% 0%;
    margin-top:2px;
    margin-bottom:0px;
   }
   body nav ul#menu li:hover ul {
    display:block;
   }


Y así es como se verá después de aplicarlos


Hasta el siguiente tutorial, si tienes alguna duda, pregúntame. Siempre a la orden.

Siguiente parte: El contenido

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo