Leave selected menu

Navigation
3

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 menu css 

    /* 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;
}
    
asked by anonymous 20.05.2016 / 20:52

3 answers

4

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.

    
23.05.2016 / 18:52
0

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.

    
23.05.2016 / 18:26
0

You can add a class manually to the page where it is, ie:

If you are on the cons_cargo.xhtml page: 

<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 */
}
...
    
23.05.2016 / 18:33
How to add the diagonal of an array in C? Error when using the sendMessage () method of the Handler class. "The message has not been posted or has already been removed"