Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

Cómo mostrar un elemento de menú activo con CSS

23 de octubre de 2014

Hola,

¿cómo hago para que el botón que tengo seleccionado sea de un color diferente hasta que cambie de botón? He tratado con el active pero sólo me funciona como un hover mientras selecciono unos pocos segundos y se desvanece.

Gracias.

css

Respuestas

#1

Efectivamente el pseudo-estado active no te va a servir porque sólo dura mientras el usuario está pinchando en ese elemento. Para poder sugerirte una buena solución, necesitaríamos ver el código HTML que utilizas en el menú y que nos explicaras con más detalle cómo se activa un elemento del menú o que tiene que hacer el usuario para activarlo.

@javiereguiluz

23 octubre 2014, 22:56
#2

Solo tiene que entrar para activarlo y quiero que se distinga en cual estoy parada del resto por el color

ul.menu > li > a:active:before {
    background-color: blue;
}

Gracias

@SAMMYVARGAS6

23 octubre 2014, 23:51
#3

Suponiendo que tu código HTML sea el siguiente:

<ul class="menu">
  <li><a href="#"> ... </a></li>
  <li><a href="#"> ... </a></li>
  <li><a href="#"> ... </a></li>
  <li><a href="#"> ... </a></li>
</ul>

Entonces tienes al menos dos opciones de hacer lo que quieres. Si sólo hay que activar el menú cuando el usuario entra en una de sus opciones, entonces tienes que usar el hover en vez de el active:

ul li:hover a {
    background: red;
}

Si lo que quieres es que el menú seleccione automáticamente el elemento activo según la página en la que se encuentre el usuario, entonces tendrás que añadir un id o un class al <body> de la página y hacer lo siguiente:

<body id="portada">
  <ul class="menu">
    <li><a href="#"> ... </a></li>
    <li><a href="#"> ... </a></li>
    <li><a href="#"> ... </a></li>
    <li><a href="#"> ... </a></li>
  </ul>
</body>
body#portada ul.menu li:nth-child(1) a {
  background: red;
}

Como tendrás que añadir id o class al <body> de cada sección, el selector CSS al final será algo como lo siguiente:

body#portada ul.menu li:nth-child(1) a,
body#noticias ul.menu li:nth-child(2) a,
body#productos ul.menu li:nth-child(3) a,
body#contacto ul.menu li:nth-child(4) a {
  background: red;
}

@javiereguiluz

24 octubre 2014, 7:54