How do I leave the page open marked in the menu?

Question

For example, on this site when you are on any page is marked in the menu with a border-top:

http://w5.com.br/index.html

I wonder how I do it, I’ve tried visited in css and nothing...

Answer 1

.active > a {
color:red;
}

It’s the best way

Answer 2

This gives with javascript, can do this depending on the page you are on:

ex HTML:

<nav>
   <ul>
      <li class="home">
          <a href="#">Home</a>
      </li>
      <li class="sobre_nos">
          <a href="#">Sobre nós</a>
      </li>
      <li class="serviços">
          <a href="#">Serviços</a>
      </li>
   </ul>
</nav>

CSS: This is where you put the properties you want in the item that is active (page where it is) in the menu

.menu_active {
    color: red;
    text-decoration: underline;
}

Now we will need javascript. If for example you are on the noś page:

JQUERY:

$('li.sobre_nos > a').addClass('menu_active');

Answer 3

This is processed via css. Add this css to your page and make the necessary ID and Clase adaptations. In this demo site the skin.css file is that it has the css of the page in question. The css is:

  /* NAVIGATION ------------------------------------------------------------*/
#nav > li > a {
  color: #dcd2be;
}
#nav > li:hover > a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-top: 3px solid #fff;
}
#nav span:hover {
  -webkit-transform: translate(-10px, -3px);
  -moz-transform: translate(-10px, -3px);
  -o-transform: translate(-10px, -3px);
  transform: translate(-10px, -3px);
}
#nav > li.current-menu-item > a,
#nav > li.current_page_item > a {
  border-top: 3px solid #009AD5;
}
#nav .sfHover ul {
  background: #f8f5f2;
}
#nav .sfHover ul li a {
  color: #333;
  font-size:13px;
}
#nav .sfHover ul li a:hover {
  background: #e5e5e5;
  color: #333;
  font-size:13px;
}

Answer 4

You will need to use Javascript to add a new formatting to your menu.

First, you compare the value of the attribute href link clicked with the URL current, if they are equal, then you add the formatting with CSS to the corresponding menu.

The example below adds the class .active when clicking on the link, but does not compare the values of href with the URL:

$(document).ready(function () {
    $('a').click(function () {
        $('.hmenu').find('li.active').removeClass('active');
        $(this).parents("li").addClass('active');
    });
});

.active > a {
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="menu1" class="hmenu">
    <ul>
        <li><a href="#">Item1</a>
            <ul>
                <li><a href="#">SubItem1</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
                <li><a href="#">SubItem2</a> </li>
                <li><a href="#">SubItem3</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a>
            <ul>
                <li><a href="#">SubItem1</a>
                    <ul>
                        <li><a href="#">SubSubItem1</a></li>
                        <li><a href="#">SubSubItem2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <br style="clear: left" />
</div>

Jsfiddle from the above example.

Example comparing the values of href to the URL

Example with a one-page website.

Answer 5

Guy I already made adding an id to my link follows example , ai on each html page I am I add the id and do the css I want in that id, ai se vc quer mudar de cor por exemplo vc adds the id in the respective page , no javascript . for example on the home page I add the id la , then on the contact page I put that same id and home page shot , is a way tbm wanted to help

HTML 



<nav>
            <a href=""class="logo"><img src="../images/logo.jpg" alt=""><span>.</span></a>
             <label for="btn" class="icon">
                 <img src="../images/menu.png" class="imge" alt="">
             </label>
             <input type="checkbox" id="btn">
             <ul>
                 <li><a href="../vazz.html">Início</a></li>
                 <li>
                    <label for="btn-1" class="show">Jóias +</label> 
                 
                    <a id="ini"  href="">Jóias</a>
                    <input type="checkbox" id="btn-1">
                 <ul>
                    <li><a href="Aneis.html">Anéis</a></li>
                    <li><a href="Aliancas.html">Alianças</a></li>
                    <li><a id="ini"  href="Braceletes.html">Braceletes</a></li>
                   <li><a href="Brincos.html">Brincos</a></li>
                   <li><a href="Escapularios.html">Escapulários</a></li>
                   <li><a href="Pingentes.html">Pingentes</a></li>
                   <li><a href="Pulseiras.html">Pulseiras</a></li>
                   <li><a href="Tercos.html">Terços</a></li>
                   <li><a href="Tornozeleiras.html">Tornozeleiras</a></li>
                 </ul>
                </li>
                <li>
</nav>

CSS

 #ini {
    color:white;
   -webkit-box-shadow: 0 0 5px #edd02d, 0 0 6px #edb02d, 0 0 7px #ed9a2d, 0 0 8px #edd02d, 0 0 9px #edd02d, 0 0 10px #edd02d, 0 0 20px #edd02d, 0 0 10px #edd02d, 0 0 120px #edd02d, 0 0 130px #edd02d;
    box-shadow: 0 0 5px #edd02d, 0 0 6px #edd02d, 0 0 7px #edd02d, 0 0 8px #edd02d, 0 0 9px #edd02d, 0 0 10px #edd02d, 0 0 20px #edd02d, 0 0 40px #edd02d, 0 0 120px #edd02d, 0 0 130px #edd02d;
   
    -webkit-animation: fluctuateBar 1s ease-in-out 1s;
    animation: fluctuateBar 1s ease-in-out 1s;
    }