Personalizar sistema de busca

Detalhes da questão

Endereço do fórum: http://housegeek.forumeiros.com/forum
Versão do fórum: ModernBB

Descrição

Olá,

Creio que o sistema que desejo ele será um pouco complicado.

Encontrei um sistema de "Buscar" que achei interessante e desejaria saber se seria possível fazer o mesmo sistema na forumeiros

(BUSCAR SEM CLICAR)


(BUSCAR APÓS CLICAR)


Queria esse sistema de busca acima, encontrei ele no site http://www.clubedohardware.com.br/

A forumeiros tem um buscar padrão que tem algo parecido

(BUSCAR DA FORUMEIROS)


No caso desejo substituir ele, ou seja, retirar ele do menu e colocar o que vi no site.
Qualquer dúvida é só perguntar.

att,

Poderia tirar uma captura de tela mostrando onde a caixa de busca ficará?

Olá,

Gostaria que ele ficasse onde marquei na imagem.



att,

UP?

UP?

UP?

UP?

https://codepen.io/anon/pen/mMYrWV

Quais fóruns/categorias irá colocar no dropdown?

Olá,

No momento não sei ao certo, mas do modo que você fez está bom, tem como eu alterar depois o nome e os link de cada, né?

att,

No seu overall_header, procure por:

Código:

<div id="headerbar-top">

E insira após:

Código:

<form class="fa-search" action="/search">
   <div class="fa-search-select">
      <a href="#" class="fa-search-selected">Tudo</a>
      <ul class="fa-search-dropdown"></ul>
   </div>
   <div class="fa-search-input">
      <input type="text" name="search_keywords" placeholder="O que procura?" />
      <input type="hidden" name="search_where" />
      <button type="submit"><i class="ion-search"></i></button>
   </div>
</form>

Adicione ao CSS:

Código:

.fa-search {
   display: flex;
}

.fa-search-select {
   line-height: 32px;   
   text-align: center;
   min-width: 120px;
   font-size: 12px;
   box-sizing: border-box;
   transition: 250ms transform;
   transform-origin: right center;
   transform: scaleX(0);
}

.fa-search-transition-in .fa-search-select {
   transition-delay: 250ms;
}

.fa-search-focus .fa-search-select {
   transform: scaleX(1);
}

.fa-search-select > a::after {
   content: "\f123";
   font-family: Ionicons;
   margin-left: 5px;
}

.fa-search-select > a {
   background-color: #ccc;
   border-radius: 16px 0 0 16px;
   padding: 0 20px;
   transition: 250ms background-color;
}

.fa-search-select > a:hover,
.fa-search-select > a:active,
.fa-search-select > a:focus {
   background-color: #b7b7b7;
}

.fa-search-selected,
.fa-search-dropdown > li > a {
   color: #333;
   text-decoration: none;
   display: block;
}

.fa-search-dropdown {
   border: 1px #ccc solid;
   background-color: #fff;
   margin: 0;
   padding: 0;
   border-radius: 3px;
   position: absolute;
   top: 47px;
   transform: translate(0, -15px);
   opacity: 0;
   pointer-events: none;
   transition-duration: 250ms;
   transition-property: transform, opacity;
}

.fa-search-open .fa-search-dropdown {
   opacity: 1;
   transform: translate(0, 0);
   pointer-events: auto;
}

.fa-search-dropdown::before,
.fa-search-dropdown::after {
   content: ' ';
   position: absolute;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 15px 15px 15px;
   border-color: transparent transparent #ffffff transparent;
   top: -15px;
   left: 50%;
   transform: translate(-50%, 0)
}

.fa-search-dropdown::before {
   border-width: 0 17px 17px 17px;
   top: -17px;
   border-color: transparent transparent #ccc transparent;
}

.fa-search-dropdown > li {
   list-style: none;
   text-align: left;
}

.fa-search-dropdown > li > a {
   display: block;
   padding: 0 30px;
   line-height: 40px;
   position: relative;
   white-space: nowrap;
   transition: 250ms background-color;
}

.fa-search-dropdown > li > a:hover,
.fa-search-dropdown > li > a:active,
.fa-search-dropdown > li > a:focus {
   background-color: #eee;
}

.fa-search-dropdown > li > a::before {
   position: absolute;
   font-size: 16px;
   left: 15px;
   top: 50%;
   transform: translate(-50%, -50%);
   font-family: Ionicons;
}

.fa-search-dropdown > li > .fa-search-all {
   border-bottom: 1px #ccc solid;
}

.fa-search-dropdown > li > .fa-search-advanced {
   border-top: 1px #ccc solid;
}

.fa-search-dropdown > li > .fa-search-advanced::before {
   content: "\f13e";
}

.fa-search-dropdown > li > .fa-search-active::before {
   content: "\f122";
}

