Leave selected menu

Question

I have a side menu and every time I click on an item to open a page, I would like it to be selected with a color.

Menu.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">

<nav class="aw-menu">
    <ul id="menu">
        <li class="is-selected">
            <h:link outcome="/page/main.xhtml"><i class="fa  fa-fw  fa-home"></i>Início</h:link>
        </li>


        <li>
            <h:link outcome="/page/cargo/cons_cargo.xhtml"><i class="fa  fa-fw  fa-ticket"></i>Cargos</h:link>
        </li>

        <li>
            <h:link outcome="/page/setor/cons_setor.xhtml"><i class="fa  fa-fw  fa-bookmark-o"></i>Setores</h:link>
        </li>

        <li>
            <h:link outcome="/page/aud/cons_auditoria.xhtml"><i class="fa  fa-fw  fa-crosshairs"></i>Auditoria</h:link>
        </li>

        <li>
            <h:link outcome="/page/seg/cons_usuario.xhtml"><i class="fa  fa-fw  fa-user"></i>Usuários</h:link>
        </li>

        <li>
            <h:link outcome="/page/seg/form_usuario_alt_senha.xhtml"><i class="fa  fa-fw  fa-lock"></i>Alterar Senha</h:link>
        </li>

    </ul>
</nav>

The css of the menu

    /* MENU */
.aw-menu {
    font-size: 1.1em;
}

.aw-menu > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aw-menu > ul a {
    display: block;
    padding: 10px 15px;

    text-decoration: none;
    font-weight: 500;
    color: #373737;
} 

.aw-menu > ul i {
    margin-right: 6px;
}

.aw-menu > ul a:hover, .aw-menu > ul a:focus {
    background-color: #dfdfdf;
}

.aw-menu > ul .is-selected {
    border-left: 3px solid #0978EA;
    background-color: #f3f3f3;
}

.aw-menu > ul .is-selected a {
    margin-left: -3px;
    color: #0978EA;
}

Answer 1

I like to use javascript to do the service:

$(document).ready(function(){
    var get = document.URL;
    if(get.match(/main/i)){
        $('.aw-menu li:eq(0)').addClass('is-selected');
    }
    if(get.match(/cargo/i)){
        $('.aw-menu li:eq(1)').addClass('is-selected');
    }
    if(get.match(/setor/i)){
        $('.aw-menu li:eq(2)').addClass('is-selected');
    }
});

Being extremely flexible makes it very simple to make any customization that the page requires.

Answer 2

Your css should be implemented for "li" tag and not for "ui".

.aw-menu > li a:hover, .aw-menu > li a:focus {
    background-color: #dfdfdf;
}
.aw-menu > li a {
    background-color:transparent
}

I hope to help.

Answer 3

You can add a class manually to the page you are on, i.e.:

If you are on the page cons_cargo.xhtml:

<li class="active-menu">
      <h:link outcome="/page/cargo/cons_cargo.xhtml"><i class="fa  fa-fw  fa-ticket"></i>Cargos</h:link>
</li>

And finally in your CSS:

...
.active-menu {
    color: red !important; /* aqui é para reforçar esta propriedade, caso tenha definido alguma outra cor neste elemento mais abaixo */
}
...