2

Preciso mudar o ícone toda vez que clicar e manter esse outro icone até clicar novamente, aí então ele volta para o icone inicial. Como fazer isso? Abaixo está o codigo que estou usando para a criação desse menu. O trecho que chama o icone é <span class="icon-full"></span>

<nav class="navbar navbar-fixed-left navbar-minimal animate open"
		role="navigation">
		<div class="navbar-toggler animate">
			<span class="menu-icon"></span>
		</div>
		<ul class="navbar-menu animate">
			<li><a href="#" class="animate">
                 <span class="desc animate"> Tela Cheia</span>
                 <span class="icon-full"></span>
            </li>
			</a>
		</ul>
	</nav>

4
  • quando você diz "manter esse outro icone até clicar novamente" manter por quanto tempo ? vc quer guardar em algum cache? ou só enquanto a página está aberta? Commented 26/01/2018 às 14:17
  • @LeonardoBonetti Então, se trata de um menu, que está sendo montado com uma lista. Eu quero que quando clicar no "botão" o icone(imagem) mude para outra imagem. Eu só quero que a pessoa consiga perceber que teve uma ação nesse botão. Por exemplo: o botão vem com um icone azul, quando eu clicar nesse botão com icone azul(imagem), ele mude para um icone vermelho(imagem), aí se eu clicar novamente, ele volta pro icone azul(imagem). Consegui explicar?
    – Isa
    Commented 26/01/2018 às 14:23
  • Seu HTML está meio estranho, onde está o botão para clicar?
    – LeAndrade
    Commented 26/01/2018 às 14:30
  • @Leandro o <li> tá fazendo o papel do "botão"
    – Isa
    Commented 26/01/2018 às 14:32

1 Resposta 1

2

Isa fiz esse modelo bem simples só pra vc entender a dinâmica. Tudo em CSS

Mas tive que trocar os seus dois <span> por <input> e uma <label> usando ::before Assim vc pode clicar no texto ou na imagem inclusive e alterna a imagem. O resto da formatação vc faz no CSS da <label>

Veja funcionando no Snippet

html, body {
    width: 100%;
    height: 100%;
    margin: 10px;
    padding: 0;
}
label {
    cursor: pointer;
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"] + label::before {
    content: url(http://placeskull.com/40/40)
}
input[type="checkbox"]:checked + label::before {
    content: url(http://placecage.com/40/40)
}
<nav class="navbar navbar-fixed-left navbar-minimal animate open" role="navigation">
  <div class="navbar-toggler animate">
    <span class="menu-icon"></span>
  </div>
  <ul class="navbar-menu animate">
    <li>
      <a href="#" class="animate">
        <input type="checkbox" id="teste">
        <label class="desc animate" for="teste">Tela Cheia</label>
    </li>
    </a>
  </ul>
</nav>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .