Jump to content
DinhoPHP

Preciso desse estilo visual

Recommended Posts

Olá! Preciso urgentemente de ajuda, para desenvolver um estilo de busca avançada, como a do Zap Imóveis (no modo mobile). É possível fazer no CSS puro ou há FrameWorks? Fico no aguardo!

 

Não consegui enviar a imagem por erro no site deste fórum.

Share this post


Link to post
Share on other sites

Ficou bem vago para saber no que precisa de ajuda.... Já tem o código desenvolvido e tá dando algum erro ou o que ? 

Levando em conta o estilo da busca o zap, tem como fazer com CSS puro e também usando frameworks.

 

Passa mais informações pra podermos te ajudar...

Share this post


Link to post
Share on other sites
2 horas atrás, lciceris disse:

Ficou bem vago para saber no que precisa de ajuda.... Já tem o código desenvolvido e tá dando algum erro ou o que ? 

Levando em conta o estilo da busca o zap, tem como fazer com CSS puro e também usando frameworks.

 

Passa mais informações pra podermos te ajudar...

 

Obrigado pelo interesse em ajudar. Então, segue o código do menu do site do meu cliente:

 

bloco_filtroM.php

<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>

Desejo deixar igual ao do zapimoveis

Share this post


Link to post
Share on other sites

estilo do menu

.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;
    }

    

 

Share this post


Link to post
Share on other sites
10 horas atrás, Aphrodi disse:

Esse menu que você quer? 

http://prntscr.com/h1og5e

Sim, mas a parte quando clica na busca avançada, aparece os "botões" com os ícones que ao passar o mouse surge uma barra de rolagem. Estou procurando estilizar aqui, quando chegar nessa parte do hover ou a dificuldade que eu sentir, retornarei. Mas tendo alguma orientação, é só falar!

Share this post


Link to post
Share on other sites
9 horas atrás, Aphrodi disse:

Me envie o código com css que você conseguiu até agora

Tive alguns contra tempos durante o dia, mas segue os códigos. Enviarei o HTML novamente pois tive que fazer alterações. O resultado pode ser visto em acessando o site em modo mobile no Chrome, na resolução recomendada width 499px

 

HTML

/* Formatação busca avançada*/

	#search-form{
		margin: 0px auto;
		padding: 0px;
		box-sizing: border-box;
		background-color: #fff;
		float: left;
	}

	.filtros_principais{
		list-style: none;
		margin: 0px;
		padding: 5px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.filtros_principais li{
		width: 45%;
		min-width: inherit;
		font-size: 0.9em;
		line-height: normal;
		border: 1px solid #ddd;
		box-sizing: border-box;
		margin: 5px;
		padding: 5px;
		flex-grow: inherit;
	}

	.icon_faixa_preco{
		background: url("http://www.balcaodeservico.com.br/skin/padrao/images/icon_preco.png") 55px 55px;
	}

	.formata_btn{
		width: 40px;
		height: 40px;
		border: 0.5px solid #909093;
		border-radius: 0px;
		text-transform: uppercase;
		/*padding-top: 2px;*/
		background-color: #ffffff;
		font-size: 0.8em;
		margin-left: -5px;
	}

	#filtros_secundarios{
		display: block;
		padding: 15px;
	}

    #dpalavra_chave{
		font-weight: normal;

	}
	#dpalavra_chave input{
		width: calc(100% - 61px);
	}

	#dpalavra_chave button{
		/*width: 12%;*/
		border: 0.5px solid #909093;
		border-radius: 0px;
		text-transform: uppercase;
		/*padding-top: 2px;*/
		background-color: #ffffff;
		font-size: 0.8em;
	}

	#tipo_anuncio{
		width: 100%;
		display: table-footer-group;
	}

	#tipo_anuncio ul{
		list-style: none;
		display: flex;
		width: 100%;
		margin-left: -40px;
	}

css

OBS.: NÃO CONSEGUI INSERIR OS ICONES COM O ::BEFORE UTILIZANDO O CONTENT: URL('........')

 

Desde já agradeço pelo interesse em me ajudar. Valeu mesmo!

Share this post


Link to post
Share on other sites

