Jump to content
Sign in to follow this  
iturci

Menu marcado ao visitar

Recommended Posts

Eae galera.

 

 

Sou novo por aqui, e também sou novo como Web Designer. Então não tenho certeza se minha dúvida é no CSS ou Javascript.

 

preciso fazer um efeito que onde eu clicar do menu, fica colorido (para identificar onde a pessoa está).

 

vou mandar uma imagem como exemplo:

 

KItQaCa.png?1

Share this post


Link to post
Share on other sites

Olá @iturci, isso é javascript mas pode ser feito com css.

 

  1. Crie uma classe css ==> .active
  2. Estilize ela, que no caso, é a cor da fonte.
.active{
  color: yellow;
}

3. Use id's nos itens do menu.

4. Vamos utilizar esse id para capturar com javascript e atribuir a classe css que criamos.

var menu = document.getElementById("ID");
menu.setAttribute("class","active");

5. Faça isso em cada página do menu.

 

Utilizando somente css, em cada página você pode colocar já por padrão a classe ".active", mas com javascript te dá uma base para fazer algo menos "trabalhoso" e mais aproveitável.

 

Obs: Há outras maneiras de fazer um arquivo só e utilizar... como capturar URL e verificar qual ID deve ser atribuído a classe, etc. Mas isso resolve teu problema de maneira simples.

 

Se te ajudou, deixa um +rep. :P

 

@References

 

@document.getElementById => https://developer.mozilla.org/pt-BR/docs/Web/API/Document/getElementById

 

@Element.setAttribute => https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By jcvlanova
      Galera, gostaria de saber se e possivel colocar no NavBar do Boostrap o icone do menu tipo sanduiche, de tal forma que o menu vertical ou horizontal somente fosse mostrado quando clicado no icone sem necessariamente expandir o height do Navbar? Desculpem a ignorancia. Mas os exemplos que vi são sempre usando a função collapse da class navbar collapse. Isso faz com que o menu (horizontal ou vertical), esteja sempre visivel e o botao só apareça quando voce diminui o tamanho da tela, que é quando o menu fica oculto. Quando isso acontece, o NavBar é expandido. Não é isso que quero. Quero o Navbar com altura fixa de 140 px sempre, com o botao tipo sanduiche a esquerda meu logo no centro e um campo de busca a direita. Ao clicar no botão os menus seriam mostrados normalmente. Consigo fazer isso com o css, sem usar o Bootstrap, mas nao é isso que quero. Alguem pode me ajudar ?
      Meu código está assim :
      <div class="navbar navbar-secondary navbar-dark"> <button class="navbar-toggler" data-toggle="collapse" data-target="#menu"> <span class="navbar-toggler-icon"></span> <a href="#" class="navbar-brand"><img src="/imagens/LogoJornal.png"> Aqui entra os itens de menu: <div id="menu class="collapse navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="Home"> </li> <li class="nav-item active"> <a class="nav-link" href="Principal"> </li> ... </ul> <form class="form-inline"> <input type="''text" placeholder="Buscar" name="buscar" class="form-control"> <input type="submite" class="btn btn-outline"> </button>  
    • By gabybarross
      Amigos, preciso da ajuda de vocês. 
      Meu site vende um serviço e gostaria de saber como faço após a compra desse serviço que seja automaticamente incluído um perfil para o usuário. Isso porque gostaria de fazer um menu em que apenas quem comprou o serviço consiga visualiza-lo. 
      OBrigada gabriela
    • By Carlos Web Soluções Web
      Olá....boa tarde !!

      Crei um menu multi-level simples em CSS:
       
      MENU_MOLDE

      , gostaria agora que, para:

      @media screen and (max-width: 900px)

      o menu se torne responsável, com ul li a {float: none; text-align: left; width: 100%} e ativar o submenu ao clicá-lo e desativar ao clica-lo novamente!!

      Alguém poderia me ajudar ??
      Desde já muito obrigado !!
    • By Theusy
      Boa tarde pessoal!
      Sou novo em html e css e me deparei com um problema enquanto estava "brincando" de programar.
      Provavelmente um erro bobo de programação, ou algo do tipo.
      Agradeço qualquer tipo de ajuda,
      Obrigado desde já!


    • By AlanB.
      Boa tarde galera, tudo bem? estou tentando aprender javascript, mas o que eu preciso fazer eu ainda não sei.
       
      Eu tenho o meu menu do site e logo abaixo tenho a section serviços e a section produtos. Eu queria que inicialmente o background do menu fosse azul, mas quando a pessoa desse um scroll e chegasse na section serviços, o background do menu alterasse a cor. Alguem pode me ajudar? 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.