Como marcar seleção em um menu?

  • Autor Autor eddroos
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
E

eddroos

Curioso
Usuário com poucas negociações! Use sempre o saldo do 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>
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
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
 
Voltar
Topo