Bom o posicionamento dos itens na tela eu consegui fazer de maneira satisfatória, agora, e ainda no CSS, estou com problemas em exibir os ícones com os comandos como: before, after e content. Tentei até o content: url('...........').

 

O resultado atual pode ser visto clicando aqui. (SEMPRE EM MODO MOBILE)

 

Arquivo HTML atual:

<form id="search-form" style="width: 95%; display: block;">
		<div class="linkNavForm" style="display: flex; flex-direction: column; flex-wrap: wrap; align-items: center;">
            <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;">Busca Avançada</a>
		</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>-->

        <ul class="filtros_principais">

            <li>

                <label id="lb_faixa_preco" class="icon_faixa_preco">FAIXA DE PREÇO?
                    <span>&blacktriangledown;</span>
                </label>
                <div id="dfaixa_preco" data-filtro="slider" style="display: none;">
                    <span>Faixa de preço R$</span>
                    <div id="box_slide_preco">
                        <ul>
                            <li>
                                <input type="text" id="typeprecomin" value="0" maxlength="11"/>
                            </li>

                            <li>
                                <span>até</span>
                                <span></span>
                            </li>

                            <li>
                                <input type="text" id="typeprecomax" maxlength="11">
                            </li>

                        </ul>

                        <div id="slide_busca_preco">
                            <div>
                                <div>

                                    <div>

                                    </div>

                                </div>

                                <div>

                                    <div>

                                    </div>

                                </div>
                            </div>
                        </div>

                        <span>ou</span>
                        <span id="sbuscaporparcela">Buscar por parcela</span>

                    </div>
                </div>

                <div id="dbusca_por_parcela" style="display: none;">

                    <span class="titulo">Buscar por parcela</span>

                    <div>

                        <div>
                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                        <div>

                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                        <div>

                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                        <div>

                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                        <div>

                            <label for="cvalor_entrada">Valor de entrada</label>
                            <input id="cvalor_entrada" type="text" placeholder="R$ 0" maxlength="11">
                        </div>

                    </div>

                    <input type="hidden" id="hd_modulo_novo" value="false">

                </div>

            </li>

            <li>

                <label id="lbquarto">QUARTOS
                <span>&blacktriangledown;</span>
                </label>

                <div id="dquarto" style="display: none;">

                    <span class="titulos">quartos</span>

                    <ul>

                        <li>

                            <input type="checkbox" id="quarto1" value="1">
                            <label for="quarto1">1</label>

                        </li><li>

                            <input type="checkbox" id="quarto2" value="2">
                            <label for="quarto2">2</label>

                        </li><li>

                            <input type="checkbox" id="quarto3" value="3">
                            <label for="quarto3">3</label>

                        </li>

                        <li>

                            <input type="checkbox" id="quarto4" value="4">
                            <label for="quarto4">4 ou mais</label>

                        </li>

                    </ul>

                </div>

            </li>

            <li>

                <label id="lbsuite">SUÍTES
                <span>&blacktriangledown;</span>
                </label>

                <div id="dsuite" style="display: none;">

                    <span class="titulo">Suítes</span>

                    <ul>

                        <li>
                            <input type="checkbox" id="suite1">
                            <label for="suite1">1</label>
                        </li><li>
                            <input type="checkbox" id="suite2">
                            <label for="suite2">2</label>
                        </li><li>
                            <input type="checkbox" id="suite3">
                            <label for="suite3">3</label>
                        </li>

                        <li>
                            <input type="checkbox" id="suite4">
                            <label for="suite4">4 ou mais</label>
                        </li>

                    </ul>
                </div>
            </li>

            <li>
                <label id="lbvaga">Vagas
                    <span>&blacktriangledown;</span>
                </label>
                
                <div id="dvaga" style="display: none;">
                    
                    <span class="titulo">Vagas</span>
                    
                    <ul>
                        
                        <li>
                            <input type="checkbox" id="vaga1" value="1">
                            <label for="vaga1">1</label>
                        </li><li>
                            <input type="checkbox" id="vaga2" value="2">
                            <label for="vaga2">2</label>
                        </li><li>
                            <input type="checkbox" id="vaga3" value="3">
                            <label for="vaga3">3</label>
                        </li>

                        <li>
                            <input type="checkbox" id="vaga4" value="4">
                            <label for="vaga4">4</label>
                        </li>

                    </ul>

                </div>

            </li>

            <li>

                <label id="lbfaixaarea">Área (m²)
                    <span>&blacktriangledown;</span>
                </label>

                <div id="dfaixaarea" style="display: none;">
                    <span class="titulo">Área (m²)</span>

                    <div id="box_busca">

                        <ul>

                            <li>
                                <input type="text" id="typearea_min_avan" maxlength="6" pattern="\d*">
                            </li>

                            <li class="spacer-slider">
                                <span class="spacer-left"></span>
                                até
                                <span class="spacer-right"></span>
                            </li>

                            <li>
                                <input type="text" id="typearea_max_avan" maxlength="6" pattern="\d*">
                            </li>

                        </ul>

                        <div id="slider_busca_min_area">

                            <div>

                                <div style="left: 0%;">

                                    <div>

                                    </div>

                                </div>

                                <div style="left: 100%;">

                                    <div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </li>

        </ul>

        <div id="filtros_secundarios">

            <label>O que você busca em um imóvel?</label>
            <div id="dpalavra_chave">
                <input id="palavra_chave" type="text" placeholder="Ex: rua, piscina, churrasqueira..." autocomplete="off" maxlength="40"/>
                <button type="button" id="busca_pchave" class="formata_btn">+</button>

                <div id="tipo_anuncio">

                   <label class="tp_anuncio_label">Exibir apenas anúncios:</label>

                    <ul style="list-style: none;">

                        <li style="white-space: nowrap; width: auto;">
                        <input type="checkbox" id="chkbusca_avan_end" name="chkbusca_avan_e01" class="formata_checkbox">
                        <label for="chkbusca_avan_end" class="tp_anuncio_label" style="margin-left: 5px;">Com endereço</label>
                        </li>

                    <li style="white-space: nowrap; width: auto;">

                        <input type="checkbox" id="chkbusca_avan_distrato" name="chkbusca_avan_d01" class="formata_checkbox">
                        <label for="chkbusca_avan_distrato" class="tp_anuncio_label" style="margin-left: 5px;">Oportunidades | Revendas</label>

                    </li>

                   </ul>
                </div>

                <label>Código do imóvel</label>
            <div id="dcodigo_imovel">
                <input id="codigo_imovel" type="text" placeholder="Digite o código (ex: IM00000)" autocomplete="off" maxlength="40"/>
                <button type="button" id="busca_codigo" class="formata_btn">OK</button>

            </div>

        </div>

		</div>			
		<div class="rowForm">	
			<input type="button" name="btnBuscar" id="search-imovel" value="Buscar" class="btnSubmit">
		</div>
	</form>

