Styling the Menu with CSS

Asked

Viewed 749 times

1

Guys, I’m coming back here again with my question. I got a code that made the :hover was selected on the current page, but it’s not working, would anyone tell me why? Follow 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 the 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

  • Can explain better what it means "Hover stay selected on the current page" ?

  • @Pablo, for example, if I am on the HOME page, stay a highlighted Hover in the HOME option in the menu, so the user knows where it is, understood?

  • What do you mean by "Hover"?

  • It doesn’t work because when you click on the item your page will refresh and the class you added via jquery will get lost. I answered your other question with a solution all made via css. Take a look there.

  • @Eduardokawanaka, thank you so much! I’m a beginner in the area, and I’m still getting a lot of headbutts

  • It’s all in, buddy.

Show 1 more comment

1 answer

0

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

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.