Menu horizontal css y html

Código CSS
  • Por CoreASP /
  • 11/10/2015 @ 09:24:34  /
  • 1004 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 */
 }

tags:

En esta sección encontrarás una mezcla de códigos recopilados de fuentes públicas de Internet y otros creados por CoreASP. Estos recursos se comparten de buena fe con el único objetivo de servir como base de conocimiento en el desarrollo de aplicaciones en ASP Clásico. CoreASP no garantiza la precisión, vigencia ni funcionamiento de los artículos o fragmentos de código publicados, y no se hace responsable por el uso que se les dé. Se recomienda siempre revisar, adaptar y probar el código antes de implementarlo en entornos de producción.