Arquivo atual CSS:

/* Formatação busca avançada*/

	#search-form{
		margin: 0px auto;
		padding: 0px;
		box-sizing: border-box;
		background-color: #fff;
		float: left;
	}

	.filtros_principais{
		list-style: none;
		margin: 0px;
		padding: 5px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.filtros_principais li{
		width: 45%;
		min-width: inherit;
		font-size: 0.9em;
		line-height: normal;
		border: 1px solid #ddd;
		box-sizing: border-box;
		margin: 5px;
		padding: 5px;
		flex-grow: inherit;
	}

	.icon_faixa_preco{
		background: url("http://www.balcaodeservico.com.br/skin/padrao/images/icon_preco.png") 55px 55px;
	}

	.formata_btn{
		width: 40px;
		height: 40px;
		border: 0.5px solid #909093;
		border-radius: 0px;
		text-transform: uppercase;
		/*padding-top: 2px;*/
		background-color: #ffffff;
		font-size: 0.8em;
		margin-left: -5px;
	}

	#filtros_secundarios{
		display: block;
		padding: 15px;
	}

    #dpalavra_chave{
		font-weight: normal;

	}
	#palavra_chave{
		width: calc(100% - 61px);
	}

	#codigo_imovel{
		width: calc(100% - 61px);
	}

	#dpalavra_chave button{
		/*width: 12%;*/
		border: 0.5px solid #909093;
		border-radius: 0px;
		text-transform: uppercase;
		/*padding-top: 2px;*/
		background-color: #ffffff;
		font-size: 0.8em;
	}

	#tipo_anuncio{
		margin-top: 15px;
	}

	.tp_anuncio_label{
		white-space: nowrap;
	}

	#tipo_anuncio ul{
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0px;
	}

	.formata_checkbox{
		float: left;
		width: 20px;
		height: 20px;
		margin: 0px;
		background-color: #ffffff;
		border: 2px solid #dddddd;
		box-sizing: border-box;
	}

 

