Caixa de busca no ícone lupa

[Luiz1981 0]

Galera tenho uma dúvida, como fazer uma barra de pesquisa que quando clica no ícone da lupa de pesquisa a caixa de busca abre.

Mais ou menos assim:

 

 

 

 

[AndersonMamede 88]

Olá!

 

Veja este exemplo:

 

https://codepen.io/912lab/pen/LsplC

[Thales Everton 0]

AndersonMamede

Opa! Muito bom o exemplo que você passou Anderson. Mas você poderiamedizer como faço para colocar essa caixa de pesquisa integrada no menu fixo do meu blog? pois já tentei copiando o HTML e o CSS e não dá certo, fica aparecendo erro quando estou editando o HTML.

 

Vlw

[Megao 0]

@Thales Everton

Não sou bom com blog, mas talvez eu possa ajudá-lo.

Coloque o código HTML e CSS aqui, para que eu possa olhá-lo e talvez auxiliá-lo.

Se possível, faça uma demonstração em imagem do possível resultado que deseja.

 

[Thales Everton 0]

@Megao

Em 21/07/2019 at 19:04, Megao disse:

@Thales Everton

Não sou bom com blog, mas talvez eu possa ajudá-lo.

Coloque o código HTML e CSS aqui, para que eu possa olhá-lo e talvez auxiliá-lo.

Se possível, faça uma demonstração em imagem do possível resultado que deseja.

 

Eu não sei se esse é o HTML completo do menu, mas creio que sim.

<center><div id='menu-wrapper'>
<nav>
<a class='responsive-menu' href='#' id='resp-menu'><i class='fa fa-reorder'/> Menu</a>    
   <ul class='menu'>
   <li><a href='https://maisdeconcursosgratis.blogspot.com/'><i class='fa fa-home'/> INÍCIO</a></li>
  
<li><a class='INÍCIO' href='#'><i class='fa fa-laptop'/> SOBRE O BLOG</a>
   <ul class='sub-menu'>
   <li><a href='#'>QUEM SOU?</a></li>
   <li><a href='#'>OBJETIVOS</a></li>  
   </ul>
   </li>
  
  
    <li><a href='#'><i aria-hidden='true' class='fa fa-graduation-cap'/> CURSOS COMPLETOS</a>
  <ul class='sub-menu'>
   <li><a href='#'>POR MATÉRIAS</a>
    <ul>
    <li><a href='#'>PORTUGUÊS</a></li>
    <li><a href='#'>MATEMÁTICA</a></li>
 <li><a href='#'>DIREITO CONSTITUCIONAL</a></li>
    <li><a href='#'>DIREITO ADMINISTRATIVO</a></li>
 <li><a href='#'>DIREITOS HUMANOS</a></li> 
<li><a href='#'>LEGISLAÇÃO DE TRÂNSITO</a></li>
    </ul>
   </li>
     <li><a href='#'>Sub-Menu 3</a>
    <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
 <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
 <li><a href='#'>Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  
<li><a href='#'><i aria-hidden='true' class='fa fa-book'/> CADERNOS DE QUESTÕES</a>
  <ul class='sub-menu'>
   <li><a href='#'>Sub-Menu 1</a></li>
   <li><a href='#'>Sub-Menu 2</a>
    <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
 <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
 <li><a href='#'>Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href='#'>Sub-Menu 3</a>
    <ul>
    <li><a href='#'>Sub Sub-Menu 1</a></li>
    <li><a href='#'>Sub Sub-Menu 2</a></li>
 <li><a href='#'>Sub Sub-Menu 3</a></li>
    <li><a href='#'>Sub Sub-Menu 4</a></li>
 <li><a href='#'>Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
<li><a href='#'><i aria-hidden='true' class='fa fa-pencil'/> SIMULADOS EXCLUSIVOS</a></li>
 <li><a href='#'><i class='fa fa-envelope'/> CONTATO</a></li>
  </ul>
  </nav></div></center>

 

>> CÓDIGO CSS:

