Menu horizontal css y html

Escrito por Programador ASP clásico en Hojas de estilo CSS


Este es un ejemplo de crear un menú horizontal usando solamente CSS nada de javascript ni jquery.

Código html:

<div class="menudes">
<a href="">Inicio</a>
<a href="">Portfolio</a>
<a href="">Acerca de</a>
<a href="">Contacto</a>
<div class="marca"></div>
</div>


El código CSS en 3 estilos diferentes:

Estilo 1:

.menudes {
position: relative;
overflow: hidden;
width: 70%;
margin: 10px auto 10px;
border-radius: 8px;
background: #025BA3;
text-align:center;
}
.menudes a {
display: inline-block;
width: 25%; /* 100% dividido por el número de elementos del menú */
box-sizing: border-box;
padding: 10px 5px;
color: #fff;
text-decoration: none;
}
.marca {
position: absolute;
bottom: 4px;
left: -12.5%; /* Al menos 1/2 del ancho de cada enlace */
width: 12.5%; /* 1/2 del ancho de cada enlace */
height: 4px;
background: #fff;
transition: 0.5s ease-in-out;
}
.menudes a:nth-child(1):hover ~ .marca {
left: 6.25%; /* 1/4 Ancho del enlace */
}
.menudes a:nth-child(2):hover ~ .marca {
left: 31.25%; /* 1/4 Ancho del enlace + 1 vez ancho enlace */
}
.menudes a:nth-child(3):hover ~ .marca {
left: 56.25%; /* 1/4 Ancho del enlace + 2 veces ancho enlace */
}
.menudes a:nth-child(4):hover ~ .marca {
left: 81.5%; /* 1/4 Ancho del enlace + 3 veces ancho enlace */
}


Estilo 2:

.menudes a {
border-right: 2px solid #fff;
position: relative;
z-index: 2;
}
.menudes a:last-child {
border-right:2px solid transparent;
}
.marca {
box-sizing: border-box;
position: absolute;
bottom: 0;
left: -30%;
width: 25%;
height: 40px;
background: #fff;
opacity:.5;
transition: 0.5s ease-in-out;
z-index: 1;
}
.menudes a:hover ~ .marca2 {
margin-left: -1px;
}
.menudes a:nth-child(1):hover ~ .marca {
left: 0%;
}
.menudes a:nth-child(2):hover ~ .marca {
left: 25%; /* 1/4 del ancho total */
}
.menudes a:nth-child(3):hover ~ .marca {
left: 50%; /* 2/4 del ancho total */
}
.menudes a:nth-child(4):hover ~ .marca {
left: 75%; /* 3/4 del ancho total */
}


Estilo 3:

.menudes {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto 10px;
text-align:center;
}
.menudes a {
display: inline-block;
width: 20%; /* 100% dividido por el número de elementos */
box-sizing: border-box;
padding: 10px 5px;
color: #000;
background: #ccc;
opacity:.5;
text-decoration: none;
font-weight:bold;
text-align: center;
border-right: 2px solid #fff;
position:relative;
z-index:2;
}
.menudes a:first-child {
border-left: 1px solid #fff;
}
.marca {
position: absolute;
width: 20%;
height: 38px;
box-sizing: border-box;
bottom: 0;
left: -30%;
border: 2px solid #990000;
transition: 0.5s ease-in-out;
z-index:1;
}
.menudes a:hover ~ .marca {
margin-left: -1px;
}
.menudes a:nth-child(1):hover ~ .marca {
left: 0%;
}
.menudes a:nth-child(2):hover ~ .marca {
left: 20%; /* 1/5 del ancho total */
}
.menudes a:nth-child(3):hover ~ .marca {
left: 40%; /* 2/5 del ancho total */
}
.menudes a:nth-child(4):hover ~ .marca {
left: 60%; /* 3/5 del ancho total */
}
.menudes a:nth-child(5):hover ~ .marca {
left: 80%; /* 4/5 del ancho total */
}

Publicado el 11/09/2014 a las 09:24:34 hrs. | 560 visitas.

Subir
Web hosting by Somee.com