1

inserir a descrição da imagem aqui

Gostaria que ao passar o mouse em cima do icone de pesquisa fosse carregado um campo input.

html

<div id="navbar" class="navbar-collapse collapse pull-right">
      <ul class="nav navbar-nav">
          <li><a href="contato"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
      </ul>

</div> <!-- /#navbar -->
4
  • 1
    Posta a estrutura do menu em HTML que tem aí.
    – user49127
    23/01/2017 às 23:23
  • Desculpe, nao vi que tinha ficado sem o HTML.
    – fabricio
    23/01/2017 às 23:32
  • Que erro estás a ter? Que código tentaste e nao funcionou? Estás a usar alguma ferramenta?
    – MoshMage
    24/01/2017 às 4:10
  • @MoshMage, não estava utilizando nem um codigo, pois não sabia como fazer. Tentei pesquisar na net mas não achei nada.
    – fabricio
    24/01/2017 às 14:53

1 Resposta 1

1

Você pode utilizar adicionar um "ouvinte" para o evento do tipo mouseover, ao ouvir esse evento, você adiciona um input onde deseja. Da mesma forma, deve remover o inputquando usuário tirar o mouse do input, ouvindo um evento do tipo mouseout. Vou dar um exemplo onde ao tirar o mouse o input não sai, mas sim, quando o usuário tirar o foco do input.

$(function() {
  $("#contato").on("mouseover", function() {
    $(this).parent().prepend("<input class='form-control input-lg' type='text' placeholder='Pesquisar..'/>");
    $(this).parent().find("input").focus().on("blur", function() {
      $(this).remove();
    });
  });

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav navbar-nav">
  <li><a href="contato" id="contato"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
  </li>
</ul>

Faça um teste passando o mouse em cima do ícone depois clicando fora para perder o foco do input.

Os pormenores vai depender de você agora.

Alternativamente, você pode utilizar o plugin ExpadingSearchBar.

1
  • Vou estudar o codigo que você me passou e também vo dar um olhda no plugin que sugeriste.
    – fabricio
    24/01/2017 às 14:56

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 .