Styling the Menu with CSS [closed]

Question

Styling the Menu with CSS [closed]

Navigation

#1 by (0 votes)

1

Well, I'm going back here again with my question. I got a code that would cause :hover to be selected in the current page, but it is not working, could anyone tell me why? Here are the codes:

    <script type="text/javascript">
    $(document).ready(function() {
    $('li').click(function() {
    $('li.active').removeClass("active"); //aqui removemos a class do item anteriormente clicado para que possamos adicionar ao item clicado
    $(this).addClass("active"); //aqui adicionamos a class ao item clicado
    });
    });
    </script>
<div id="menufundo">
<nav id="menuhorizontal">
<ul>
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="contato.html" class="active">Contato</a></li>
    <li><a href="endereco.html" class="active">Endereço</a></li>
    <li><a href="programacao.html" class="active">Programação</a></li>
</ul>
</nav>  
</div>

and css:

#menuhorizontal ul li a {
padding: 2px 10px;
margin-top: 15px;
display: inline-block;

/*visual do link*/
color: #ffffff;
text-decoration: none;
}

   #menuhorizontal ul li a:hover, ul li.active  a {
background-color: #FFFFFF;
color: #0700fc;
border-bottom: 3px solid #0700fc;
border-radius: 10px;
color: #fff !important;
  }

html css

asked by anonymous 07.03.2016 / 18:20

1 answer

How to send a notification even with the application page closed? Enter in the TextBox calling button event

score 0 · Answer 1

<script>
    // Pega informação da página atual exemplo: www.missaoamar.com/index.html ou localhost/MissaoAmar/index.html
    // funciona para ambos os ambientes local e remoto

    v_pagina = window.location.pathname;
    v_pagina = v_pagina.replace("/MissaoAmar/","");
    v_pagina = v_pagina.replace("/","");
    v_pagina = v_pagina.replace(".html","");

    //Crie um if para fazer o trabalho por você de adicionar a classe
    if ( v_pagina.length > 0 ){
        switch (v_pagina) {
            case 'index':
                $('#menu #x_inicio').addClass('active');
                break;
            case 'igreja':
                $('#menu #x_igreja').addClass('active');
                break;
        }
    }

    //desta forma independente do refresh da página a classe active é sempre adicionada da forma correta
    //obs: no meu projeto o menu é dinâmico, ou seja, funciona para páginas státicas ou dinâmicas
</script>

<ul id="menu">
    <li class="panel" id="x_inicio"><a href="index.html"> Inicio</a></li>
    <li class="panel" id="x_igreja"><a href="igreja.html"> Igreja</a></li>
</ul>