#menu-wrapper{
position:fixed;
z-index:9999;
width:100%;
}
nav {
display: block;
margin-top: 0px;
background: $(menu.background.color);
}
.menu {display: block;}
.menu li {
display: inline-block;
position: relative;
z-index: 100;
}
.menu li:first-child { margin-left: 0;}
.menu li a {
font: $(menu.font);
text-decoration: none;
padding: 20px 15px;
display: block;
color: $(menu.text.color);
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover,.menu li:hover>a {
color: $(menu.selected.text.color);
background: $(menu.selected.background.color);
}
.menu ul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
left: 0px;
background: $(submenu.background.color);
z-index: 99;
transform: translateY(0,20px);
transition: all 0.2s ease-out;
}
.menu ul:after {
bottom: 100%;
left: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color:$(submenu.background.color);
border-width: 6px;
margin-left: -6px;
}
.menu ul li {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
.menu ul li a {
font-size: 13px;
font-weight: normal;
display: block;
color:$(submenu.text.color);;
background: $(submenu.background.color);
}
.menu ul li a:hover,.menu ul li:hover>a {
background: $(submenu.selected.background.color);
color: $(submenu.text.color.hover);
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
transform: translate(0,0);
}
.menu ul ul {
left: 149px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translateY(20px,20px);
transition: all 0.2s ease-out;
}
.menu ul ul:after {
left: -6px;
top: 10%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: $(submenu.background.color);
border-width: 6px;
margin-top: -6px;
}
.menu li>ul ul:hover {
visibility: visible;
opacity: 1;
transform: translateY(0,0);
}
.responsive-menu {
display: none;
width: 100%;
padding: 20px 15px;
background: $(menu.background.color);
color: $(menu.text.color) !important;
text-transform: uppercase;
}
.responsive-menu:hover {
background: $(menu.selected.background.color);
color: $(menu.selected.text.color);
text-decoration: none;
}
a.homer { background: $(menu.background.color);}
@media (max-width: 1024px) {
.mainWrap { width: auto; padding: 50px 20px; }
.menu { display: none; }
.responsive-menu {display: block; margin-top: 0px; }
nav { margin: 0; background: none; }
.menu li { display: block; margin: 0; }
.menu li a {
background: $(submenu.background.color);
color: $(submenu.text.color);
}
.menu li a:hover,.menu li:hover>a {
background: $(menu.selected.background.color);
color: $(menu.selected.text.color);
}
.menu ul {
visibility: hidden;
opacity: 0;
top: 0;
left: 0;
width: 100%;
transform: initial;
}
.menu li:hover>ul {
visibility: visible;
opacity: 1;
position: relative;
transform: initial;
}
.menu ul ul {
left: 0;
transform: initial;
}
.menu li>ul ul:hover {
transform: initial;
}
}

 

>> Também tem esse CÓDIGO JAVASCRIPT E JQUERY:

 

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,500,600' rel='stylesheet' type='text/css'/>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'/>
    <script src='http://code.jquery.com/jquery-1.7.min.js' type='text/javascript'/>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<script src='http://static.tumblr.com/glpbb7a/odhnldmus/postagensrelacionadasparablog.js' type='text/javascript'/>
<!--Related Posts with thumbnails Scripts and Styles End-->   
    <b:include data='blog' name='google-analytics'/>
  <script type='text/javascript'>
/*<![CDATA[*/
//Profile photo resize script
$(document).ready(function(){$("#main-slider div img",$(this)).each(function(){var src=$(this).attr("src").replace(/\/s[0-9]+/g,'/h480-w640-c');$(this).attr("src",src)})});
/*]]>*/
</script>
<script type='text/javascript'>
/*<![CDATA[*/
//Profile photo resize script
$(document).ready(function(){$("#Profile1 a img",$(this)).each(function(){var src=$(this).attr("src").replace(/\/s[0-9]+/g,'/s250-c');$(this).attr("src",src)})});
/*]]>*/
</script>
<script type='text/javascript'>
/*<![CDATA[*/
//Profile photo resize script
$(document).ready(function(){$("#Image99 img",$(this)).each(function(){var src=$(this).attr("src").replace(/\/s[0-9]+/g,'/s250-c');$(this).attr("src",src)})});
/*]]>*/
</script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 var touch  = $('#resp-menu');
 var menu  = $('.menu');
 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });

 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }

 });

});

//]]>
</script>

 

>> Eu queria colocar a caixa de pesquisa expansiva (Aquel que fica em um tamanho, e quando clica para fazer a pesuisa ela se expande mais um pouco.) que foi exemplificada lá em cima no segundo post.

