3

Tenho um menu lateral e toda vez que eu clicar em algum item para abrir uma página, gostaria que ficasse selecionado com uma cor.

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>

O css do 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;
}
3
  • 1
    Eu faria em php... if($pagina==x) echo "active"; dentro do class.. 20/05/2016 às 19:56
  • O projeto é em Java
    – robsonp
    20/05/2016 às 20:20
  • :( Entendi. Daí não sei te ajudar 20/05/2016 às 20:30

3 Respostas 3

4

Eu gosto de usar javascript pra fazer o serviço:

$(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');
    }
});

Por ser extremamente flexível fica muito simples fazer qualquer personalização que a página exija.

1
  • Deu certo a sua solução. Obrigado
    – robsonp
    23/05/2016 às 19:06
0

O seu css deve ser implementado para tag "li" e não para "ui".

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

Espero ajudar.

1
  • Colocando no li não funcionou o css
    – robsonp
    23/05/2016 às 18:54
0

Pode acrescentar uma class manualmente à página onde está, ou seja:

Se estiver na página 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>

E finalmente nos seus CSS:

...
.active-menu {
    color: red !important; /* aqui é para reforçar esta propriedade, caso tenha definido alguma outra cor neste elemento mais abaixo */
}
...
1
  • Desse modo a opção que eu cliquei não fica selecionado em vermelho enquanto navego na página.
    – robsonp
    23/05/2016 às 18:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .