Jump to content

Search the Community

Showing results for tags 'dropdown'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 28 results

  1. vanessaaaaaaa

    DropDown empurra div para baixo

    Tenho um codigo html com JavaScript com um dropDown para estado que exibe a cidade de acordo com esse estado e depois mostra um endereço, a cada seleção ele empurra a div que esta em baixo mais para baixo. <div class="fisico " > <select id="test" name="form_select" onchange="mostrarCidade(this)" style="width: 200px; text-align: center; text-align-last: center;"> <option value="0">Estados</option> <option value="1">Rio de Janeiro</option> <option value="2">Espirito Santo</option> <option value="3">Minas Gerais</option> </select> <div id="cidadeRio" style="display:none;" style="position:relative;" > <select id="rio" name="form_rio" onchange="mostrarEndereco(this)" style="width: 200px;text-align: center; text-align-last: center;" > <option value="0">Cidade</option> <option value="1">ITAPERUNA</option> <option value="2">CAMPOS DOS GOYTACAZES</option> <option value="3">RIO DAS OSTRAS</option> <option value="4">MACAÉ</option> <option value="5">SAQUAREMA</option> <option value="6">MARICA</option> <option value="7">ARARUAMA</option> <option value="8">CABO FRIO</option> <option value="9">RIO BONITO</option> <option value="10">SÃO PEDRO DA ALDEIA</option> <option value="11">NOVA FRIBURGO</option> <option value="12">PETROPOLIS</option> <option value="13">TERESOPOLIS</option> </select><br> <div class="ruasRio" style="width: 200px; text-align: center; text-align-last: center;"> <div id="itaperuna" style="display:none;" >AV CARDOSO MOREIRA nº325 - Centro</div> <div id="campos"style="display:none;">AV 7 DE SETEMBRO nº492 - Centro</div> <div id="ostras"style="display:none;">AV AMARAL PEIXOTO nº4472 - BALNEARIO REMANSO</div> <div id="macae"style="display:none;">AV RUI BARBOSA nº663 - Centro</div> <div id="saquarema"style="display:none;"> RUA PROF FRANCISCO FONSECA nº350 - Bacaxa</div> <div id="marica"style="display:none;"> PC CONSELHERO MACEDO SOARES nº168 - Centro</div> <div id="araruama"style="display:none;"> RUA MAJOR FELIX MOREIRA nº107 - Centro</div> <div id="cabo"style="display:none;"> RUA TEIXEIRA E SOUZA nº31 - Centro</div> <div id="bonito"style="display:none;">RUA XV DE NOVEMBRO nº104</div> <div id="pedro"style="display:none;">RUA DR ANTONIO ALVES nº208/218 - Centro</div> <div id="friburgo"style="display:none;">AV ALBERTO BRAUNE nº64 - Centro</div> <div id="petropolis"style="display:none;">RUA DO IMPERADOR nº751 - Centro</div> <div id="teresopolis"style="display:none;">AV DELFIM MOREIRA nº610 - Centro</div> </div> </div> <div id="cidadeEs" style="display:none;" style="position:relative;"> <select id="es" name="form_es" onchange="mostrarEndereco(this)" style="width: 200px; text-align: center; text-align-last: center; "> <option value="14">Cidade</option> <option value="15">VILA VELHA</option> <option value="16">VITORIA</option> <option value="17">SERRA</option> <option value="18">CARIACICA</option> <option value="19">CACHOEIRO DE ITAPEMIRIM</option> <option value="20">GUARAPARI</option> <option value="21">SÄO MATEUS</option> <option value="22">LINHARES</option> <option value="23">ARACRUZ</option> <option value="24">COLATINA</option> <option value="25">GUACUI</option> </select><br> <div class="ruasEs" style="width: 200px; text-align: center; text-align-last: center;"> <div id="velha" style="display:none;">AV JERONIMO MONTEIRO nº74 - Centro</div> <div id="vitoria"style="display:none;">AV PRINCESA ISABEL nº426 - Centro</div> <div id="serra"style="display:none;">AV JOAO PALACIOS nº300 - Fatima</div> <div id="cariacica"style="display:none;">Rod. BR 262, KM 5 nº6555 - São Francisco</div> <div id="itapemirim"style="display:none;">RUA CEL FRANCISCO BRAGA nº71/73 - Centro</div> <div id="guarapari"style="display:none;"> RUA EWERSON DE ABREU SODRE nº1 - Muquicaba</div> <div id="mateus"style="display:none;"> RUA CEL. MATEUS CUNHA nº67 - Centro</div> <div id="linhares"style="display:none;"> AV GOV JONES SANTOS NEVES nº912 - Centro</div> <div id="aracruz"style="display:none;">AV VENANCIO FLORES nº1116 - Centro</div> <div id="colatina"style="display:none;">AV GETULIO VARGAS nº203 - Centro</div> <div id="guacui"style="display:none;"> PRACA DA BANDEIRA nº1 - Centro</div> </div> </div> <div id="cidadeMinas" style="display:none; " style="position:relative;" > <select id="minas" name="form_minas" onchange="mostrarEndereco(this)" style="width: 200px" style="height: 125px; "> <option value="26">Cidade</option> <option value="27">BELO HORIZONTE</option> <option value="28">RIBEIRAO DAS NEVES</option> <option value="29">SANTA LUZIA</option> <option value="30">CONTAGEM</option> <option value="31">BETIM</option> <option value="32">CONSELHEIRO LAFAIETE</option> <option value="33">SETE LAGOAS</option> <option value="34">BARBACENA</option> <option value="35">MONTES CLAROS</option> <option value="36">JUIZ DE FORA</option> <option value="37">DIVINOPOLIS</option> <option value="38">GOVERNADOR VALADARES</option> <option value="39">TIMOTEO</option> <option value="40">IPATINGA</option> </select><br> <div class="ruasMinas" style="width: 200px; text-align: center; text-align-last: center;"> <div id="bh" style="display:none;">RUA DOS CARIJOS nº516 - Centro</div> <div id="neves"style="display:none;">RUA RAIMUNDO NONATO DE SOUZA nº26 - Centro</div> <div id="luzia"style="display:none;">AV BRASILIA nº2165 - São Benedito</div> <div id="contagem"style="display:none;">RUA TIRADENTES nº2550 - Bairro Industrial</div> <div id="betim"style="display:none;">RODOVIA BR 381 FERNÃO DIAS KM 492,6 - São João</div> <div id="lafaiete"style="display:none;"> RUA DOUTOR MELO VIANA nº10 - Centro</div> <div id="lagoas"style="display:none;"> AV DEPUTADO EMILIO DE VASCONCELOS COSTA nº34 - Centro</div> <div id="barbacena"style="display:none;"> RUA QUINZE DE NOVEMBRO nº86 - Centro</div> <div id="claros"style="display:none;">AV DONATO QUINTINO nº90 - Canelas</div> <div id="juiz"style="display:none;">RUA MARECHAL DEODORO nº558 - Centro</div> <div id="divinopolis"style="display:none;"> RUA MOACIR JOSE LEITE nº100 - Santa Clara</div> <div id="valadares"style="display:none;"> RUA MARECHAL FLORIANO nº824 - Centro</div> <div id="timoteo"style="display:none;"> ALAMENDA 31 DE OUTUBRO nº115 - Centro Norte</div> <div id="ipatinga"style="display:none;"> AV 28 DE ABRIL nº187 - Centro</div> </div> </div> <script type="text/javascript"> function mostrarCidade(select){ if(select.value==1){ document.getElementById('cidadeRio').style.display = "block"; document.getElementById('cidadeEs').style.display = "none"; document.getElementById('cidadeMinas').style.display = "none"; } else if(select.value==2){ document.getElementById('cidadeRio').style.display = "none"; document.getElementById('cidadeEs').style.display = "block"; document.getElementById('cidadeMinas').style.display = "none"; }else if(select.value==3){ document.getElementById('cidadeRio').style.display = "none"; document.getElementById('cidadeEs').style.display = "none"; document.getElementById('cidadeMinas').style.display = "block"; }else{ document.getElementById('cidadeRio').style.display = "none"; document.getElementById('cidadeEs').style.display = "none"; document.getElementById('cidadeMinas').style.display = "none"; } } function mostrarEndereco(select){ if(select.value==1){ document.getElementById('itaperuna').style.display = "block"; document.getElementById('campos').style.display = "none"; document.getElementById('ostras').style.display = "none"; document.getElementById('macae').style.display = "none"; document.getElementById('saquarema').style.display = "none"; document.getElementById('marica').style.display = "none"; document.getElementById('araruama').style.display = "none"; document.getElementById('cabo').style.display = "none"; document.getElementById('bonito').style.display = "none"; document.getElementById('pedro').style.display = "none"; document.getElementById('friburgo').style.display = "none"; document.getElementById('petropolis').style.display = "none"; document.getElementById('teresopolis').style.display = "none"; } else if(select.value==2){ document.getElementById('campos').style.display = "block"; document.getElementById('itaperuna').style.display = "none"; document.getElementById('ostras').style.display = "none"; document.getElementById('macae').style.display = "none"; document.getElementById('saquarema').style.display = "none"; document.getElementById('marica').style.display = "none"; document.getElementById('araruama').style.display = "none"; document.getElementById('cabo').style.display = "none"; document.getElementById('bonito').style.display = "none"; document.getElementById('pedro').style.display = "none"; document.getElementById('friburgo').style.display = "none"; document.getElementById('petropolis').style.display = "none"; document.getElementById('teresopolis').style.display = "none"; }else if(select.value==3){ document.getElementById('ostras').style.display = "block"; document.getElementById('campos').style.display = "none"; document.getElementById('itaperuna').style.display = "none"; document.getElementById('macae').style.display = "none"; document.getElementById('saquarema').style.display = "none"; document.getElementById('marica').style.display = "none"; document.getElementById('araruama').style.display = "none"; document.getElementById('cabo').style.display = "none"; document.getElementById('bonito').style.display = "none"; document.getElementById('pedro').style.display = "none"; document.getElementById('friburgo').style.display = "none"; document.getElementById('petropolis').style.display = "none"; document.getElementById('teresopolis').style.display = "none"; }else if(select.value==4){ document.getElementById('macae').style.display = "block"; document.getElementById('campos').style.display = "none"; document.getElementById('ostras').style.display = "none"; document.getElementById('itaperuna').style.display = "none"; document.getElementById('saquarema').style.display = "none"; document.getElementById('marica').style.display = "none"; document.getElementById('araruama').style.display = "none"; document.getElementById('cabo').style.display = "none"; document.getElementById('bonito').style.display = "none"; document.getElementById('pedro').style.display = "none"; document.getElementById('friburgo').style.display = "none"; document.getElementById('petropolis').style.display = "none"; document.getElementById('teresopolis').style.display = "none"; } else if(select.value==5){ document.getElementById('saquarema').style.display = "block"; document.getElementById('campos').style.display = "none"; document.getElementById('ostras').style.display = "none"; document.getElementById('macae').style.display = "none"; document.getElementById('itaperuna').style.display = "none"; document.getElementById('marica').style.display = "none"; document.getElementById('araruama').style.display = "none"; document.getElementById('cabo').style.display = "none"; document.getElementById('bonito').style.display = "none"; document.getElementById('pedro').style.display = "none"; document.getElementById('friburgo').style.display = "none"; document.getElementById('petropolis').style.display = "none"; document.getElementById('teresopolis').style.display = "none"; } else if(select.value==6){ document.getElementById('marica').style.display = "block"; document.getElementById('campos').style.display = "none"; document.getElementById('ostras').style.display = "none"; document.getElementById('macae').style.display = "none"; document.getElementById('saquarema').style.display = "none"; document.getElementById('itaperuna').style.display = "none"; document.getElementById('araruama').style.display = "none"; document.getElementById('cabo').style.display = "none"; document.getElementById('bonito').style.display = "none"; document.getElementById('pedro').style.display = "none"; document.getElementById('friburgo').style.display = "none"; document.getElementById('petropolis').style.display = "none"; document.getElementById('teresopolis').style.display = "none"; } else if(select.value==7){ document.getElementById('araruama').style.display = "block"; document.getElementById('campos').style.display = "none"; document.getElementById('ostras').style.display = "none"; document.getElementById('macae').style.display = "none"; document.getElementById('saquarema').style.display = "none"; document.getElementById('marica').style.display = "none"; document.getElementById('itaperuna').style.display = "none"; document.getElementById('cabo').style.display = "none"; document.getElementById('bonito').style.display = "none"; document.getElementById('pedro').style.display = "none"; document.getElementById('friburgo').style.display = "none"; document.getElementById('petropolis').style.display = "none"; document.getElementById('teresopolis').style.display = "none"; } else if(select.value==8){ document.getElementById('cabo').style.display = "block"; document.getElementById('campos').style.display = "none"; document.getElementById('ostras').style.display = "none"; document.getElementById('macae').style.display = "none"; document.getElementById('saquarema').style.display = "none"; document.getElementById('marica').style.display = "none"; document.getElementById('araruama').style.display = "none"; document.getElementById('itaperuna').style.display = "none"; document.getElementById('bonito').style.display = "none"; document.getElementById('pedro').style.display = "none"; document.getElementById('friburgo').style.display = "none"; document.getElementById('petropolis').style.display = "none"; document.getElementById('teresopolis').style.display = "none"; } else if(select.value==9){ document.getElementById('bonito').style.display = "block"; document.getElementById('campos').style.display = "none"; document.getElementById('ostras').style.display = "none"; document.getElementById('macae').style.display = "none"; document.getElementById('saquarema').style.display = "none"; document.getElementById('marica').style.display = "none"; document.getElementById('araruama').style.display = "none"; document.getElementById('cabo').style.display = "none"; document.getElementById('itaperuna').style.display = "none"; document.getElementById('pedro').style.display = "none"; document.getElementById('friburgo').style.display = "none"; document.getElementById('petropolis').style.display = "none"; document.getElementById('teresopolis').style.display = "none"; } else if(select.value==10){ document.getElementById('pedro').style.display = "block"; document.getElementById('campos').style.display = "none"; document.getElementById('ostras').style.display = "none"; document.getElementById('macae').style.display = "none"; document.getElementById('saquarema').style.display = "none"; document.getElementById('marica').style.display = "none"; document.getElementById('araruama').style.display = "none"; document.getElementById('cabo').style.display = "none"; document.getElementById('bonito').style.display = "none"; document.getElementById('itaperuna').style.display = "none"; document.getElementById('friburgo').style.display = "none"; document.getElementById('petropolis').style.display = "none"; document.getElementById('teresopolis').style.display = "none"; } else if(select.value==11){ document.getElementById('friburgo').style.display = "block"; document.getElementById('campos').style.display = "none"; document.getElementById('ostras').style.display = "none"; document.getElementById('macae').style.display = "none"; document.getElementById('saquarema').style.display = "none"; document.getElementById('marica').style.display = "none"; document.getElementById('araruama').style.display = "none"; document.getElementById('cabo').style.display = "none"; document.getElementById('bonito').style.display = "none"; document.getElementById('pedro').style.display = "none"; document.getElementById('itaperuna').style.display = "none"; document.getElementById('petropolis').style.display = "none"; document.getElementById('teresopolis').style.display = "none"; } else if(select.value==12){ document.getElementById('petropolis').style.display = "block"; document.getElementById('campos').style.display = "none"; document.getElementById('ostras').style.display = "none"; document.getElementById('macae').style.display = "none"; document.getElementById('saquarema').style.display = "none"; document.getElementById('marica').style.display = "none"; document.getElementById('araruama').style.display = "none"; document.getElementById('cabo').style.display = "none"; document.getElementById('bonito').style.display = "none"; document.getElementById('pedro').style.display = "none"; document.getElementById('friburgo').style.display = "none"; document.getElementById('itaperuna').style.display = "none"; document.getElementById('teresopolis').style.display = "none"; } else if(select.value==13){ document.getElementById('teresopolis').style.display = "block"; document.getElementById('campos').style.display = "none"; document.getElementById('ostras').style.display = "none"; document.getElementById('macae').style.display = "none"; document.getElementById('saquarema').style.display = "none"; document.getElementById('marica').style.display = "none"; document.getElementById('araruama').style.display = "none"; document.getElementById('cabo').style.display = "none"; document.getElementById('bonito').style.display = "none"; document.getElementById('pedro').style.display = "none"; document.getElementById('friburgo').style.display = "none"; document.getElementById('petropolis').style.display = "none"; document.getElementById('itaperuna').style.display = "none"; }else if(select.value==15){ document.getElementById('velha').style.display = "block"; document.getElementById('vitoria').style.display = "none"; document.getElementById('serra').style.display = "none"; document.getElementById('cariacica').style.display = "none"; document.getElementById('itapemirim').style.display = "none"; document.getElementById('guacui').style.display = "none"; document.getElementById('guarapari').style.display = "none"; document.getElementById('mateus').style.display = "none"; document.getElementById('linhares').style.display = "none"; document.getElementById('aracruz').style.display = "none"; document.getElementById('colatina').style.display = "none"; }else if(select.value==16){ document.getElementById('velha').style.display = "none"; document.getElementById('vitoria').style.display = "block"; document.getElementById('serra').style.display = "none"; document.getElementById('cariacica').style.display = "none"; document.getElementById('itapemirim').style.display = "none"; document.getElementById('guarapari').style.display = "none"; document.getElementById('mateus').style.display = "none"; document.getElementById('linhares').style.display = "none"; document.getElementById('aracruz').style.display = "none"; document.getElementById('colatina').style.display = "none"; document.getElementById('guacui').style.display = "none"; }else if(select.value==17){ document.getElementById('velha').style.display = "none"; document.getElementById('vitoria').style.display = "none"; document.getElementById('serra').style.display = "block"; document.getElementById('cariacica').style.display = "none"; document.getElementById('itapemirim').style.display = "none"; document.getElementById('guarapari').style.display = "none"; document.getElementById('mateus').style.display = "none"; document.getElementById('linhares').style.display = "none"; document.getElementById('aracruz').style.display = "none"; document.getElementById('colatina').style.display = "none"; document.getElementById('guacui').style.display = "none"; }else if(select.value==18){ document.getElementById('velha').style.display = "none"; document.getElementById('vitoria').style.display = "none"; document.getElementById('serra').style.display = "none"; document.getElementById('cariacica').style.display = "block"; document.getElementById('itapemirim').style.display = "none"; document.getElementById('guarapari').style.display = "none"; document.getElementById('mateus').style.display = "none"; document.getElementById('linhares').style.display = "none"; document.getElementById('aracruz').style.display = "none"; document.getElementById('colatina').style.display = "none"; document.getElementById('guacui').style.display = "none"; }else if(select.value==19){ document.getElementById('velha').style.display = "none"; document.getElementById('vitoria').style.display = "none"; document.getElementById('serra').style.display = "none"; document.getElementById('cariacica').style.display = "none"; document.getElementById('itapemirim').style.display = "block"; document.getElementById('guarapari').style.display = "none"; document.getElementById('mateus').style.display = "none"; document.getElementById('linhares').style.display = "none"; document.getElementById('aracruz').style.display = "none"; document.getElementById('colatina').style.display = "none"; document.getElementById('guacui').style.display = "none"; }else if(select.value==20){ document.getElementById('velha').style.display = "none"; document.getElementById('vitoria').style.display = "none"; document.getElementById('serra').style.display = "none"; document.getElementById('cariacica').style.display = "none"; document.getElementById('itapemirim').style.display = "none"; document.getElementById('guarapari').style.display = "block"; document.getElementById('mateus').style.display = "none"; document.getElementById('linhares').style.display = "none"; document.getElementById('aracruz').style.display = "none"; document.getElementById('colatina').style.display = "none"; document.getElementById('guacui').style.display = "none"; }else if(select.value==21){ document.getElementById('velha').style.display = "none"; document.getElementById('vitoria').style.display = "none"; document.getElementById('serra').style.display = "none"; document.getElementById('cariacica').style.display = "none"; document.getElementById('itapemirim').style.display = "none"; document.getElementById('guarapari').style.display = "none"; document.getElementById('mateus').style.display = "block"; document.getElementById('linhares').style.display = "none"; document.getElementById('aracruz').style.display = "none"; document.getElementById('colatina').style.display = "none"; document.getElementById('guacui').style.display = "none"; }else if(select.value==22){ document.getElementById('velha').style.display = "none"; document.getElementById('vitoria').style.display = "none"; document.getElementById('serra').style.display = "none"; document.getElementById('cariacica').style.display = "none"; document.getElementById('itapemirim').style.display = "none"; document.getElementById('guarapari').style.display = "none"; document.getElementById('mateus').style.display = "none"; document.getElementById('linhares').style.display = "block"; document.getElementById('aracruz').style.display = "none"; document.getElementById('colatina').style.display = "none"; document.getElementById('guacui').style.display = "none"; }else if(select.value==23){ document.getElementById('velha').style.display = "none"; document.getElementById('vitoria').style.display = "none"; document.getElementById('serra').style.display = "none"; document.getElementById('cariacica').style.display = "none"; document.getElementById('itapemirim').style.display = "none"; document.getElementById('guarapari').style.display = "none"; document.getElementById('mateus').style.display = "none"; document.getElementById('linhares').style.display = "none"; document.getElementById('aracruz').style.display = "block"; document.getElementById('colatina').style.display = "none"; document.getElementById('guacui').style.display = "none"; }else if(select.value==24){ document.getElementById('velha').style.display = "none"; document.getElementById('vitoria').style.display = "none"; document.getElementById('serra').style.display = "none"; document.getElementById('cariacica').style.display = "none"; document.getElementById('itapemirim').style.display = "none"; document.getElementById('guarapari').style.display = "none"; document.getElementById('mateus').style.display = "none"; document.getElementById('linhares').style.display = "none"; document.getElementById('aracruz').style.display = "none"; document.getElementById('colatina').style.display = "block"; document.getElementById('guacui').style.display = "none"; }else if(select.value==25){ document.getElementById('velha').style.display = "none"; document.getElementById('vitoria').style.display = "none"; document.getElementById('serra').style.display = "none"; document.getElementById('cariacica').style.display = "none"; document.getElementById('itapemirim').style.display = "none"; document.getElementById('guarapari').style.display = "none"; document.getElementById('mateus').style.display = "none"; document.getElementById('linhares').style.display = "none"; document.getElementById('aracruz').style.display = "none"; document.getElementById('colatina').style.display = "none"; document.getElementById('guacui').style.display = "block"; } else if(select.value==27){ document.getElementById('bh').style.display = "block"; document.getElementById('neves').style.display = "none"; document.getElementById('luzia').style.display = "none"; document.getElementById('contagem').style.display = "none"; document.getElementById('betim').style.display = "none"; document.getElementById('lafaiete').style.display = "none"; document.getElementById('lagoas').style.display = "none"; document.getElementById('barbacena').style.display = "none"; document.getElementById('claros').style.display = "none"; document.getElementById('juiz').style.display = "none"; document.getElementById('divinopolis').style.display = "none"; document.getElementById('valadares').style.display = "none"; document.getElementById('timoteo').style.display = "none"; document.getElementById('ipatinga').style.display = "none"; }else if(select.value==28){ document.getElementById('bh').style.display = "none"; document.getElementById('neves').style.display = "block"; document.getElementById('luzia').style.display = "none"; document.getElementById('contagem').style.display = "none"; document.getElementById('betim').style.display = "none"; document.getElementById('lafaiete').style.display = "none"; document.getElementById('lagoas').style.display = "none"; document.getElementById('barbacena').style.display = "none"; document.getElementById('claros').style.display = "none"; document.getElementById('juiz').style.display = "none"; document.getElementById('divinopolis').style.display = "none"; document.getElementById('valadares').style.display = "none"; document.getElementById('timoteo').style.display = "none"; document.getElementById('ipatinga').style.display = "none"; } else if(select.value==29){ document.getElementById('bh').style.display = "none"; document.getElementById('neves').style.display = "none"; document.getElementById('luzia').style.display = "block"; document.getElementById('contagem').style.display = "none"; document.getElementById('betim').style.display = "none"; document.getElementById('lafaiete').style.display = "none"; document.getElementById('lagoas').style.display = "none"; document.getElementById('barbacena').style.display = "none"; document.getElementById('claros').style.display = "none"; document.getElementById('juiz').style.display = "none"; document.getElementById('divinopolis').style.display = "none"; document.getElementById('valadares').style.display = "none"; document.getElementById('timoteo').style.display = "none"; document.getElementById('ipatinga').style.display = "none"; } else if(select.value==30){ document.getElementById('bh').style.display = "none"; document.getElementById('neves').style.display = "none"; document.getElementById('luzia').style.display = "none"; document.getElementById('contagem').style.display = "block"; document.getElementById('betim').style.display = "none"; document.getElementById('lafaiete').style.display = "none"; document.getElementById('lagoas').style.display = "none"; document.getElementById('barbacena').style.display = "none"; document.getElementById('claros').style.display = "none"; document.getElementById('juiz').style.display = "none"; document.getElementById('divinopolis').style.display = "none"; document.getElementById('valadares').style.display = "none"; document.getElementById('timoteo').style.display = "none"; document.getElementById('ipatinga').style.display = "none"; } else if(select.value==31){ document.getElementById('bh').style.display = "none"; document.getElementById('neves').style.display = "none"; document.getElementById('luzia').style.display = "none"; document.getElementById('contagem').style.display = "none"; document.getElementById('betim').style.display = "block"; document.getElementById('lafaiete').style.display = "none"; document.getElementById('lagoas').style.display = "none"; document.getElementById('barbacena').style.display = "none"; document.getElementById('claros').style.display = "none"; document.getElementById('juiz').style.display = "none"; document.getElementById('divinopolis').style.display = "none"; document.getElementById('valadares').style.display = "none"; document.getElementById('timoteo').style.display = "none"; document.getElementById('ipatinga').style.display = "none"; } else if(select.value==32){ document.getElementById('bh').style.display = "none"; document.getElementById('neves').style.display = "none"; document.getElementById('luzia').style.display = "none"; document.getElementById('contagem').style.display = "none"; document.getElementById('betim').style.display = "none"; document.getElementById('lafaiete').style.display = "blok"; document.getElementById('lagoas').style.display = "none"; document.getElementById('barbacena').style.display = "none"; document.getElementById('claros').style.display = "none"; document.getElementById('juiz').style.display = "none"; document.getElementById('divinopolis').style.display = "none"; document.getElementById('valadares').style.display = "none"; document.getElementById('timoteo').style.display = "none"; document.getElementById('ipatinga').style.display = "none"; } else if(select.value==33){ document.getElementById('bh').style.display = "none"; document.getElementById('neves').style.display = "none"; document.getElementById('luzia').style.display = "none"; document.getElementById('contagem').style.display = "none"; document.getElementById('betim').style.display = "none"; document.getElementById('lafaiete').style.display = "none"; document.getElementById('lagoas').style.display = "block"; document.getElementById('barbacena').style.display = "none"; document.getElementById('claros').style.display = "none"; document.getElementById('juiz').style.display = "none"; document.getElementById('divinopolis').style.display = "none"; document.getElementById('valadares').style.display = "none"; document.getElementById('timoteo').style.display = "none"; document.getElementById('ipatinga').style.display = "none"; } else if(select.value==34){ document.getElementById('bh').style.display = "none"; document.getElementById('neves').style.display = "none"; document.getElementById('luzia').style.display = "none"; document.getElementById('contagem').style.display = "none"; document.getElementById('betim').style.display = "none"; document.getElementById('lafaiete').style.display = "none"; document.getElementById('lagoas').style.display = "none"; document.getElementById('barbacena').style.display = "block"; document.getElementById('claros').style.display = "none"; document.getElementById('juiz').style.display = "none"; document.getElementById('divinopolis').style.display = "none"; document.getElementById('valadares').style.display = "none"; document.getElementById('timoteo').style.display = "none"; document.getElementById('ipatinga').style.display = "none"; } else if(select.value==35){ document.getElementById('bh').style.display = "none"; document.getElementById('neves').style.display = "none"; document.getElementById('luzia').style.display = "none"; document.getElementById('contagem').style.display = "none"; document.getElementById('betim').style.display = "none"; document.getElementById('lafaiete').style.display = "none"; document.getElementById('lagoas').style.display = "none"; document.getElementById('barbacena').style.display = "none"; document.getElementById('claros').style.display = "block"; document.getElementById('juiz').style.display = "none"; document.getElementById('divinopolis').style.display = "none"; document.getElementById('valadares').style.display = "none"; document.getElementById('timoteo').style.display = "none"; document.getElementById('ipatinga').style.display = "none"; } else if(select.value==36){ document.getElementById('bh').style.display = "none"; document.getElementById('neves').style.display = "none"; document.getElementById('luzia').style.display = "none"; document.getElementById('contagem').style.display = "none"; document.getElementById('betim').style.display = "none"; document.getElementById('lafaiete').style.display = "none"; document.getElementById('lagoas').style.display = "none"; document.getElementById('barbacena').style.display = "none"; document.getElementById('claros').style.display = "none"; document.getElementById('juiz').style.display = "block"; document.getElementById('divinopolis').style.display = "none"; document.getElementById('valadares').style.display = "none"; document.getElementById('timoteo').style.display = "none"; document.getElementById('ipatinga').style.display = "none"; } else if(select.value==37){ document.getElementById('bh').style.display = "none"; document.getElementById('neves').style.display = "none"; document.getElementById('luzia').style.display = "none"; document.getElementById('contagem').style.display = "none"; document.getElementById('betim').style.display = "none"; document.getElementById('lafaiete').style.display = "none"; document.getElementById('lagoas').style.display = "none"; document.getElementById('barbacena').style.display = "none"; document.getElementById('claros').style.display = "none"; document.getElementById('juiz').style.display = "none"; document.getElementById('divinopolis').style.display = "block"; document.getElementById('valadares').style.display = "none"; document.getElementById('timoteo').style.display = "none"; document.getElementById('ipatinga').style.display = "none"; } else if(select.value==38){ document.getElementById('bh').style.display = "none"; document.getElementById('neves').style.display = "none"; document.getElementById('luzia').style.display = "none"; document.getElementById('contagem').style.display = "none"; document.getElementById('betim').style.display = "none"; document.getElementById('lafaiete').style.display = "none"; document.getElementById('lagoas').style.display = "none"; document.getElementById('barbacena').style.display = "none"; document.getElementById('claros').style.display = "none"; document.getElementById('juiz').style.display = "none"; document.getElementById('divinopolis').style.display = "none"; document.getElementById('valadares').style.display = "block"; document.getElementById('timoteo').style.display = "none"; document.getElementById('ipatinga').style.display = "none"; } else if(select.value==39){ document.getElementById('bh').style.display = "none"; document.getElementById('neves').style.display = "none"; document.getElementById('luzia').style.display = "none"; document.getElementById('contagem').style.display = "none"; document.getElementById('betim').style.display = "none"; document.getElementById('lafaiete').style.display = "none"; document.getElementById('lagoas').style.display = "none"; document.getElementById('barbacena').style.display = "none"; document.getElementById('claros').style.display = "none"; document.getElementById('juiz').style.display = "none"; document.getElementById('divinopolis').style.display = "none"; document.getElementById('valadares').style.display = "none"; document.getElementById('timoteo').style.display = "block"; document.getElementById('ipatinga').style.display = "none"; } else if(select.value==40){ document.getElementById('bh').style.display = "none"; document.getElementById('neves').style.display = "none"; document.getElementById('luzia').style.display = "none"; document.getElementById('contagem').style.display = "none"; document.getElementById('betim').style.display = "none"; document.getElementById('lafaiete').style.display = "none"; document.getElementById('lagoas').style.display = "none"; document.getElementById('barbacena').style.display = "none"; document.getElementById('claros').style.display = "none"; document.getElementById('juiz').style.display = "none"; document.getElementById('divinopolis').style.display = "none"; document.getElementById('valadares').style.display = "none"; document.getElementById('timoteo').style.display = "none"; document.getElementById('ipatinga').style.display = "block"; } else{ document.getElementById('itaperuna').style.display = "none"; document.getElementById('campos').style.display = "none"; document.getElementById('ostras').style.display = "none"; document.getElementById('macae').style.display = "none"; document.getElementById('saquarema').style.display = "none"; document.getElementById('marica').style.display = "none"; document.getElementById('araruama').style.display = "none"; document.getElementById('cabo').style.display = "none"; document.getElementById('bonito').style.display = "none"; document.getElementById('pedro').style.display = "none"; document.getElementById('friburgo').style.display = "none"; document.getElementById('petropolis').style.display = "none"; document.getElementById('teresopolis').style.display = "none"; document.getElementById('velha').style.display = "none"; document.getElementById('vitoria').style.display = "none"; document.getElementById('serra').style.display = "none"; document.getElementById('cariacica').style.display = "none"; document.getElementById('itapemirim').style.display = "none"; document.getElementById('guarapari').style.display = "none"; document.getElementById('mateus').style.display = "none"; document.getElementById('linhares').style.display = "none"; document.getElementById('aracruz').style.display = "none"; document.getElementById('colatina').style.display = "none"; document.getElementById('guacui').style.display = "none"; document.getElementById('bh').style.display = "none"; document.getElementById('neves').style.display = "none"; document.getElementById('luzia').style.display = "none"; document.getElementById('contagem').style.display = "none"; document.getElementById('betim').style.display = "none"; document.getElementById('lafaiete').style.display = "none"; document.getElementById('lagoas').style.display = "none"; document.getElementById('barbacena').style.display = "none"; document.getElementById('claros').style.display = "none"; document.getElementById('juiz').style.display = "none"; document.getElementById('divinopolis').style.display = "none"; document.getElementById('valadares').style.display = "none"; document.getElementById('timoteo').style.display = "none"; document.getElementById('ipatinga').style.display = "none"; } } </script> </div>
  2. Boa tarde galera! Estou tendo um problema esquisito aqui. Sou iniciante e não faço a mínima ideia do que pode ser. Veja só, no campo dropdown abaixo coloquei no "value" o ID, mas ele salva no banco como tipo STRING e não INT. <?php $sql = "SELECT id, sigla FROM local ORDER BY sigla ASC"; $result = $conn->query($sql); ?> . . . <select name="local" class="form-control"> <option selected>Selecione...</option> <?php while($row = $result->fetch_assoc()){ echo "<option value=".$row['id'].">".$row['sigla']."</option>"; } ?> </select> . . . Dei um var_dump() pra saber o que apareceria e ele mostra como STRING. <pre> <?php $sql = "SELECT id, sigla FROM local ORDER BY sigla ASC"; $result = $conn->query($sql); $row = $result->fetch_assoc(); var_dump($row['id']); ?> </pre> Resultado: string(1) "5" Esse é o Banco de dados: Coloquei a coluna ID como INT. -- phpMyAdmin SQL Dump -- version 4.8.3 -- https://www.phpmyadmin.net/ SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Banco de dados: `arq` -- -- -------------------------------------------------------- -- -- Estrutura para tabela `local` -- CREATE TABLE `local` ( `id` int(11) NOT NULL, `SIGLA` mediumtext NOT NULL, `LOCAL` mediumtext NOT NULL, `TELEFONE` mediumtext NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- -- Fazendo dump de dados para tabela `local` -- INSERT INTO `local` (`id`, `SIGLA`, `LOCAL`, `TELEFONE`) VALUES (1, 'AAC', 'AAC', '2222-2222'), (2, 'DSV', 'DSV', '1111-1111'), (3, 'SCA', 'SCA', '3333-3333'); -- -- Índices de tabelas apagadas -- -- -- Índices de tabela `local` -- ALTER TABLE `local` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT de tabelas apagadas -- -- -- AUTO_INCREMENT de tabela `local` -- ALTER TABLE `local` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; Obrigada pessoal!
  3. petrochinski

    Hover -> Dropdown é possível ?

    Eu tive uma ideia muito boa, mas não consegui fazer ainda. A ideia é simples, eu tenho um botão escrito 'Contato', quando passar o mouse gostaria que ele "abrisse" uma div logo abaixo (dropdown), como por exemplo aparecer o telefone somente se passar o mouse. Não achei nenhum tópico com essa ideia... é que gostaria de fazer sem utilizar nav, pois nav é o menu, e a ideia inicial é de fato ser um botão que aparece as informações quando se passa o mouse. Grato :)
  4. Boa noite pessoal, estou com problemas em criar um menu dropdown onde as opções deem um resultado final na própria página. Exemplo: Caixa 1 - Estados Caixa 2 - cidades Resultado em texto abaixo: Lojas daquela cidade e estado e caso não houver nenhuma loja, o resultado seria uma mensagem padrão. é como este: https://www.unimed.coop.br/servicos/segunda-via-de-boletos Porem esse gera um terceiro dropdown e depois uma página externa. Já consegui gerar o banco de dados para que cidade e estados estejam interligados, porem não consigo fazer aparecer o resultado.
  5. Boa tarde pessoal, estou com um problema, o link ancora não funciona no menu Dropdown do Materialize. Porém fora do dropdown funciona beleza. Alguém pode ajudar? <!-- Link sem drop down Funciona --> <a href="#teste">Link Ancora</a> <!-- Dropdown Trigger --> <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a> <!-- Dropdown Structure --> <ul id='dropdown1' class='dropdown-content'> <li><a href="#teste">one</a></li> </ul> <p id="teste">teste</p>
  6. Oi pessoal. Estou criando um menu e estou com certa dificuldade. Nos itens que "vão para baixo" há um espaço em branco na esquerda que não consigo tirar de jeito nenhum, como vocês podem ver na imagem. Meus códigos HTML e CSS estão logo abaixo. Se puderem me ajudar, agradeceria muito :) <body> <div id="banner"> </div> <div id="menu"> <nav> <ul class="menu"> <li><a href="#">Index</a> </li> <li><a href="#">A Série</a> </li> <li><a href="#">Personagens</a> <ul> <li><a href="#">Ted Mosby</a></li> <li><a href="#">Robin Scherbatsky</a></li> <li><a href="#">Barney Stinson</a></li> <li><a href="#">Marshall Eriksen</a></li> <li><a href="#">Lily Aldrin</a></li> </ul> </li> <li><a href="#">Episódios Especiais</a> </li> <li><a href="#">Entre em contato</a> </li> </div> .menu{ list-style:none; } .menu li{ position:relative; float:left; } .menu li a{ color:black; text-decoration:none; padding:10px 85px; display:block; } .menu li a:hover{ background:#4C7EA5; color:#fff; text-shadow:0px 0px 5px #fff; } .menu li ul{ position:absolute; top:100%; left:0; background-color:#fff; display:none; } .menu li:hover ul, .menu li.over ul{ display:block; } .menu li ul li{ display:block; width:100%; }
  7. Alberto Nascimento

    [Resolvido] DropDown List com Links

    Como faço este código abaixo se tornar um DropDown List onde ao selecionar um ITEM seja executado um link? <head> <style type="text/css"> .auto-style1 { text-align: center; } </style> </head> <form method="post"> <div class="auto-style1"> <select name="Sites"> <option>ESCOLHA UM ESTABELECIMENTO AQUI</option> <option value="http://www.bing.com">Bing</option> <option value="http://www.google.com">Google</option> </select></div> </form>
  8. Carlos Web Soluções Web

    CSS Dropdown Menu - Adicionar lista ao lado de um link !

    Olá !! Seguindo as instruções do site 'W3Schools', criei um menu dropdown em javascript, como mostra o link abaixo: http://www.terezanininha.com.br/Exemplo_proprio_4.html Só que eu queria, por exemplo, após clicar no botaõ e mostrar a lista, ao passar o mouse no link 'Link2' por exemplo, aparecesse outra lista no lado direito com mais novas opções de links !! Como fazer isso ?? Noa guardo Desde já, obrigado !
  9. Mauricio Weinert Schroer

    submenu de site muda após rolagem da página

    O menu desse site que estou desenvolvendo está com problemas na rolagem, quando no topo o submenu funciona, descendo ele desconfigura. Segue o site em página teste: weinert.com.br/apag e em anexo prints do que acontece.
  10. rhenan silverio

    Dropdown select em ReactJS

    Bem eu fiz um dropdown criando valores como Maior preço, menor preço etc... porém quando eu seleciono um dos dois ele não volta o valor e não trás o objeto que faz referencia. import React, { PureComponent } from 'react' class Dropdown extends PureComponent { constructor(props) { super(props); this.state = {value: '4'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } render() { const { itens, className} = this.props console.log(itens) //let x = event.target.value; return ( <div className='select'> <select onChange={this.handleChange} value={this.state.value} className={className} > {itens.map((item, i) => <option key={i} value={item.id}>{item.value} </option> )} </select> </div> ) } } Dropdown.defaultProps = { className: 'select__filter' }; export default Dropdown import React, { PureComponent } from 'react' import { Tab } from '../../../../components/Tabs/Tab' import { Tabs } from '../../../../components/Tabs/Tabs' import RestaurantCard from '../../../../components/RestaurantCard/index' import Dropdown from '../Dropdown' const SECTION = [ { name: "Ver Restaurantes" }, { name: "Ver Pratos" } ]; const dropdownItens = [{id: 'DISCOUNT', value: 'Melhores descontos'}, { id: 'BIGGER_PRICE', value: 'Maior Preço'}, {id: 'LOWER_PRICE', value: 'Menor Preço'}, {id: 'EVALUATION', value: 'Melhor Avaliado', selected: 'selected'}, {id: 'LOCATION', value: 'Mais Próximos'}] class FilterTabs extends PureComponent { state = { value: '', id: '' } handleChange = (event) => { this.setState({ value: event.target.value }); //this.setState({value: event.target.id}); } render() { const { restaurants, size} = this.props; return ( <section className="filter__tabs"> <section className="container"> <Tabs> { SECTION.map(section => ( <Tab text={`${section.name} (${size})`} key={section.name}> <section className="filter__tabs--info"> <span className="filter__tabs--info-text"> {`${size} restaurantes encontrados`} </span> <Dropdown onChange={this.handleChange} itens={dropdownItens}/> </section> <div className="row"> { restaurants.map( restaurant => <RestaurantCard key={restaurant.id} extra={true} data={restaurant} /> ) } </div> </Tab> )) } </Tabs> </section> </section> ) } } export default FilterTabs;
  11. Artur Mendonça

    [Resolvido] dropdown menu com dados da tabela

    Olá amigos, tenho um menu com o seguinte código: <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a href="findex.php"><img src="../fimg/folk-01.png" style="width:200px; height:130px; margin-left: 0px; margin-right: 20px; margin-top: 0px; margin-bottom: 0px" alt="logotipo"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsite"> <span class="navbar-toggler-icon"></span> </button> </div> <a href="findex.php"><button class="btn btn-outline-danger btn-lg" type="button">Página Inicial</button></a> <div class="dropdown"> <button class="btn btn-outline-success dropdown-toggle btn-lg" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Ano </button> <div class="dropdown-menu" align="center" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="paginaano.php?ed=2018"><b>2018</b></a> <a class="dropdown-item" href="paginaano.php?ed=2017"><b>2017</b></a> <a class="dropdown-item" href="paginaano.php?ed=2016"><b>2016</b></a> </div> </div> <button class="btn btn-outline-dark btn-lg" type="button">Entrar</button> <button class="btn btn-outline-dark btn-lg" type="button">Entrar</button> </nav> <!-- Fim do menu de navegação --> Mas preciso que o dropdown carregue os dados da tabela MYSQL. A tabela "teste" tem os campos Idano e Ano e os dados a carregar são da coluna ano e queria também limitar aos últimos cinco anos. Então onde está "href=paginaano.php?ed=2018" teria de ficar "href=paginaano.php?ed=#ano_carregado_da_tabela#" e onde está "2018" iria ficar com o #ano_carregado_da_tabela#. Obrigado.
  12. Artur Mendonça

    Alinhar dropdown menu Bootstrap

    Olá amigos, estou desenvolvendo um site com bootstrap para uma associação sem fins lucrativos, mas não estou conseguindo alinhar o dropdown menu, pois quando clico em cima do botão as diversas opções aparecem mais à esquerda do botão; se encostar os outros botões a listagem fica alinhada mas não fica bem esteticamente. Junto uma imagem para melhor esclarecimento. A imagem da esquerda é como fica e a direita é como pretendo que fique mas com os botões separados. Muito obrigado-
  13. Carlos Marcelo Carpes

    Inserir variaveis do menu dropdown no mysql

    Boa noite, estou trancado num ítem de um formulário, alguém pode me ajudar? $sql = ("SELECT * FROM produtos ORDER BY id_produto"); $result = mysqli_query($conn,$sql); $row = mysqli_num_rows($result); while($row = mysqli_fetch_assoc($result)){ echo ("<option value=".$row['id_produto'].",".$row['nome_produto'].",".$row['descricao'].",".$row['tamanho'].",".$row['preco'].",".$row['taxa'].">" .$row['nome_produto']." - ".$row['descricao']." - tamanho ".$row['tamanho']." - R$ ".$row['preco']." - R$ ".$row['taxa']." </option>"); } A consulta e a exibição do menu dropdow estão funcionando perfeitamentes. Não estou conseguindo salvar numa outra as variáveis da linha selecionadda pelo usuário. Alguém pode me ajudar?
  14. Prezados(as) Já pesquisei bastante na rede, mas não obtive êxito. Criei todo um site com banco de dados, para um arquivo geral. Porém faltam-me resolver 2 problemas. 1- Criei um menu dropdown, e preciso que consiga-se navegar pelo menu, usando as setas do teclado. Usei esse script, mas não deu certo: <html> <script type="text/javascript"> var lis = document.getElementsByTagName('li'); for (var i = 0, li; li = lis[i]; i++){ li.onfocus = function(){ var ul = this.getElementsByTagName('ul')[0]; if (ul) ul.style.display = 'block'; } li.onblur = function(){ var ul = this.getElementsByTagName('ul')[0]; if (ul) ul.style.display = ''; } } </script> </html> 2- Sendo esse menu dropdown, não sei se teria como, gostaria que ao passar o mouse e um submenu ele ficasse selecionado sem que sumisse ao tirar o mouse de cima desse submenu. Muito obrigado a todos que poderem ajudar.
  15. MrPhantomRed

    Menu em HTML5 E CSS3

    Preciso de ajuda com o menu que estou fazendo no meu site. Bem, já fiz de tudo pra tentar arrumar esse site, mas não consigo, por isso estou mandando meu código HTML e CSS aqui. HTML5: <!DOCTYPE html> <html lang="pt-br"> <head> <title>RUGBY</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="_css/normalize.css"> <link rel="stylesheet" type="text/css" href="_css/index.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel='stylesheet' type='text/css'> <link rel="shortcut icon" href="_imagens/favicon.ico" type="image/x-icon"> <link rel="icon" href="_imagens/favicon.ico" type="image/x-icon"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body class="center clearfix"> <header> <h1><a href="home.html" title="Logotipo Rugby"><img src="_imagens/Rugby.png"><span></span></a></h1> <!-MENU-!> <nav> <ul class="menu"> <li><a href="#"><img id="icone" src="_imagens/menu2.png"></a> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Entenda o Rugby</a> <ul> <li><a href="#">Guia para iniciantes</a></li> <li><a href="#">Glossário</a></li> <li><a href="#">História do rugby</a></li> </ul> </li> <li><a href="#">Onde jogar</a> <ul> </ul> </li> <li><a href="#">Sobre</a> <ul> <li><a href="#">Contato</a></li> <li><a href="#">Sobre "nós"</a></li> </ul> </li> </ul> </ul> </nav> <!-FIM MENU-!> </header> <section class="welcome"> <h2>RUGBY</h2> <h3><span>TEXTO </span>TEXTO TEXTO <span> TEXTO</span> TEXTO TEXTO TEXTO.</h3> </section> <section class="container"> <div class="brancoex"> <h3>TITULO</h3> <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="estrutura.html" title="Leia mais...">Leia mais...</a></span></p> </div> <div class="fonteex"> <h3>TITULO</h3> <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="fonte.html" title="Leia mais...">Leia mais...</a></span></p> </div> <div class="menuex"> <h3>TITULO</h3> <p>TEXTOTEXTOTEXTOTEXTOTEXTOTEXTOTEXTO<span class="btn"><a href="menu.html" title="Leia mais...">Leia mais...</a></span></p> </div> </section> <footer> <small class="copyright"> <p>&copy 17087</p> </small> </footer> </body> </html> CSS3: body{ background:#282828; color:#dadada; font-family: "Open Sans", Helvetica, sans-serif, arial; font-size: 1.125em; font-weight: 300; line-height: 22px; text-align: left; text-shadow:1px 1px 0px #4c4c4c; } .center{ margin: 0 auto; max-width:1200px; width: 90%; } .clearfix:before, .clearfix:after { content: &quot; &quot;; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /*fim do clearfix*/ img, picture, video, embed { max-width: 100%; } h1, h2{ color:#666666; font-size: 60px; font-weight: 800; letter-spacing: -3px; line-height: 60px; } h3{ font-size: 32px; font-weight: 300; letter-spacing: -2px; line-height: 38px; } p{ font-weight: 300; letter-spacing: -1px; } a, a:link, a:visited{ color:#a56256; font-weight:400; text-decoration:none; } a:hover{ color:#FE5E41; text-decoration:underline; text-shadow:none; } header{ border-bottom: 1px solid #E0E0E0; height:150px; width:100%; } /* Logotipo */ header h1 a{ display:block; float:left; height:120px; text-indent:-9999; width:35%; margin-top:-20px; margin-left:-100px; } /*nav - menu de navegação*/ nav{ float:right; margin-top:78px; text-align:right; width:41.6666666666667%; } /*SEÇÃO WELCOME*/ .welcome{ height:290px; text-align:center; width:100%; } h2 span{ font-size:1em; font-weight:300px; letter-spacing:-0.0333333333em; line-height:1em; } .welcome h3{ margin:0 auto; width:75%; } /* CONTAINER - CONTEUDO COM 3 COLUNAS */ .container{ background-color:#160d0b; height: 417px; padding:2.5%; width:95%; } .brancoex, .fonteex, .menuex{ float:left; position:relative; text-align:center; width:31.57894736842105%; } .brancoex, .fonteex{ margin-right: 2.631578947368421%; } .menuex{ background-color:#1a1a1a; margin-right:0px; } .brancoex{ background-color:#1a1a1a; } .fonteex{ background-color:#1a1a1a; } /*imagens*/ #brancoex img, #fonteex img, #menuex img{ margin: 10px auto -15px auto; text-align:center; img { max-width:100% } } /*formatação do texto*/ .container h3{ color:white; font-size: 1.77777777778em; font-weight: 300; letter-spacing: -0.0625em; margin-bottom: 30px; text-shadow:none; } .container p{ background-color:#434343; float:left; height:160px; padding: 1.9444444444444445%; position:absolute; width-max:100%; text-align:justify; top:225px; } /*formatação do botão*/ span.btn{ font-size:1.1111111111em; font-weight: 400; letter-spacing:-0.1em; height:27px; margin-top: 30px; position:absolute; right: 1px; text-align:center; text-shadow:none; width:33.33333333333333%; } span.btn a{ color:#1a1a1a; padding: 2px 3.333333333333333%; } .brancoex span.btn a{ background-color:#868686; } .fonteex span.btn a{ background-color:#868686; } .menuex span.btn a{ background-color:#868686; } /*Seção FOOTER - Rodape com 2 colunas*/ footer{ clear:both; height: 50px; padding: 10px 0; width:100%; } .copyright{ float:left; margin-left:2.5%; } .desenvolvedor{ float:right; } .desenvolvedor figure{ width:100%; } #menuu{ border:none; margin-left:-32.9%; width:100%; height:100%; overflow:hidden; margin } /*MENU*/ /*esse aqui oculta as marcações da lista*/ .menu{ list-style:none; float:left; } /*esse faz ficar na horizontal*/ .menu li{ position:relative; float:left; } /*esse aqui muda a cor dos links e tira o efeito de link no menu não suspenso*/ .menu li a{ color:black; text-decoration:none; display:block; } #icone{ width:17%; height:17%; } Imagem do menu em anexo. Podem editar o layout do menu como quiserem, apenas me ajudem a deixar coerente isso tudo. Há páginas em cima de outras. t.t
  16. To fazendo um filtro de busca num menu vertical e quero quando clicar abrir um input search para eu digitar alguma coisa. Acontece que quando eu clico ele abre beleza, mas ao colocar o cursor do mouse dentro da input, ele fecha o menu. Alguém poderia me ajudar? Segue o código: HTML <nav class="navbar navbar-default sidebar" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Busca</a> </div> <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Qualquer Coisa <span class="caret"></span> </a> <ul class="dropdown-menu s11"> <li style="padding: 0 10px;"> <input type="search" class="form-control sh" placeholder="digite qualquer coisa" data-search="s11"> </li> </ul> </li> </ul> </div> </div> </nav> CSS <style> nav.sidebar, .main{ -webkit-transition: margin 200ms ease-out; -moz-transition: margin 200ms ease-out; -o-transition: margin 200ms ease-out; transition: margin 200ms ease-out; } .main{ padding: 10px 10px 0 10px; } @media (min-width: 765px) { .main{ position: absolute; width: calc(100% - 40px); margin-left: 40px; float: right; } nav.sidebar:hover + .main{ margin-left: 200px; } nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0px; } nav.sidebar .navbar-brand, nav.sidebar .navbar-header{ text-align: center; width: 100%; margin-left: 0px; } nav.sidebar a{ padding-right: 13px; } nav.sidebar .navbar-nav > li:first-child{ border-top: 1px #e5e5e5 solid; } nav.sidebar .navbar-nav > li{ border-bottom: 1px #e5e5e5 solid; } nav.sidebar .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{ padding: 0 0px 0 0px; } .navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color: #777; } nav.sidebar{ width: 200px; height: 100%; margin-left: -160px; float: left; margin-bottom: 0px; } nav.sidebar li { width: 100%; } nav.sidebar:hover{ margin-left: 0px; } .forAnimate{ opacity: 0; } } @media (min-width: 1330px) { .main{ width: calc(100% - 200px); margin-left: 200px; } nav.sidebar{ margin-left: 0px; float: left; } nav.sidebar .forAnimate{ opacity: 1; } } nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus { color: #CCC; background-color: transparent; } nav:hover .forAnimate{ opacity: 1; } section{ padding-left: 15px; } ::-webkit-input-placeholder { color:#29416b!important; } input:-moz-placeholder { color:#29416b!important; } </style> Javascript <script type="text/javascript"> $('input.sh').on('keyup', function(){ var elementFilter = $(this).data('search'); var dataFilter = $(this); var valorBusca = dataFilter.val(); var contaLetras = valorBusca.length; if (contaLetras >= 1) { filterData(valorBusca, elementFilter); } else { $('.'+elementFilter+' li a').parent().show(); $('.'+elementFilter+' .divider').show(); } function filterData(data, elementFilter) { $('.'+elementFilter+' li a').each(function(iIndex, sElement) { $(sElement).parent().hide(); $('.'+elementFilter+' .divider').eq(iIndex).hide(); if (sElement.innerHTML.indexOf(data) !== -1) { var obj = $(sElement).parent(); obj.prev().show(); obj.next().show(); obj.show(); } }); } function retiraAcentos(palavra) { var com_acento = 'áàãâäéèêëíìîïóòõôöúùûüçÁÀÃÂÄÉÈÊËÍÌÎÏÓÒÕÖÔÚÙÛÜÇ'; var sem_acento = 'aaaaaeeeeiiiiooooouuuucAAAAAEEEEIIIIOOOOOUUUUC'; var nova=''; for(i=0;i<palavra.length;i++) { if (com_acento.search(palavra.substr(i,1))>=0) { nova+=sem_acento.substr(com_acento.search(palavra.substr(i,1)),1); } else { nova+=palavra.substr(i,1); } } return $.trim(nova).toLowerCase(); } }); </script>
  17. Boa tarde, estou fazendo um site pro meu TCC do curso técnico da Etec e meu tema foi refazer o site da escola. Comecei a fazê-lo com base no conceito "mobile-first" e tudo a princípio corria bem. Fiz o menu e fui ajustando ele já para as demais resoluções para ver se estava ok. Quando fui fazer os ajustes para telas acima de 1280px e tirar o menu do formato mobile o mesmo começou a apresentar erro: quando passo o mouse pelo item do menu que deveria mostrar as opções abaixo ele parece que compacta todos os itens na mesma linha do menu principal, deu pra perceber que é como se estivesse algo bloqueando o dropdown nas dimensões do menu (foi o que eu entendi). .Estou anexando a INDEX e o CSS para quem puder analisar. Desde já, agradeço. index.html styles.css
  18. Carlos Vinícios Freitas

    Segunda linha do "Dropdown menu" do Plone escondido

    Estou com um problema no dropdown menu de um site em Plone, de uma instituição pública, e já tentei resolver e não consigo. :( Quando aumento o tamanho da página, a partir da segunda linha, o menu desaparece. Me ajudem!! Página: http://ufrgs.br/incluir Códigos do dropdownmenu: #portal-globalnav { position:relative; z-index:3; } * html #portal-globalnav { height:1%; } #portal-globalnav:after { content:""; clear:both; display:block; visibility:hidden; } #portal-globalnav li { float:left; margin:0; padding-top: 0px !important; } #portal-globalnav li a { display:block; position:relative; padding-top: 0px !important; padding-bottom: 0px !important; z-index:3; } #portal-globalnav li a:hover, #portal-globalnav li.selected { padding-top: 0px !important; padding-bottom: 0px !important; } /* ** SUBMENU STYLES */ ul.submenu { position: absolute; width: 15em; left:-999em; background: #fff; border-width: 1px; border-style: none solid solid solid; margin:0; } #portal-globalnav li.selected ul.submenu { margin-top:-1px; z-index:3; } #portal-globalnav ul.submenu li { display:block; width:100%; } #portal-globalnav ul.submenu a, #portal-globalnav ul.submenu a:hover { margin:0; display:block; border-style: solid none none; position:static !important; white-space:normal; } #portal-globalnav li.selected ul.submenu a:hover { background-color:#fff; } a.hasDropDown { background-position:14em 50%; background-repeat:no-repeat; } /* Below we have the same style defined differently ** These are for IE7 and IE6 respectively. There is no ** possibility to put styles for IE6 and IE7 in the same ** definition. So we have 2 separate definitions */ *:first-child+html #portal-globalnav ul.submenu a {height:1%;} /* IE7 fix. */ * html #portal-globalnav ul.submenu a {height:1%;} /* we all love IE6 ;) */ /* side-dropdown menu styles */ #portal-globalnav li ul ul { z-index:10; top:0.4em; left:-999em; left:0; margin: 0 0 0 14em; } #portal-globalnav ul li:hover, #portal-globalnav ul li.sfhover { position:relative; } #portal-globalnav li:hover ul ul, #portal-globalnav li:hover ul ul ul, #portal-globalnav li:hover ul ul ul ul, #portal-globalnav li.sfhover ul ul, #portal-globalnav li.sfhover ul ul ul, #portal-globalnav li.sfhover ul ul ul ul { left:-999em; } #portal-globalnav li:hover ul, #portal-globalnav li li:hover ul, #portal-globalnav li li li:hover ul, #portal-globalnav li li li li:hover ul, #portal-globalnav li.sfhover ul, #portal-globalnav li li.sfhover ul, #portal-globalnav li li li.sfhover ul, #portal-globalnav li li li li.sfhover ul { left:auto; } /* clearing global navigation styles */ #post-sections-clear { height:1px; margin-bottom:-3px; } /* See above for explanation of the below mess styles */ *:first-child+html #post-sections-clear {margin-bottom:-2px;} * html #post-sections-clear { margin-bottom:-2px; } a:focus, a:hover { border: 2px solid #F00; } Obrigado! :)
  19. skilledpt

    Elaborar barra com dropdown

    Boa noite, depois de várias tentativas falhadas a elaborar uma barra com dropdown para o meu forum, peço que alguém me ajude. Queria fazer algo deste género: E quando se clica-se no +: Obs: Exemplo feito no photoshop. Conteudo da caixa do dropwdown: Como está agora: Versao do forum: PunBB Agradeçia uma ajuda, Cumps
  20. Gente é o seguinte, estou no ensino medio, e preciso MUITO de ajuda, tive uma ideia para a produção do meu site na escola, porém minha ideia não ta dando certo. É meio complicado mas vamos la! O site vai ser bem diferente dos sites dos outros alunos da sala, meu logo vai ser no meio do site, e essa é minha ideia: Quando passa o mouse na parte direita do logo, uma coluna aparecerá do lado do logo e terá informações sobre o Hinduismo (tema dado pelo professor) e quando se passar o mouse pelo lado esquerdo, terá informações sobre o Deus Brahma. Não sei o que eu faço. *Esse redondo é um circulo opaco atrás do logo ME AJUDA! Tenho esse HTML: <div class="logo"> <img src="florlotus.png" id="center" width="96" height="120" ></div> <div class="redondo"> <img src="redondo.png" width="120" height="120" /> </div> <div class="dropdown" style="float:right; margin-right:45%"> <button class="dropbtn">Hindu</button> <div class="dropdown-content" style="left:0;"> <a href="#">Hinduismo</a> </div> </div> <div class="dropdown" style="float:left; margin-left:46%"> <button class="dropbtn">Brahma</button> <div class="dropdown-content"> <a href="#">O brahma</a> </div> </div> Mais esse CSS: .dropbtn { margin-top: 500; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; right: 0; background-color: #FFF; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; font-family:"Courier New", Courier, monospace; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: ; } .logo { width:160px; height:160px; position:absolute; top:50%; left:50%; margin-top:-50px; ; z-index: 2; } .redondo { width:150px; height:150px; position:absolute; top:50%; left:50%; margin-top:-50px; ; z-index: 1; }
  21. Bom dia, estou precisando de uma ajuda, se uma pessoa selecionar um curso da listagem que dropdown, gostaria que puxa-se toda informação referente aquele curso em gráficos. Tenho a tela do gráfico pronto e a tela do dropdown, só não estou conseguindo puxar esses dados. Minha conexão está correta. arquivo dropdown: <center><div class="btn-group"> <button type="button" class="btn btn-default">Menu Dropdown</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <?php $consulta = mysql_query(" select distinct c.id_curso, c.desc_curso from tb_curso c left join tb_avaliacao a on c.id_curso = a.cod_curso"); while ($ln = mysql_fetch_array($consulta)) { echo '<li><a href="graficos/graficos.php">'.$ln['desc_curso'].'</a></li>'; } ?> </ul> </div></center> arquivo graficos: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="../css/bootstrap.css" rel="stylesheet"> </head> <?php session_start(); error_reporting(0); include('../conexao.php'); mysql_query("SET character_set_results = 'utf8', character_set_client = 'utf8', character_set_connection = 'utf8', character_set_database = 'utf8', character_set_server = 'utf8'", $conexao); $sql = "select r.questao1, r.questao2, r.questao3, r.questao4, r.questao5, r.questao6 from tb_avaliacao a join tb_resultado r on a.id_avaliacao = r.id_avaliacao where a.cod_curso = "; $cor = array(); $cor[0] = '#FF4500'; $cor[1] = '#FFA500'; $cor[2] = '#FFD700'; $cor[3] = '#90EE90'; $cor[4] = '#228B22'; $qtdQuestoes = 6; include('painelgraficos.php'); ?> <script type="text/javascript" src="../js/loader.js"></script> <script type="text/javascript" src="../js/jsapi.js"></script> <script type="text/javascript" > google.charts.load("current", {packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { <?php // Cálculo e preenchimento dos gráficos de avaliação por questão (gráficos de colunas) for ($j = 1; $j < $qtdQuestoes+1 ; $j++){ include('chartcalc.questao.php'); include('chart.questao.js.php'); } // Cálculo e preenchimento do gráfico total (gráfico de pizza) for ($j = 1; $j < $qtdQuestoes+1 ; $j++){ include('chartcalc.total.php'); include('chart.total.js.php'); } ?> } </script> </html>
  22. Insanity

    Dropdown abrindo com click

    Hey pessoal, como vai? Então, estou tentando desapegar do bootstrap nesse projeto que estou fazendo (para melhorar minhas práticas front-end e também pq eu já fiz grande parte dos estilos do site, se eu implementasse bootstrap estragaria tudo). Estou querendo criar um dropdown que funciona com o click, da mesma forma do bootstrap, que dá pra usar em qualquer caso, e na maioria, na realidade, em todos, é muito básico. Eu encontrei esse: http://www.w3schools.com/howto/howto_js_dropdown.asp, eu até implementei para dar para usar em qualquer caso (em várias partes do site, não só no menu), mas o problema é que quando se ativa dois, os dois ficam ativos, e a ideia é só um ser ativo por vez. Os outros tutoriais só servem para menu em um único caso. Eu tava pensando se seria possível pegar apenas "partes" do bootstrap, já que eu não usaria tudo e só pesaria o carregamento do site. Enfim, algum mestre em front-end que poderia ajudar? Se ainda ficou em dúvida, é algo como a barra que tem as notificações, e mensagens no facebook, é esse comportamento... Agradeço desde já!
  23. Oi, estou estudando o livro "Foundation Game Design with HTML 5 and Javascript". Lá aprendi a chamar uma função, então resolvi dar uma experimentada usando o código para fazer algo que tinha em mente. Fiz uma lista dropdown e um contador para mostrar quantas vezes a pessoa ja clicou. Funcionou, quando clico chamo a função, mas a função não continua depois que eu solto o botão, o contador volta a 0 e a lista desaparece. Meu objetivo era que a lista so desaparecesse quando eu clicasse novamente, e ao invés de voltar a 0, continuasse contando.... 1, 2, 3... JAVASCRIPT var aparece = document.querySelector("#aparece"); var lista = document.querySelector("#lista"); var escreve = document.querySelector("#escreve"); var score = 0; var resultado = 0; //açao aparecer menu && contador aparece.addEventListener("mousedown", dropdown, false); escreve.innerHTML = score; function dropdown(){ lista.style.display = "block"; score++; escreve.innerHTML = score; } HTML <a href="" id="aparece">aparece fi d'apentia</a> <p id="escreve"></p> <ul id="lista"> <li>Lista um</li> <li>lista dois</li> <li>acabou-se</li> </ul> CSS a#aparece{ text-decoration: none; color:black; } #lista{ display:none; }
  24. Olá, gostaria de saber porque esse programa não está retornando o valor correto marcado nos radiobutton e no dropdown. http://www.utilizaweb.com.br/aposentadoria/ Poderiam me ajudar ?
  25. stingger

    Menu Dropdown Jquery

    Boa noite, estou com um pequeno problema, estou criando um menu na horizontal, com dropdown ao clicar. Quando eu clico em uma opção, o dropdown abre normal, quando clico na outra, abre normal também, porém o dropdown anterior aberto não fecha. Alguma ideia de como fechar ao clicar na outra opção? Não sou muito bom em programação, tanto que no exemplo fiz um comando jquery para cada opção do menu. OBS: Se clicar fora, em qualquer área os dropdowns abertos fecham. html: <section class="main"> <div class="wrapper-demo"> <div id="dd" class="wrapper-dropdown-5" tabindex="1">John Doe <ul class="dropdown"> <li><a href="#"><i class="icon-user"></i>Profile</a></li> <li><a href="#"><i class="icon-cog"></i>Settings</a></li> <li><a href="#"><i class="icon-remove"></i>Log out</a></li> </ul> </div> ​</div> </section> </br></br></br></br></br></br> <section class="main"> <div class="wrapper-demo"> <div id="dd" class="wrapper-dropdown-5" tabindex="1">John Doe <ul class="dropdown"> <li><a href="#"><i class="icon-user"></i>Profile</a></li> <li><a href="#"><i class="icon-cog"></i>Settings</a></li> <li><a href="#"><i class="icon-remove"></i>Log out</a></li> </ul> </div> ​</div> </section> css: .wrapper-dropdown-5 { /* Size & position */ position: relative; width: 200px; margin: 0 auto; padding: 12px 15px; /* Styles */ background: #fff; border-radius: 5px; box-shadow: 0 1px 0 rgba(0,0,0,0.2); cursor: pointer; outline: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .wrapper-dropdown-5:after { /* Little arrow */ content: ""; width: 0; height: 0; position: absolute; top: 50%; right: 15px; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #4cbeff transparent; } .wrapper-dropdown-5 .dropdown { /* Size & position */ position: absolute; top: 100%; left: 0; right: 0; /* Styles */ background: #fff; border-radius: 0 0 5px 5px; border: 1px solid rgba(0,0,0,0.2); border-top: none; border-bottom: none; list-style: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; /* Hiding */ max-height: 0; overflow: hidden; } .wrapper-dropdown-5 .dropdown li { padding: 0 10px ; } .wrapper-dropdown-5 .dropdown li a { display: block; text-decoration: none; color: #333; padding: 10px 0; transition: all 0.3s ease-out; border-bottom: 1px solid #e6e8ea; } .wrapper-dropdown-5 .dropdown li:last-of-type a { border: none; } .wrapper-dropdown-5 .dropdown li i { margin-right: 5px; color: inherit; vertical-align: middle; } /* Hover state */ .wrapper-dropdown-5 .dropdown li:hover a { color: #57a9d9; } /* Active state */ .wrapper-dropdown-5.active { border-radius: 5px 5px 0 0; background: #4cbeff; box-shadow: none; border-bottom: none; color: white; } .wrapper-dropdown-5.active:after { border-color: #82d1ff transparent; } .wrapper-dropdown-5.active .dropdown { border-bottom: 1px solid rgba(0,0,0,0.2); max-height: 400px; } /* No CSS3 support: none */ jquery: function DropDown(el) { this.dd = el; this.initEvents(); } DropDown.prototype = { initEvents : function() { var obj = this; obj.dd.on('click', function(event){ $(this).toggleClass('active'); event.stopPropagation(); }); } } $(function() { var dd = new DropDown( $('#dd') ); $(document).click(function() { // all dropdowns $('.wrapper-dropdown-5').removeClass('active'); }); });
×

Important Information

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