Hello! I urgently need help, to develop an advanced search style, like Zap Imóveis (in mobile mode). Is it possible to do in pure CSS or is there FrameWorks? I'm waiting!
<script>
urlFiltro = "<?php echo $ROOTPATH; ?>/ajax/filtro_pesquisa.php";
jQuery(function() {
jQuery('#uf').bind('change', function(ev) {
jQuery.ajax({
type: 'POST',
url: urlFiltro,
data: { filtro: 'cidades', estado: jQuery('#uf').val() },
beforeSend: function() {
jQuery('#city').html('<option>Carregando...</option>');
jQuery('#select_imob_bairro').html('<option></option>');
},
success: function(r) {
jQuery('#city').html(r);
}
});
});
});
</script>
<div class="buscaMobile">
<form id="search-form">
<div class="linkNavForm">
<button data-id="show" style="color: #ffffff; background-color: #f26122; border-color: #f26122;font-size: 1.75em; flex-grow: 1; display: flex; padding: 13px 40px; border-radius: 10px;">Procurar</button>
<a data-id="show" href="#" style="color: #f26122; margin-right: 55px;"> Exibir busca
</a>
</div>
<div class="rowForm">
<label>Finalidade</label>
<select class="comprar" name="transacao" id="sl-transacao">
<option value="comprar">Comprar</option>
<option value="alugar">Alugar</option>
<option value="alugar-temporada">Alugar temporada</option>
<option value="lancamentos">Lançamentos</option>
</select>
</div>
<div class="rowForm">
<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
<div class="select select-large field-search select-transacao">
<label>Tipos de imóvel</label>
<select class="tipoimovel" name="tipoimovel" id="sl-tipoimovel">
<option value="">Tipos de imóvel</option>
<?php
while($row = mysql_fetch_assoc($tipos)) {
$nome = utf8_decode(tratamento_string($row["nome"]));
?>
<option value="<?php echo $nome; ?>"><?php echo utf8_decode($row["nome"]); ?></option>
<?php
}
?>
</select>
</div>
</section>
</div>
<div class="rowForm">
<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
<div class="select select-large field-search select-transacao">
<label>Quartos</label>
<select class="quantidade_quartos" id="quantidade_quartos">
<option value="0">Quartos</option>
<option value="1-quarto">1 quarto</option>
<option value="2-quartos">2 quartos</option>
<option value="3-quartos">3 quartos</option>
<option value="4-quartos">4 quartos</option>
<option value="5-quartos">5+ quartos</option>
</select>
</div>
</section>
</div>
<div class="rowForm">
<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
<div class="select select-large field-search select-transacao">
<label>Vagas</label>
<select class="quantidade_vagas" id="quantidade_vagas">
<option value="0">Vagas</option>
<option value="1-vaga">1 vaga</option>
<option value="2-vagas">2 vagas</option>
<option value="3-vagas">3 vagas</option>
<option value="4-vagas">4 vagas</option>
<option value="5-vagas">5+ vagas</option>
</select>
</div>
</section>
</div>
<div class="rowForm">
<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
<div class="select select-large field-search select-transacao">
<label>Estado</label>
<select name="uf" id="uf" class="uf">
<option value="">Todos os estados</option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AM">Amazonas</option>
<option value="AP">Amapá</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MG">Minas Gerais</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MT">Mato Grosso</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="PR">Paraná</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="RS">Rio Grande do Sul</option>
<option value="SC">Santa Catarina</option>
<option value="SE">Sergipe</option>
<option value="SP">São Paulo</option>
<option value="TO">Tocantins</option>
</select>
</div>
</section>
</div>
<div class="rowForm">
<section class="col col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadmar">
<div class="select select-large field-search select-transacao">
<label>Cidade</label>
<select class="city" id="city">
<option value="">Todas as cidades</option>
<?php
while ($row = mysql_fetch_array($cidades, MYSQL_ASSOC)) {
if ($_REQUEST['city_id'] == $row['id']) {
echo "<option value='{$row['nome']}' selected>{$row['nome']}</option>";
}
else {
echo "<option value='{$row['nome']}'>{$row['nome']}</option>";
}
}
?>
</select>
</div>
</section>
</div>
<div class="rowForm">
<input type="button" name="btnBuscar" id="search-imovel" value="Buscar" class="btnSubmit">
</div>
</form>
Search style
.buscaMobile {
top: 0px;
position: relative;
display: flex;
justify-content: center;
}
.buscaMobile select {
font-size: 13px;
margin-top: 5px;
width: 100%;
}
.buscaMobile label {
font-size: 14px;
font-weight: bold;
}
.rowForm {
height: 55px;
margin-bottom: 5px;
margin-top: 5px;
overflow: hidden;
width: 100%;
}
.linkNavForm {
width: 100%;
margin-top: 10px;
}
.linkNavForm a {
color: #666;
font-size: 13px;
float: right;
text-align: right;
}