Mas abajo os presento un sencillo menú hecho con css y un poco de html.
Pasar el ratón sobre las celdas para visualizar el efecto hover y con un toque
me redirecciona al lugar correspondiente.Que en este caso son plantillas web mías.Instrucciones:
Para adaptarlo solo debemos de cambiar la almohadilla por la direcion adonde queremos dirigir y el texto en rojo por el titulo que queramos.
<a href="#">Inicio</a>
Esto para el html y para el css jugaremos con los colores para el fondo del contenedor cambiar esto #000 color negro marcado en rojo por el color que queramos recordar usar código hexadecimal o bien su palabra inglesa y para la linea k sale al hacer hover debemos de cambiar la palabra orange por la palabra del color que queramos ejemplo red para el rojo gree para el verde blue para el azul etc...
--------------------------------------------------- Aki os dejo el css.--------------------------------
/* Contenedor principal adaptable */
.menudesv {
position: relative;
width: 100%;
max-width: 300px;
min-width: 100px;
overflow: hidden;
margin: 10px auto;
background: #000;
text-align:center;
}
/* Formato de los enlaces */
.menudesv a {
position: relative;
z-index: 2;
display: block;
width: 100%;
padding: 8px;
border: 1px solid #333;
color: white;
font-family: arial;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
/* Ajustes de bordes para no doblar su ancho */
.menudesv a {
border-top: 0;
}
.menudesv a:first-child {
border-top: 1px solid #333 !important;
}
/* Rectángulo que aparecerá al hacer hover */
.marcav {
position: absolute;
top: -30%;
left: 0;
width: 100%;
height: 12.5%;
background: orange;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Sucesos al superponer el puntero */
.menudesv a:hover {
color: #000;
}
.menudesv a:nth-child(1):hover ~ .marcav {
top: 0%;
}
.menudesv a:nth-child(2):hover ~ .marcav {
top: 12.5%; /* (100/nº elementos) * 1 */
}
.menudesv a:nth-child(3):hover ~ .marcav {
top: 25%; /* (100/nº elementos) * 2 */
}
.menudesv a:nth-child(4):hover ~ .marcav {
top: 37.5%; /* (100/nº elementos) * 3 */
}
.menudesv a:nth-child(5):hover ~ .marcav {
top: 50%; /* etc, etc */
}
.menudesv a:nth-child(6):hover ~ .marcav {
top: 62.5%;
}
.menudesv a:nth-child(7):hover ~ .marcav {
top: 75%;
}
.menudesv a:nth-child(8):hover ~ .marcav {
top: 87.5%;
}
-------------------Y Mas abajo el Html.-------------------------------
<div class="menudesv">
<a href="#">Inicio</a>
<a href="#">Pintura</a>
<a href="#">Escultura</a>
<a href="#">Grabados</a>
<a href="#">Música</a>
<a href="#">Danza</a>
<a href="#">Acerca de</a>
<a href="#">Contacto</a>
<div class="marcav"></div>
</div>
----------- Y por ultimo la Demo---------------------------
