9

Tengo el siguiente código:

#main,
#main ul,
#main li,
#main a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: normal;
    text-decoration: none;
    line-height: 1;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    position: relative;
}

#main{
    width: 250;
    border-right: 1px solid #ececec;
}

#main a {
    line-height: 1.3;
}

#main > ul > li {
            background: #f7f7f7;
            background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec));
            background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%);
            background: linear-gradient(#f7f7f7 0%, #ececec 100%);
        }

#main > ul > li a:hover {
        background: #2E779A;
        background: -moz-linear-gradient(#2E779A 0%, #2E779A 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2E779A), color-stop(100%, #2E779A));
        background: -webkit-linear-gradient(#2E779A 0%, #2E779A 100%);
        background: linear-gradient(#2E779A 0%, #2E779A 100%);
        color: #ffffff;
    }

#main > ul > li > a {
        font-size: 14px;
        display: block;
        color: #2E779A;
        border: 1px solid #ececec;
        border-top: none;
        text-shadow: 0 -1px 1px #ececec;
    }
    <div id="main">
<ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Sobre nosotros</a></li>
    <li><a href="#">Producto</a></li>
    <li><a href="#">Contacto</a></li>
</ul>

</div>

Y lo que quiero es que al momento de seleccionar un campo, este mismo cambie de color para señalarle al usuario en que sección se encuentra ¿Puedo hacer esto con css o necesito usar jQuery?

2 respuestas 2

5

Una opción para hacerlo sólo con HTML y CSS (sin JavaScript o jQuery) sería usando :target. La pseudo-clase :target representa un elemento único cuyo id coincide con el fragmento identificador de la URI de la página (la parte que va detrás de la almohadilla #). Así por ejemplo, si la URL es http://mi.pagina.com/index.php#seccion-2, el elemento que se seleccionará con :target será el que tenga id="seccion-2".

Las ventajas de este método son que es sencillo de desarrollar y no requiere JavaScript; los inconvenientes son que no está soportado en versiones antiguas de IE (8 e inferiores) y que si usas enlaces internos (a anclajes dentro de la página) no funcionaría del todo bien y requeriría bastantes cambios... pero si ése no es tu caso, ésta es una solución limpia y sencilla.

Los pasos para cambiar el código de arriba serían muy simples:

  1. Añade un id único a cada enlace dentro del menú:

    <li><a id="inicio" href="#">Inicio</a></li>
    
  2. Haz que cada enlace apunte a su propio id:

    <li><a id="inicio" href="#inicio">Inicio</a></li>
    
  3. Define los estilos que quieras para resaltar el menú activo. Por ejemplo, si quieres que tenga fondo rojo y letras blancas:

     #main > ul > li > a:target { background:red; color:white; }
    

Aquí puedes ver una demo de cómo sería:

#main,
#main ul,
#main li,
#main a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: normal;
    text-decoration: none;
    line-height: 1;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    position: relative;
}

#main{
    width: 250;
    border-right: 1px solid #ececec;
}

#main a {
    line-height: 1.3;
}

#main > ul > li {
            background: #f7f7f7;
            background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec));
            background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%);
            background: linear-gradient(#f7f7f7 0%, #ececec 100%);
        }

#main > ul > li a:hover {
        background: #2E779A;
        background: -moz-linear-gradient(#2E779A 0%, #2E779A 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2E779A), color-stop(100%, #2E779A));
        background: -webkit-linear-gradient(#2E779A 0%, #2E779A 100%);
        background: linear-gradient(#2E779A 0%, #2E779A 100%);
        color: #ffffff;
    }

#main > ul > li > a {
        font-size: 14px;
        display: block;
        color: #2E779A;
        border: 1px solid #ececec;
        border-top: none;
        text-shadow: 0 -1px 1px #ececec;
    }

/* Opción seleccionada */
#main > ul > li > a:target {
    background:red;
    color:white;
}
<div id="main">
<ul>
    <li><a id="inicio" href="#inicio">Inicio</a></li>
    <li><a id="nosotros" href="#nosotros">Sobre nosotros</a></li>
    <li><a id="producto" href="#producto">Producto</a></li>
    <li><a id="contacto" href="#contacto">Contacto</a></li>
</ul>

</div>

2
  • ¿por qué no funciona cuando coloco una URL, por ejemplo: 'bpbmsmii.blogspot.pe/search/label/etiqueta2' o 'bpbmsmii.blogspot.pe/p/pagina-1.html'? Commented el 17 ene. 2017 a las 22:21
  • 1
    @BrunoMauricio no funciona con el esas URLs porque no son enlaces internos dentro de la misma página (con #). El método que puse solo funciona cuando son enlaces dentro de la misma página y no a otras páginas. Podría funcionar apuntando a otras páginas, pero tendrías que poner el # y el id del elemento que quieres resaltar (algo que no tienen las URLs que compartes)
    – Alvaro Montoro
    Commented el 18 ene. 2017 a las 5:49
3

A tu ejemplo le he agregado un estilo .seleccionado y un manejador del evento click. Luego utilizando addClass y removeClass se produce el efecto deseado.

Ventajas: no necesitas modificar el tu estructura ni usar ids fijos.-

Desventajas: tienes que utilizar jQuery.

$(function() {
  $("#main ul li a").click(function() {
    // quitar .seleccionado a todos (por si hay alguno)
    $("#main ul li a").removeClass("seleccionado");
    // agregar seleccionado a "este" elemento.
    $(this).addClass("seleccionado");
  });
});
#main > ul > li > a.seleccionado {
  background: red;
  color: #ffffff;
}

#main,
#main ul,
#main li,
#main a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  position: relative;
}
#main {
  width: 250;
  border-right: 1px solid #ececec;
}
#main a {
  line-height: 1.3;
}
#main > ul > li {
  background: #f7f7f7;
  background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec));
  background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%);
  background: linear-gradient(#f7f7f7 0%, #ececec 100%);
}
#main > ul > li a:hover {
  background: #2E779A;
  background: -moz-linear-gradient(#2E779A 0%, #2E779A 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2E779A), color-stop(100%, #2E779A));
  background: -webkit-linear-gradient(#2E779A 0%, #2E779A 100%);
  background: linear-gradient(#2E779A 0%, #2E779A 100%);
  color: #ffffff;
}
#main > ul > li > a {
  font-size: 14px;
  display: block;
  color: #2E779A;
  border: 1px solid #ececec;
  border-top: none;
  text-shadow: 0 -1px 1px #ececec;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <ul>
    <li><a href="#">Inicio</a>
    </li>
    <li><a href="#">Sobre nosotros</a>
    </li>
    <li><a href="#">Producto</a>
    </li>
    <li><a href="#">Contacto</a>
    </li>
  </ul>
</div>

4
  • 1
    Siempre se podría hacer sin jQuery y eliminar esa desventaja. Y con querySelectorAll y querySelector serían casi las mismas líneas de código que con jQuery jsfiddle.net/6re83ueu
    – Alvaro Montoro
    Commented el 1 mar. 2016 a las 5:29
  • estoy de acuerdo, pero como la pregunta esta etiquetada como jQuery opte por ese camino :) Commented el 1 mar. 2016 a las 10:22
  • ¿Se puede cambiar también el color del link? lo intento con color: #ffffff pero no me funciona
    – Akiva
    Commented el 1 mar. 2016 a las 15:37
  • 1
    @Akiva he editado la respuesta, con un selector mas especifico funciona sin problemas, lo puse así antes para que se entienda la idea. pero en la practica utiliza un selector mas especifico que el anterior para poder pisar los estilos. Saludos! Commented el 1 mar. 2016 a las 16:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.