[3] Como crear tu pagina web HTML5/CSS3 desde cero - El menú
Publicaciones relacionadas:
- [1] Como crear tu pagina web HTML5/CSS3 desde cero - La estructuración
- [2] Como crear tu pagina web HTML5/CSS3 desde cero - La cabecera
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;
}
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.
![[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihK06o3qxRgndTN83gagg5xMy8Y0s4rg9GCiBabAgKpoFDpCUkp8Al_rfR6HKBuaEHmmst0IOnxKE7V2kHfX63AoPgzF_mZQ-nZ-Bkj4vdbhyphenhyphenPMU_bP1Dk_0ZJf_4_NgJh7dzseZHN7Okh/s72-c/calculadora.JPG "[1] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Diseño)")
No hay comentarios :
Publicar un comentario