¿Cómo marcar selección en un menú?

  • Autor Autor eddroos
  • Fecha de inicio Fecha de inicio
E

eddroos

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hice un menú sencillo para mi blog (bueno copié el código) y lo personalicé. Ahora solo quiero saber qué código debería añadir para que se marque la selección, es decir que si seleccionan por ejemplo "contact me" que se quede de un color diferente para que el visitante sepa en que sección está.

Este es mi blog, el menú está a la derecha de color rojo:
eddroos

Este es el código:
<div class="menudes">
<a href="#">Home</a>
<a href="#">Books</a>
<a href="#">Extras</a>
<a href="#">Ask me</a>
<a href="#">Why free</a>
<a href="#">You can help</a>
<a href="#">About this blog</a>
<a href="#">Contact me</a>
<div class="marca"></div>
</div>
<style>
.menudes {
position: relative;
overflow: hidden;
width: 200px;
margin: 10px auto 10px;
background: #FF5252;
text-align:center;
font-size: 0;
}
.menudes a {
display: block;
padding: 8px;
border-bottom: 2px solid #fff;
position: relative;
z-index: 2;
color: white;
text-decoration: none;
font-size: 14px;
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;
font-family: arial;
font-weight: bold;
}
.marca {
position: absolute;
top: -30%;
left: 0;
width: 100%;
height: 12.5%;
background: #F7A5A5;
-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;
}
.menudes a:hover {color: #FFF;}
.menudes a:nth-child(1):hover ~ .marca {top: 0%;}
.menudes a:nth-child(2):hover ~ .marca {top: 12.5%;} /* (100/nº elementos)x1 */
.menudes a:nth-child(3):hover ~ .marca {top: 25%;} /* (100/nº elementos)x2 */
.menudes a:nth-child(4):hover ~ .marca {top: 37.5%;} /* (100/nº elementos)x3 */
.menudes a:nth-child(5):hover ~ .marca {top: 50%;}
.menudes a:nth-child(6):hover ~ .marca {top: 62.5%;}
.menudes a:nth-child(7):hover ~ .marca {top: 75%;}
.menudes a:nth-child(8):hover ~ .marca {top: 87.5%;}
</style>
 
Me sumo a tu pregunta, creo que es una función que no he visto antes en blogger, quizás no sea posible, pero si lo es, sería genial que alguien lo comente
 
Pues por lo menos cuando agregas el menú en la parte de arriba sí se puede hacer la selección. Yo siento que igual debe poderse en los menús izquierdos 😀
 
hay varios ejemplos en codepen.io es una excelente plataforma donde desarrolladores comparten sus codigos
te comparto algunos que he encontrado

CSS Active Menu Item Arrow
Sass - Active navigation
Jquery Add active class to main menu

- - - Actualizado - - -

otra solucion que conozco aunque nose si te parezca muy extensa es hacer una clase que se llame "selection" o "active", entonces a esta clase en el css le vamos a dar la propiedad que tienes en hover, es decir que quede seleccionado, pero entonces debes hacerlo con cada pagina a la que vayas, me explico, si tienes pagina 1, entonces dentro de esa pagina el css de <a href="pagina1"> y la clase de esta debe ser "selection" o "active", ahora cuando vayas a la pagina 2, debes hacer lo mismo pero le cambias la clase a la opción dos y la quitas de la 1, y asi con el resto
 
Atrás
Arriba