guitarro17 Postado Dezembro 1, 2009 Denunciar Share Postado Dezembro 1, 2009 (editado) Bom, eu fiz esse menu em accordion de acordo com uns tutoriais por ai, mas eu estou com um problema que eu acho melhor voces verem pra ententer.Sei que devo ter feito coisa errada, mas não manjo muito de CSS e queria a ajuda de vocês pra tentar resolver isso.Valeu!Codigo:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Simple Javascript Accordions - by www.dezinerfolio.com</title> <style type="text/css"> * { margin:0; padding:0; list-style:none; } body { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; overflow-x:hidden; } #basic-accordian{ width:100%; position:relative; margin-top:-10px; text-align:center; } .accordion_headings{ color:#FFFFFF; border:1px solid #18333A; cursor:pointer; width:100% -1px; height:35px; text-align:center; } .accordion_headings:hover{ background:#00CCFF; } .empresa{ background:#6CA8B5; } .abraSuaConta{ background:#3090A6; } .assessoria{ background:#148CA8; } .produtos{ background:#076980; } .cursos{ background:#6CA8B5; } .educacional{ background:#3090A6; } .negociacao{ background:#148CA8; } .contato{ background:#076980; } .menu_interno{ padding:5px; color:#FFFFFF; border:1px solid #18333A; cursor:pointer; font-size:11px; color:#FFF; width:30%; height:16px; text-align:right; } .div_interno{ color:#FFFFFF; width:30%; text-align:justify; float:right; margin-right:37%; } .menu_interno_escuro{ background-color:#076980; } .menu_interno_claro{ background-color:#148CA8; } .menu_interno:hover{ background:#00CCFF; } </style> <script src="jquery-1.2.1.min.js" type="text/javascript"></script> <script src="menu-collapsed.js" type="text/javascript"></script> <script type="text/javascript"> function centraliza(){ var wTela = screen.width; var wPic = 1847; if(wPic > wTela){ var wDif = wPic - wTela; window.scrollTo(wDif/2,0); } } </script> </head> <body onload="centraliza();"> <center> <table height="100%" width="100%"> <tr> <td ><img src="cabecalho.jpg" /></td> </tr> <tr> <td> <div id="basic-accordian"> <ul id="menu"> <li class="empresa"> <div class="accordion_headings" >Empresa</div> <ul style="height:auto"> <li id='empresa_apresentacao' class="div_interno" style="display:none;" > texto texto texto texto texto texto texto texto texto texto texto texto <br /> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto <br /> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto <br /> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto <br /> texto texto texto texto texto texto texto texto texto texto texto texto <br /><br /></li> <li class="menu_interno menu_interno_claro" onclick="document.getElementById('empresa_apresentacao').style.display='block'">Apresentação</li> <li class="menu_interno menu_interno_escuro" >Diferencial</li> <li class="menu_interno menu_interno_claro">Visão, Missão e Valores</li> <li class="menu_interno menu_interno_escuro">Parcerias</li> </ul> </li> <li class="abraSuaConta"> <div class="accordion_headings">Abra sua conta</div> <ul> <li class="menu_interno menu_interno_claro" >Pessoa física</li> <li class="menu_interno menu_interno_escuro" >Pessoa jurídica</li> </ul> </li> <li class="assessoria"> <div class="accordion_headings">Assessoria</div> <ul> <li class="menu_interno menu_interno_claro" >Como funciona</li> <li class="menu_interno menu_interno_escuro" >Home Broker</li> <li class="menu_interno menu_interno_claro" >Mesa de operações</li> <li class="menu_interno menu_interno_escuro" >Apuração de IR</li> </ul> </li> <li class="produtos"> <div class="accordion_headings">Produtos</div> <ul> <li class="menu_interno menu_interno_claro" >Mercados de Ações</li> <li class="menu_interno menu_interno_escuro" >Mercado de Opções</li> <li class="menu_interno menu_interno_claro" >Mercado a Termo</li> <li class="menu_interno menu_interno_escuro" >Aluguel de ações</li> <li class="menu_interno menu_interno_claro" >BM&F</li> <li class="menu_interno menu_interno_escuro" >Clubes de Investimento</li> <li class="menu_interno menu_interno_claro" >Títulos Públicos</li> <li class="menu_interno menu_interno_escuro" >Câmbio</li> <li class="menu_interno menu_interno_claro" >Conta Margem</li> <li class="menu_interno menu_interno_escuro" >Ofertas Públicas (IPO)</li> <li class="menu_interno menu_interno_claro" >Seguros</li> </ul> </li> <li class="cursos"> <div class="accordion_headings">Cursos e Palestras</div> <ul> <li class="menu_interno menu_interno_claro" >Cursos</li> <li class="menu_interno menu_interno_escuro" >Monte um curso na sua cidade</li> <li class="menu_interno menu_interno_claro" >Turmas particulares</li> <li class="menu_interno menu_interno_escuro" >Agenda</li> </ul> </li> <li class="educacional"> <div class="accordion_headings">Educacional</div> <ul> <li class="menu_interno menu_interno_claro" >Perfil do Investidor</li> <li class="menu_interno menu_interno_escuro" >Glossário</li> <li class="menu_interno menu_interno_claro" >Ações</li> <li class="menu_interno menu_interno_escuro" >Opções</li> <li class="menu_interno menu_interno_claro" >Termo</li> <li class="menu_interno menu_interno_escuro" >Tributação</li> <li class="menu_interno menu_interno_claro" >Oferta pública de ações</li> <li class="menu_interno menu_interno_escuro" >Aluguel de ações</li> <li class="menu_interno menu_interno_claro" >BM&F </li> <li class="menu_interno menu_interno_escuro" >Tesouro direto</li> <li class="menu_interno menu_interno_claro" >Dúvidas Frequentes</li> <li class="menu_interno menu_interno_escuro" >Regulamentos e normas</li> <li class="menu_interno menu_interno_claro" >Biblioteca</li> </ul> </li> <li class="negociacao"> <div class="accordion_headings">Negociação Eletrônica</div> <ul> <li class="menu_interno menu_interno_claro" >Home Broker</li> <li class="menu_interno menu_interno_escuro" >Plataforma</li> <li class="menu_interno menu_interno_claro" >TOVmóbile</li> </ul> </li> <li class="contato"> <div class="accordion_headings">Contato</div> <ul> <li class="menu_interno menu_interno_claro" >Fale Conosco</li> <li class="menu_interno menu_interno_escuro" >Horários de Atendimento</li> <li class="menu_interno menu_interno_claro" >Trabalhe Conosco</li> </ul> </li> </ul> </div> </td> </tr> <tr> <td ><img src="rodape.jpg" style="margin-top:-2px"/></td> </tr> </table> </center> </body> <script> function mudaCor(cor){ alert(cor); document.getElementById('basic-accordian').style.backgroundColor = cor; } </script> </html> Editado Dezembro 2, 2009 por guitarro17 Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
guitarro17
Bom, eu fiz esse menu em accordion de acordo com uns tutoriais por ai, mas eu estou com um problema que eu acho melhor voces verem pra ententer.
Sei que devo ter feito coisa errada, mas não manjo muito de CSS e queria a ajuda de vocês pra tentar resolver isso.
Valeu!
Codigo:
Editado por guitarro17Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.