.fa-search-input {
   position: relative;
}

.fa-search-input input {
   line-height: 32px;
   border: none;
   padding: 0 15px;
   border-radius: 16px;
   min-width: 200px;
   transition: 250ms border-radius;
}

.fa-search-transition-out .fa-search-input input {
   transition-delay: 250ms;
}

.fa-search-focus .fa-search-input input {
   border-radius: 0 16px 16px 0;
}

.fa-search-input input:active,
.fa-search-input input:focus {
   outline: none;
}

.fa-search-input button {
   position: absolute;
   top: 50%;
   right: 5px;
   transform: translate(0, -50%);
   background: none;
   border: none;
   padding: 0;
   margin: 0;
   font-size: 16px;
   width: 24px;
   height: 24px;
   line-height: 24px;
   border-radius: 50%;
   cursor: pointer;
   transition: 250ms background-color;
}

.fa-search-input button:active,
.fa-search-input button:hover,
.fa-search-input button:focus {
   background-color: #eee;
   outline: none;
}

E a um novo JavaScript com Investimento em Todas as páginas:

Código:

(function($) {
   'use strict';
   
   var settings = {
      categories: [
         {
            name: 'Categoria 1',
            id: 1
         },
         {
            name: 'Categoria 2',
            id: 2
         }
      ],
      
      forums: [
         {
            name: 'Forum 1',
            id: 1
         },
         {
            name: 'Forum 2',
            id: 2
         }
      ],
      
      lang: {
         all: 'Tudo',
         search: 'Busca avançada'
      }
   };
   
   $(function() {
      var $search = $('.fa-search');
      var $dropdown = $('.fa-search-dropdown');
      var $dummy = $('<li><a href="#" data-where=""></a></li>');
      var $select = $('.fa-search-select');
      var $where = $('.fa-search input[name="search_where"]');
      
      $search.on('click', function() {
         $search.addClass('fa-search-focus fa-search-transition-in');
         
         setTimeout(function() {
            $search.removeClass('fa-search-transition-in');
         }, 250);
      });
      
      $(document).on('click', function(event) {
         var $target = $(event.target);
         
         if (!$target.is($search) && !$target.closest($search).length) {
            $search.removeClass('fa-search-focus');
            $search.addClass('fa-search-transition-out');
            
            setTimeout(function() {
               $search.removeClass('fa-search-transition-out');
            }, 250);
         }
         
         if (
            (!$target.is($dropdown) && !$target.closest($dropdown).length)
            && (!$target.is($select) && !$target.closest($select).length)
         ) {
            $select.removeClass('fa-search-open');
         }
      });
      
      $select.children('a').on('click', function() {
         $select.toggleClass('fa-search-open');
      });
      
      $dummy.clone()
         .children('a')
            .addClass('fa-search-all fa-search-active')
            .text(settings.lang.all)
         .end()
         .appendTo($dropdown)
      ;
      
      $.each(settings.categories, function() {
         $dummy.clone()
            .children('a')
               .addClass('fa-search-category')
               .attr('data-where', 'c' + this.id)
               .text(this.name)
            .end()
            .appendTo($dropdown)
         ;
      });
      
      $.each(settings.forums, function() {
         $dummy.clone()
            .children('a')
               .addClass('fa-search-forum')
               .attr('data-where', 'f' + this.id)
               .text(this.name)
            .end()
            .appendTo($dropdown)
         ;
      });
      
      $dummy.clone()
         .children('a')
            .addClass('fa-search-advanced')
            .text(settings.lang.search)
            .attr('href', '/search')
         .end()
         .appendTo($dropdown)
      ;
      
      $dropdown.on('click', 'a:not(.fa-search-advanced)', function() {
         var $this = $(this);
         
         $dropdown.find('.fa-search-active').removeClass('fa-search-active');
         $this.addClass('fa-search-active');
         
         $select.children('a').text($this.text());
         $where.val($this.attr('data-where'));
      });
   });
})(jQuery);

Nessa parte você pode configurar os itens do filtro:

Código:

   var settings = {
      categories: [
         {
            name: 'Categoria 1',
            id: 1
         },
         {
            name: 'Categoria 2',
            id: 2
         }
      ],
      
      forums: [
         {
            name: 'Forum 1',
            id: 1
         },
         {
            name: 'Forum 2',
            id: 2
         }
      ],
      
      lang: {
         all: 'Tudo',
         search: 'Busca avançada'
      }
   };

Sendo name o nome exibido e id o ID da categoria ou fórum na busca.

* Eu ainda terei que ajustar a posição dele na sua barra de navegação.

Olá,

Códigos adicionados.

Até.

Adicione ao CSS:

Código:

.fa-search {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(0, -50%);
}

.fa-search-input input {
    background-color: #fff;
}

Olá,

Ficou perfeito, agradecido.

Até.