Fórum Menu com foco #480699
29/05/2014
0
Ola galera to com um problema aqui acredito que pra muito e facil, mas eu sou mais programador e nao sei como resolver isto.
Tenho um menu e quero fazer aquele efeito pra ficar em foco (cor diferente) na pagina que ele esta visitando, ja fiz tudo no css mas no meu ele fica com foco apenas no primeiro, como eu faço pra ir passando o link que foi selecionado e ir trocando o foco?
Delivery TI.
Tenho um menu e quero fazer aquele efeito pra ficar em foco (cor diferente) na pagina que ele esta visitando, ja fiz tudo no css mas no meu ele fica com foco apenas no primeiro, como eu faço pra ir passando o link que foi selecionado e ir trocando o foco?
Delivery TI.
Celiol.
Curtir tópico
+ 0
Responder
Posts
30/05/2014
Raphael Souza
Bom dia, vc deverá trabalhar com manipulação de URL por meio de JS para fazer isso. Vou dar um exemplo rápido aqui, pois vou entrar em uma reunião agora. Aí vc dá uma pesquisada melhor sobre o assunto.
Vou usar como exemplo a URL http://www.raphaelneves.com.br/site/contato
No exemplo eu quero deixar a aba Contato do menu como ativa.
Se vc der um alert() nessa url vc terá algo do tipo:
Agora que vc pega a parte da url que deseja fazer a comparação e marcação da aba do menu
Coloca um CSS básico para diferenciar a aba ativa das demais abas
Pronto! A ideia base desse tipo de menu é essa. Pega uma string da url, compara, se verdadeiro adicione uma classe ativa ou outra qualquer.
Abraço
Vou usar como exemplo a URL http://www.raphaelneves.com.br/site/contato
No exemplo eu quero deixar a aba Contato do menu como ativa.
var url = location.href.toString().split('/'); // aqui ele vai quebrar a URL onde tiver / e vai gerar um array convertido em texto.
Se vc der um alert() nessa url vc terá algo do tipo:
http::,,raphaelneves.com.br,site,contato //ele gerou um array de 5 elementos ou seja: url[0] = 'http:' url[1] = '' url[2] = 'raphaelneves.com.br' url[3] = 'site' url[4] = 'contato'
Agora que vc pega a parte da url que deseja fazer a comparação e marcação da aba do menu
if(url[4] == 'contato'){
$('abas_menu').removeClass('ativo');
$('.aba_do_menu_contato').addClass('ativo');
}
Coloca um CSS básico para diferenciar a aba ativa das demais abas
.ativo {background: #e3e3e3;}
Pronto! A ideia base desse tipo de menu é essa. Pega uma string da url, compara, se verdadeiro adicione uma classe ativa ou outra qualquer.
Abraço
Responder
Gostei + 0
31/05/2014
Celiol.
cara nao deu muito certo nao, na verdade ate a parte onde ele me passa a url com o alert eu sei fazer blz, mas ai em diante nao entendi pois e quando o usuario clicar em outra opção do meu nunca fiz isso por isso to apanhando um pouco mas se puder ajudar cara.
Ola como esta meu codigo.
o menu...
e aqui a parte que eu coloquei como voce ensinou mas nao sei o que ta errado
e olha como esta a tela cara o primeiro botao home eu coloquei como active entao ele fica de outra cor mas nao muda esta sempre assim, e quando eu passo o mouse sobre os outros ele muda a borda de baixo pode ater ser este efeito mesmo mas nao sei como deixar ele como a borda se o usuario estiver na pagina, so munda quando o mouse passa por cima.
Se puder ajudar.
Ola como esta meu codigo.
o menu...
<div id="menu">
<ul>
<li class="active"><a href="home.aspx" accesskey="1">Home</a></li>
<li><a href="candidatos.aspx" accesskey="2">Candidatos</a></li>
<li><a href="vagas.aspx" accesskey="3">Vagas</a></li>
<li><a href="login.aspx" accesskey="4">Cadastrar</a></li>
<li><a href="contato.aspx" accesskey="5">Contato</a></li>
</ul>e aqui a parte que eu coloquei como voce ensinou mas nao sei o que ta errado
<script type="text/javascript">
var url = location.href.toString().split('/');
url[0] = 'http:';
url[1] = '';
url[2] = 'localhost:3241';
url[3] = 'candidatos.aspx';
if (url[3] == 'candidatos.aspx') {
$('abas_menu').removeClass('ativo');
$('.aba_do_menu_contato').addClass('ativo');
}
</script>e olha como esta a tela cara o primeiro botao home eu coloquei como active entao ele fica de outra cor mas nao muda esta sempre assim, e quando eu passo o mouse sobre os outros ele muda a borda de baixo pode ater ser este efeito mesmo mas nao sei como deixar ele como a borda se o usuario estiver na pagina, so munda quando o mouse passa por cima.
Se puder ajudar.
Responder
Gostei + 0
02/06/2014
Raphael Souza
cara nao deu muito certo nao, na verdade ate a parte onde ele me passa a url com o alert eu sei fazer blz, mas ai em diante nao entendi pois e quando o usuario clicar em outra opção do meu nunca fiz isso por isso to apanhando um pouco mas se puder ajudar cara.
Ola como esta meu codigo.
o menu...
e aqui a parte que eu coloquei como voce ensinou mas nao sei o que ta errado
e olha como esta a tela cara o primeiro botao home eu coloquei como active entao ele fica de outra cor mas nao muda esta sempre assim, e quando eu passo o mouse sobre os outros ele muda a borda de baixo pode ater ser este efeito mesmo mas nao sei como deixar ele como a borda se o usuario estiver na pagina, so munda quando o mouse passa por cima.
Se puder ajudar.
Ola como esta meu codigo.
o menu...
<div id="menu">
<ul>
<li class="active"><a href="home.aspx" accesskey="1">Home</a></li>
<li><a href="candidatos.aspx" accesskey="2">Candidatos</a></li>
<li><a href="vagas.aspx" accesskey="3">Vagas</a></li>
<li><a href="login.aspx" accesskey="4">Cadastrar</a></li>
<li><a href="contato.aspx" accesskey="5">Contato</a></li>
</ul>e aqui a parte que eu coloquei como voce ensinou mas nao sei o que ta errado
<script type="text/javascript">
var url = location.href.toString().split('/');
url[0] = 'http:';
url[1] = '';
url[2] = 'localhost:3241';
url[3] = 'candidatos.aspx';
if (url[3] == 'candidatos.aspx') {
$('abas_menu').removeClass('ativo');
$('.aba_do_menu_contato').addClass('ativo');
}
</script>e olha como esta a tela cara o primeiro botao home eu coloquei como active entao ele fica de outra cor mas nao muda esta sempre assim, e quando eu passo o mouse sobre os outros ele muda a borda de baixo pode ater ser este efeito mesmo mas nao sei como deixar ele como a borda se o usuario estiver na pagina, so munda quando o mouse passa por cima.
Se puder ajudar.
Não funciona pq vc não tem essa marcação no seu código..ele ataca no vazio
$('abas_menu').removeClass('ativo');
$('.aba_do_menu_contato').addClass('ativo');
Tente algo assim:
<ul>
<li class="opt active"><a href="home.aspx" accesskey="1">Home</a></li>
<li class="opt "><a href="candidatos.aspx" accesskey="2">Candidatos</a></li>
<li class="opt "><a href="vagas.aspx" accesskey="3">Vagas</a></li>
<li class="opt "><a href="login.aspx" accesskey="4">Cadastrar</a></li>
<li class="opt "><a href="contato.aspx" accesskey="5">Contato</a></li>
</ul>
No JS (é necessário chamar também o jquery, pois com o javascript puro não vai funcionar desse jeito)
function verificaUrl(){
var url = location.href.toString().split('/');
url[0] = 'http:';
url[1] = '';
url[2] = 'localhost:3241';
url[3] = 'candidatos.aspx';
if (url[3] == 'candidatos.aspx') {
$(".opt").removeClass('active');
$(".opt > a[href='candidatos.aspx']").addClass('active');
}
}
verifcaUrl();
Responder
Gostei + 0
11/06/2014
Celiol.
Nossa nada ainda cara testei hoje tinha umas coisas pra fazer tive que deixa isso pra depois mas ainda ta do mesmo jeito.
Responder
Gostei + 0
26/08/2014
Celiol.
Nossa o Neves voltei cara nesse post pra ver se agora finalizo isso cara, mas esta com erro ainda eu estou criando a css active e ela esta mostrando porem no lugar errado e ainda nao sobrepoe o notao.
POde ajudar?
POde ajudar?
Responder
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)