Styling a bar menu via CSS

Asked

Viewed 411 times

1

Good morning guys I’ve been thinking about how to style my menu, and I had an idea, I was wondering if it’s possible Is there any way I can use a css effect that makes part of my menu select? For example: Suppose 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 to get the Hover in "HOME" marked. If it has in the HOME sign, mark in HOME, and so, for the other pages. Is it possible? Thank you!

html css
  • 1

    Yes. Thank you for asking

  • @Zoom, and how can I do it? could explain or indicate a search?

1 answer

1

There’s more than one way to do this, I don’t know how your website is. One of the ways to do this is to assign an id to your page’s body and 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: https://jsfiddle.net/91qsdsza/

  • Eduardo, your solution worked, however, it just leaves me selected on my home page, as I navigate, it does not leave marked, could help me once again?

  • Exactly, note that the body tag is with the id "home". To work with the other pages, you have to assign a different id to each page so that it matches the css. Ex: On the.html services page you put the service id on the body tag of the page and so on.

  • I did it Eduardo!! Thank you very much for your patience!!

Browser other questions tagged html css

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