Styling a menu bar via CSS

Navigation
1
Good morning, people. I've been thinking about how to style my menu, and I've got an idea, I wonder if it's possible Is there any way I can use some css effect that causes part of my menu to be selected? For example: Assuming my menu is composed this way: HOME - ADDRESSES - SERVICES - CONTACT When the user is on any of these pages, for example "HOME", I use some way the hover in "HOME" gets checked. If it's on the HOME page, mark it in HOME, and so on, for the other pages. It's possible? Thanks!

    
asked by anonymous 07.03.2016 / 14:22

1 answer

1

There is more than one way to do this, I do not know how your site is. One of the ways to do this is to assign an id to the body of your page and the menu links and then find them in the style sheet:

Your html page for example: 

<body id="home">
<ul id="menu">
  <li><a href="home.html" id="homeLink">Home</a></li>
  <li><a href="enderecos.html" id="enderecosLink">Endereços</a></li>
  <li><a href="servicos.html" id="servicosLink">Serviços</a></li>
  <li><a href="contto.html" id="contatoLink">Contato</a></li>
</ul>
</body>

Now you need to identify and style these elements there in your style sheet: 

body#home a#homeLink, body#enderecos a#enerecosLink,
body#servicos a#servicosLink, body#contatoLink a#contatoLink {
    cursor: default;
    background-color: red;
    color: white;
    }

JsFiddle: link

    
07.03.2016 / 16:12
Do you doubt with FluentNHibernate mapping? JSON does not arrive complete when sending by Bundle