Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

lucky007

como manter link do menu clicado?

Recommended Posts

Olá pessoal, queria saber como eu mantenho um link do menu ativado quando eu clico nele, não é hover é outra coisa. É além do hover, eu sei q o hover altera o estado do link quando a gente passa o mouse em cima mas eu queria que o link se mantivesse quando clicado e quando clicar em outro, o outro se mantem clicado.

 

Desde já agradeço!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

estou tentando o active mas não funciona, dá uma olhada no meu código em css3:

 

*{margin:0; padding:0; border:0;}

#menu{width:298px; height:38px; margin:0 auto; background-color:#000;}

#menu ul{list-style:none;}

#menu ul li{float:left; padding:10px 0px;}

#menu ul li a{text-decoration:none; color:#FFF; padding:10px 10px; transition: color 1s, background 1s; }

#menu ul li a:hover{background-color:#FFF; color:#000;}

#menu ul li a:active{background-color:#FFF; color:#000;}

 

 

tem alguém ai pra me ajudar?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pelo que entendi, você quer seja um link ativo (por exemplo, estou na HOME, então o link do menu referente a HOME, fique com o fundo XXX até que eu vá para outra página, e então o link referente a essa outra página ficaria com o fundo XXX e a HOME não mais).

 

Para fazer isso, você precisa setar uma variável referencia de página, por exemplo em php:

$page = 'home';

No menu você colocaria em cada link:

<ul>
    <li><a href="home.php" class="<?= $page == 'home' ? 'selected' : '' ?>" >Home</a></li>
    <li><a href="about.php" class="<?= $page == 'sobre' ? 'selected' : '' ?>">Sobre</a></li>
</ul>

e no CSS, você formataria a classe "seleted" como quisesse;

Compartilhar este post


Link para o post
Compartilhar em outros sites

jQuery simples de simples rsrs .. você pode passar uma classe quando o menu tiver ativado .... veja bem o exemplo que faço .. isso faz com que irá ativar todos os menu que você clicar.

$('ul li a').click(function(){
    $('ul li a').removeClass('ativo');
    $(this).addClass('ativo');
});

navegando entre os links da lista removendo todos os ativos que existerem e adicionando onde houve efetivamente o click

Compartilhar este post


Link para o post
Compartilhar em outros sites

A proposta de Keven é usual quando as páginas são carregadas via Ajax. Porém se há um refresh na página, não funcionará.

Compartilhar este post


Link para o post
Compartilhar em outros sites

seguindo o pensamento do Caio Eduardo necessitando de uma referencia vc poderia utilizar breadcrumb

como referencia e criar uma logica javascript comparando o breadcrumb com o item menu então independentemente de reload na pagina a funcionalidade ainda estara ativa

Compartilhar este post


Link para o post
Compartilhar em outros sites

oi pessoal, depois de tempos, voltei, tinha dado uma parada e os códigos que vcs me indicaram não fucnionaram.

mas agora sei que provavelmente envolve javascript.

 

tem outra coisa, estou fazendo curso de js básico na treina web, o que vc acham?

 

 

Pelo que entendi, você quer seja um link ativo (por exemplo, estou na HOME, então o link do menu referente a HOME, fique com o fundo XXX até que eu vá para outra página, e então o link referente a essa outra página ficaria com o fundo XXX e a HOME não mais).

 

Para fazer isso, você precisa setar uma variável referencia de página, por exemplo em php:

$page = 'home';

No menu você colocaria em cada link:

<ul>    <li><a href="home.php" class="<?= $page == 'home' ? 'selected' : '' ?>" >Home</a></li>    <li><a href="about.php" class="<?= $page == 'sobre' ? 'selected' : '' ?>">Sobre</a></li></ul>

e no CSS, você formataria a classe "seleted" como quisesse;

Oi Caio, estou tentando fazer mas não consigo, veja se fiz certo:

 

eu copiei e colei o código e formatei o selected no css, é só isso? e pra que serve aquelas aspas simples no final?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não sei se er o seu caso, mas se caso vc esteja usando um metodo de que todo clicado abra uma outra ou redirecione para outra só vc determinar uma class no na lista.

 

Exemplo

#menu-nav {
	margin: 0;	
}

#menu-nav li {
	list-style: none;	
}
#menu-nav li a {
	color: #FFFFFF;	
}

#menu-nav li.current a, #menu-nav li a:hover {
	color: #DE5E60;
}

e pra chamar.

	<ul id="menu-nav">
            	<li class="current"><a href="#home-slider">Home</a></li>
                <li><a href="#">Produtos</a></li>
                <li><a href="#">Comentários</a></li>
                <li><a href="#">Contato</a></li>
	
            </ul>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.