[Felipe Guedes Coutinho 0]

Thales Everton

 

Seu código está uma bagunça que só, então resolvi colocar o que você esta desejando abaixo.

Recomendo você a colocar tudo dentro de um arquivo exemplo INDEX.HTML para ver o resultado e depois adaptar dentro do seu código.

 

Arquivo INDEX.HTML

<style type="text/css">
.container {
  width:100%;
  position: relative;
  height: 50px;
}
input {
  height: 50px;
  border: none;
  outline: none;
  padding-left: 50px;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  z-index: 3;
  transition: width 1s ease-out;
  cursor: pointer;
}
input:focus { 
  border: 1px solid #ccc;
  border-radius: 25px;
  width: 100%;
  z-index: 1;
  transition: width 1s ease-in;
}
button { 
  height: 50px;
  width: 50px;
  background:  url('lupa.png')  center no-repeat;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
}
button:focus {
  outline: none;
}
/* esconde o LABEL "Buscar" */
label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;    
}
</style>

<form action=" " method="post">
    <label for="busca">Buscar</label>
    <div class="container">  
        <input type="search" id="busca" name="q">
        <button type="submit">&#128269;</button>
    </div>
</form>

 

Tenho certeza de que este é o efeito que você deseja.

Basta adaptar ao seu gosto.

 

Se a minha resposta lhe foi útil não esqueça de avaliar o POST e de votar positivo.

 

Espero ter ajudado de alguma forma.

 

Att
Felipe Guedes Coutinho

[Thales Everton 0]

Felipe Guedes Coutinho, sim cara de alguma forma você me ajudou. Porém existem três problemas que não consegui solucionar, são eles:

1. A imagem da lupa que  você deixou. ( mesmo eu substituindo pela que eu quero, ela ainda fica lá)

2. Queria também deixar o nome "Pesquisar" aparecendo dentro da caixa, e não encontrei a parte para configurar as fontes.

3. Eu já tentei colocar outra caixa de pesquisa na parte do "topo" à direita e dentro do menu fixo do blog, mas fica dando erro no código html e nem ao menos salva as alterações. ( sou muito iniciante mesmo man )

 

>> No mais, muito obrigado por me responder  fica na Paz.

[Felipe Guedes Coutinho 0]

Thales Everton

Sobre a sua pergunta 1 e 2 basta você usar o código abaixo:

<style type="text/css">
.container {
  width:100%;
  position: relative;
  height: 50px;
}
input {
  height: 50px;
  border: none;
  outline: none;
  padding-left: 75px;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  z-index: 3;
  transition: width 1s ease-out;
  cursor: pointer;
}
input:focus { 
  border: 1px solid #ccc;
  border-radius: 25px;
  width: 100%;
  z-index: 1;
  transition: width 1s ease-in;
}
button { 
  height: 50px;
  width: 50px;
  background:  url('lupa.png')  center no-repeat;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
}
button:focus {
  outline: none;
}
/* esconde o LABEL "Buscar" */
label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;    
}
</style>
<form action=" " method="post">
    <label for="busca">Buscar</label>
    <div class="container">  
        <input type="search" id="busca" name="q" placeholder="O que dejsa buscar?">
        <button type="submit">Pesquisa</button>
    </div>
</form>

 

Já a questão 3 do posicionamento, recomendo você entender como o CSS trabalha, veja alguns cursos no YouTube explicando como funciona e tudo mais.

 

Não consigo colocar a posição exata do campo em questão no seu site, mas não é nada complicado.

 

Mas eu acho que se você colocar o código DAQUI --> <form action=" " method="post"> ATÉ AQUI --> </form> em qualquer lugar do seu SITE ele deve se comportar do mesmo jeito.

 

Experimente criar por exemplo uma tabela de 5x5 e vá fazendo teste colocando o que falei para copiar DAQUI ATÉ AQUI dentro das células e você vera que o comportamento é o mesmo.

 

Veja se funciona.

Se a minha resposta for útil não esqueça de agradecer e votar positivo.

 

Espero ter ajudado de alguma forma.

 

Att
Felipe Guedes Coutinho

[Thalles Rangel 0]

poderia também haver um hover, passando o mouse por cima ela se expandiria.