En esta nueva entrega les traigo como hacer que nuestro menu estatico sin importar la posicion que tenga puede estar horizontalmente o verticalmente.
Por lo genera el menu horizontal estatico o fixed se utiliza cuando un post o la cantidad de post ubicada en la pagina principal o una pagina de X categorio su contenido es extendo.
Un ejemplo de esto es cuando nos desplazamos verticalmente hacia abajo o arriba con el scroll del mouse nuestro menu podriamos decir el menu principal queda estatico en la parte superior del navegador.
Otro ejemplo seria cuando miramos icono sociales al lado izquierdo o derecha de nuestro navegador y de la misma forma nos desplazamos ya horizontal o vertical estos iconos o menu se queda fijo.
Estructura del HTML
La estructura de nuestro html sera sencilla tendremos un
div wrapper-> que contendra todas nuestras demas etiquetas
nav-> para crear nuestro menu
div container-> donde estaran nuestras publicaciones
footer-> para agregar los credito o widget
pero no se me emocionen tanto porque no vamos agregar ningun tipo de contenido porque el tutorial trata de como crear un menu fijo.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menus fijos parte 1 </title>
</head>
<body>
<div id="wrapper">
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
<header>
</header>
<div id="container">
</div>
<footer>
</footer>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menus fijos parte 1 </title>
</head>
<body>
<div id="wrapper">
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
<header>
</header>
<div id="container">
</div>
<footer>
</footer>
</div>
</body>
</html>
CODIGO CSS
formatea todos los margenes y padding que tiene por defecto cada navegador
*{
margin:0;
padding:0;
}
Se le asigna un color por defecto al body
body
{
background: #cecece;
}
Se fija la etiqueta nav asi de esa manera cuando uno baje o sube se mantendra en su posicion
nav
{
background: #58852E;
position: fixed;
top: 0;
left: 0;
height: 7%;
width: 100%;
}
Que toda etiqueta li que este dentro de un ul y dentro de una etiqueta nav el display inline-block ara que se alinien hacia la dereche todos los elementos y que tenga un espacio interno de 25px de izq y derecha es por eso que se ven separados.
nav ul li
{
display: inline-block;
line-height: 35px;
padding: 0 25px;
}
En esta codigo le decimo que todos los link tenga un color de texto blanco el tipo de letra es verdana negrita y q no tenga ninguna decoracion, me refiero que le quite el interlineado que tienen todos los link.
nav ul li a
{
color: #FFFFFF;
font-family: verdana;
font-weight: bold;
text-decoration: none;
}
Y por ultimo cuando uno pase el mouse sobre cualquier link tenga un fondo de color azul
nav ul li a:hover
{
background: #5FBDEB;
display: block;
}
*{
margin:0;
padding:0;
}
body
{
background: #cecece;
}
nav
{
background: #58852E;
position: fixed;
top: 0;
left: 0;
height: 7%;
width: 100%;
}
nav ul li
{
display: inline-block;
line-height: 35px;
padding: 0 25px;
}
nav ul li a
{
color: #FFFFFF;
font-family: verdana;
font-weight: bold;
text-decoration: none;
}
nav ul li a:hover
{
background: #5FBDEB;
display: block;
vertical-align: ;
}
margin:0;
padding:0;
}
body
{
background: #cecece;
}
nav
{
background: #58852E;
position: fixed;
top: 0;
left: 0;
height: 7%;
width: 100%;
}
nav ul li
{
display: inline-block;
line-height: 35px;
padding: 0 25px;
}
nav ul li a
{
color: #FFFFFF;
font-family: verdana;
font-weight: bold;
text-decoration: none;
}
nav ul li a:hover
{
background: #5FBDEB;
display: block;
vertical-align: ;
}
Por ultimo dentro del div container agregale bastante texto y despues carga o actualiza tu navegdor.
No hay comentarios :
Publicar un comentario