Share this post


Link to post
Share on other sites

Se for esses icones:

rPINysVQTSOITiNqfcLPUg.png

Adicione no topo do seu site entre as tags <head> isso:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

e no css coloque assim:

.a classe do objeto:before{
	font: normal normal normal 14px/1 FontAwesome;
	content: "\e602";
}

 

Outros icones e códigos para o content você acha aqui:

http://fontawesome.io/icons/

 

Lembre-se de usar sempre a \ antes do código.

 

Desculpe a demora, para responder.

 

Abraços

Share this post


Link to post
Share on other sites
Em 27/10/2017 at 02:20, Aphrodi disse:

Se for esses icones:

rPINysVQTSOITiNqfcLPUg.png

Adicione no topo do seu site entre as tags <head> isso:


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

e no css coloque assim:


.a classe do objeto:before{
	font: normal normal normal 14px/1 FontAwesome;
	content: "\e602";
}

 

Outros icones e códigos para o content você acha aqui:

http://fontawesome.io/icons/

 

Lembre-se de usar sempre a \ antes do código.

 

Desculpe a demora, para responder.

 

Abraços

Então Aphrodi, estou eu de volta após tanto tempo rs. Depois de muitas lutas e contratempos, estou com todo estilo visual do site, pronto, de acordo com que ele quis. Fiz o me indicou sem problemas, mas como eu já havia preparado uma estrutura para trabalhar com <img/>, segui com a mesma, porém, adquiri conhecimento com o que me indicou. No momento porém, estou com dificuldades nos botões, pois o meu cliente o quer azul ao acessar o site ou a cada seleção, isso no desktop, fiz muito bem de diversas maneiras, porém no celular, de modo algum funcionou. Segue o código HTML e JavaScript.

 

HTML

<div id="procura_cliente">
                    <button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)">Comprar</button>
					<button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)">Alugar</button>
					<button id="btn_categorias" class="btn_desclicado" onclick="changeBgColor(this)">Lançamentos</button>
                    
</div>

Javascript

function changeBgColor(element) {
    if(element.className === 'btn_clicado') {
        element.className = 'btn_desclicado';
    } else {
        element.className = 'btn_clicado';
    }
}

