Menu horizontal css y html

Menu horizontal css y html

Código CSS

Por ASP clásico / 11/10/2015 @ 09:24:34 / 1484 visitas

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 */
 }

Descubre más sobre cómo simplificar y optimizar tu trabajo empresarial en el Blog de CoreASP.