menú responsive marcar activo

[fede5426]

Para que la linea de abajo y el color se muevan al menu clickeado, necesitas jquery..

Creas en CSS una clase donde vas a indicar los estilos que va a tener tu menu activo (en mi caso, en el ejemplo, la clase se llama "activo"), despues con jquery haces que cuando se clickee uno de los enlaces del menu, le quite la clase "activo" a todos los enlaces, y se la agregue solo al que clickeaste.

Te dejo un codepen funcionando y el ejemplo del codigo por aca:

http://codepen.io/fede5426/pen/ZGyEBb

Código HTML:

<ul>
    <li><a href="#" class="activo">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contacto</a></li>
</ul>
 

Código CSS:

li{
    display:inline-block;
    padding:1em;
}
 
a{
    text-decoration:none;
    color:#161616;
    font-weight:bold;
    padding:1em;
}
 
a:hover{
    color: orange;
}
 
.activo{
    color: orange;
    border-bottom: 3px solid orange;
}
 

Código Javascript:

$(document).ready(function(){
    
    $("a").click(function(){
        
        $("a").removeClass("activo");
        $(this).addClass("activo")
        
    });
    
    
});
 

Espero te sirva, si no entendes algo del codigo pregunta sin miedo..

Saludos