jquery – How to highlight a selected item in a menu?

Question:

I have the following code:

#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>

And what I want is that when selecting a field, it changes color to indicate to the user which section it is in. Can I do this with css or do I need to use jQuery?

Answer:

An option to do it with only HTML and CSS (without JavaScript or jQuery) would be using :target . The :target pseudo-class represents a unique element whose id matches the identifier fragment of the page's URI (the part after the hash #). For example, if the URL is http://mi.pagina.com/index.php#seccion-2 , the element that will be selected with :target will be the one with id="seccion-2" .

The advantages of this method are that it is easy to develop and does not require JavaScript; the drawbacks are that it is not supported in old versions of IE (8 and lower) and that if you use internal links (to anchors within the page) it would not work quite well and would require many changes … but if that is not your case , this is a clean and simple solution.

The steps to change the code above would be very simple:

  1. Add a unique id to each link within the menu:

     <li><a id="inicio" href="#">Inicio</a></li>
  2. Make each link point to its own id :

     <li><a id="inicio" href="#inicio">Inicio</a></li>
  3. Define the styles you want to highlight the active menu. For example, if you want it to have a red background and white letters:

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

Here you can see a demo of how it would be:

#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>
Scroll to Top