Por exemplo, nesse site quando você está em qualquer página fica marcado no menu com uma border-top:
Gostaria de saber como eu faço isso, já tentei o visited no css e nada...
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadePor exemplo, nesse site quando você está em qualquer página fica marcado no menu com uma border-top:
Gostaria de saber como eu faço isso, já tentei o visited no css e nada...
Isso dá com javascript, pode fazer isso dependendo da página em que está:
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: Aqui é onde você coloca as propriedades que quer no item que estiver ativo (página onde está) no menu
.menu_active {
color: red;
text-decoration: underline;
}
Agora vamos precisar de javascript. Se por exemplo estiver na página sobre noś:
JQUERY:
$('li.sobre_nos > a').addClass('menu_active');
Isso é processado via css. Adicione esse css na sua página e faça as adaptaçoes de IDs e Clases necessárias. Nesse site demo o arquivo skin.css é que possue o css da página em questão. O css é:
/* 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;
}
Você terá que usar JavaScript para adicionar uma nova formatação ao seu menu.
Primeiro, você compara o valor do atributo href
do link clicado com a URL
atual, se forem iguais, então você adiciona a formatação com CSS
ao menu correspondente.
O exemplo abaixo adiciona a classe .active
ao clicar no link, mas não compara os valores de href
com a 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>
cara eu ja fiz adicionando um id ao meu link segue exemplo , ai em cada pagina html que eu estou eu adiciono o id e faço o css que eu quiser nesse id, ai se vc quiser mudar de cor por exemplo vc adiciona o id na respectiva pagina , sem javascript .por exemplo na pagina home eu adiciono o id la , depois na pagina contato coloco esse mesmo id e tiro da pagina home , é uma maneira tbm quis ajudar
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;
}