Estou pensando também, como fazer com que apareça uma opção ao selecionarmos a opção preço e outras, aonde nela escolhemos valores e etc por meio de uma barra de rolagem. Desde já agradeço, e um forte abraço! 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By jcvlanova
      Galera, dei uma olhada no Site https://www.fastly.com/ e percebi que a página é estruturada com linhas curvas que circundam os tópicos da página, alguém saberia me dizer como é possível fazer essas linhas curvas numa página html ???
    • By Carcleo
      Tenho um botão, que pega a primeira li da ul e joga ela para a ultima posição ininterruptamente e assim eu faço um efeito de slideshow.
       
      HTML:
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slider"> <ul> <li> Slide 1 </li> <li> Slide 2 </li> <li> Slide 3 </li> <li> Slide 4 </li> </ul> <button id="back"> BACK </button> <button id="next"> NEXT </button> </div> CSS:
      * { margin: 0; padding: 0; } body { display: flex; width: 1000px; margin: 0 auto; } .slider { position: relative; display: flex; flex-direction: column; width: 1000px; height: 200px; overflow: hidden; border: 1px solid #000; } .slider > ul { display: flex; flex-wrap: wrap; width: 5000px; } .slider > ul > li { display: flex; justify-content: center; width: 500px; height: 150px; margin: 10px; } .slider > ul > li:hover { cursor: crosshair; } .slider > button { position: absolute; display: flex; justify-content: center; top: calc(45% - 15px); width: 30px; height: 30px; opacity: 0.2; } .slider > button:hover { opacity: 1; cursor: pointer; } .slider > button#back { left: 10px; } .slider > button#next { right: 10px; } .animacao { animation-duration: 4s; animation-name: identifier; } @keyframes identifier { 0% { right: 0; } 50% { right: 50%;} 75% { right: 75%; } 100% { right: 100%; } } JQUERY:
      function intervalo () { $(".slider > #next").click (); } var interval = setInterval(intervalo,4000); $(".slider > ul > li") .mouseover(function(){ clearInterval(interval); }) .mouseout(function(){ interval = setInterval(intervalo,4000); }) .addClass("animacao"); $(".slider > #back").click ( function(){ var liMover = $('.slider ul li:last-of-type'); // copia o conteudo da última $(liMover).insertBefore('.slider ul li:first-of-type'); // insere antes da primeira }); $(".slider > #next").click ( function(){ var liMover = $('.slider ul li:first-of-type'); // copia o conteudo da primeira $(liMover).insertAfter('.slider ul li:last-of-type'); // insere depois da última }); Tudo funciona bem.
      Mas estou tentando adicionar um efeito de transição tipo quando as lis mudarem de posição, elas correrem da direita para a esquerda em vez de aparecerem abruptamente.
       
      Será que tem como?
       
       
    • By juliosonic
      Boa noite..
      Estou desenvolvendo um site de Reiki https://reikicuritiba.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>
      https://cristaispuroencanto.com.br/
      https://www.mandalatantra.com.br/
              
      Obrigado
      Att
      Julio Cezar
       
       
       
    • By SrDanielMarques
      Olá pessoal, tudo bem?
       
      Eu possuo um sistema de teatro que mostra todo o mapa do teatro para a compra de ingressos. Porém o sistema não está 100% responsivo para celulares, ele faz a quebra (bagunça) de todo o mapa, vou estar anexando as fotos,, a primeira, que mostra a visão geral do teatro é via Desktop, está tudo ok. O problema é a versão Mobile que faz a quebra do mapa, gostaria de saber como posso solucionar este problema, gostaria de jogar o mapa para o "fundo" da tela, para que seja possível visualizar o mapa total mesmo em celulares.
       
      Alguém poderia me dar um força como solucionar?


    • By Blasius
      Olá pessoal.
       
      Estou treinando códigos em js e quero fazer uma calculadora;  a ideia é a seguinte: 
       
      o usuário coloca os números no input, e escolhe qual operação ele quer em um select.
      Porém o js sempre me retorna o valor 0, ja revisei o código muitas vezes e não encontro o erro.
       
       ---------------------------------- HTML---------------------------------------------------
       
      <body>
          <h1> Calculadora </h1> 
       
          <p> Digite um número: <input type="number" id="valor1" name="nValor1"> </p>
          
              <select id="operador">
                      <option value="vezes" id="multiplicacao">  vezes * </option>
              </select>
       
          <p>Digite um número: <input type="number" id="valor2" name="nValor2"> </p>
          <input type="submit" value="calcular" onclick="calcular()">    // obs** com o type="button" também não funcionou

          <div id="divRes"> Aqui vai o resultado! </div>   
       
      <script src="calculadora.js">
          
      </script>
      </body>
       
      -----------------------------------------------------------------  JAVASCRIPT  ------------------------------------------------------------------
       
      let v1 = document.getElementById('valor1');
      let valor1 = Number(v1.value)
       
      let v2  = document.getElementById('valor2');
      let valor2 = Number(v2.value)
       
      let operador = document.getElementById('operador').selectedIndex;
      let divRes = document.getElementById('divRes')
       
       
      function calcular(){
          let resultado = " "

          if (document.getElementById("multiplicacao").selected = true ) {
              
              resultado = (valor1 * valor2) 
              divRes.innerHTML= `${resultado}`
              console.log(typeof valor1, typeof valor2, typeof resultado) // todos retornam number
        
         } else {
              alert ('teste')
          }
      }
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.