Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

thiagohumble

Expandir e recolher com [+] e [-]

Por , em Javascript

Recommended Posts

thiagohumble    0

thiagohumble
Postado

Olá pessoal, não sei bem se é feito em js, espero que alguém possa me ajudar nesse meu tcc. Estou fazendo um menu lateral em html/css porém preciso incluir o [+] e [-] alguém pode me ajudar?

vou fazer esse [+] e [-] com imagens.

segue o que foi feito:

 

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Documento sem título</title>
        <link href="css/reset.css" rel="stylesheet" type="text/css" />
        <link href="css/estilos.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
            <div style="box-shadow: 0 1px 0 1px #CCC;" class="geral"> <!-- div geral -->
            
                
               <div class="topo">
                   <h1>Galvão</h1>
                    <ul>
                       <li><a href="#" title="">Home</a></li>
                       <li><a href="#" title="">Email</a></li>
                       <li><a href="#" title="">Antispam</a></li>
                       <li><a href="#" title="">Sistemas</a></li>
                       <li><a href="#" title="">Help Desk</a></li>
                       <li><a href="#" title="">Lista de Ramais</a></li>                                                
                    </ul>
            <div class="topo_1">
                    <ul>
                       <li><a href="#" title=""> Meu Perfil </a></li>
                        <li><a href="#" title=""> Desbloqueio de Senha</a></li>
                        <li><a href="#" title=""> Fale com o presidente</a></li>
                    </ul>
                </div>                </div>
                <div class="menu_lateral">
               <ul id="nav">
                       <li class="n_grupo"><a href="#"> Nosso Grupo </a>
                        <ul>
                               <li><a href="#"> Nossa História </a> </li>
                                <li><a href="#"> Organograma</a></li>
                                <li><a href="#"> Código de Ética</a></li>
                                <li><a href="#"> Certificações</a></li>
                                <li><a href="#"> Onde Atuamos</a></li>                                
                            </ul>
                  </li>

                  <li><a href="#">Área de Apoio</a>
                           <ul>
                           
                               <li><a href="#"> Sub-menu1 área apoio</a></li>
                                <li><a href="#"> Sub-menu2 área apoio</a></li>
                                <li><a href="#"> Sub-menu3 área apoio</a></li>
                                <li><a href="#"> Sub-menu4 área apoio</a></li>
                                <li><a href="#"> Sub-menu5 área apoio</a></li>                                
                            </ul>
                        </li>
                        <li><a href="#">Empresas do Grupo</a>
                           <ul>
                               <li><a href="#"> Sub-menu1 Emp Grupo</a></li>
                                <li><a href="#"> Sub-menu2 Emp Grupo</a></li>
                                <li><a href="#"> Sub-menu3 Emp Grupo</a></li>
                                <li><a href="#"> Sub-menu4 Emp Grupo</a></li>
                                <li><a href="#"> Sub-menu5 Emp Grupo</a></li>                                
                            </ul>
                        </li>
                        <li><a href="#">Nossos Programas</a>
                           <ul>
                               <li><a href="#"> Sub-menu1 </a></li>
                                <li><a href="#"> Sub-menu2 </a></li>
                                <li><a href="#"> Sub-menu3 </a></li>
                                <li><a href="#"> Sub-menu4 </a></li>
                                <li><a href="#"> Sub-menu5 </a></li>                                
                            </ul>
                        </li>
                         
                                  
                </div>
                <div class="rodape">
                   rodape
                </div>
         </div><!-- fim div geral -->
    
   </body>
</html>
/* Padrao */
body {
   background:#f4f4f4;
   font-size:12px;
   font-family:Arial;      
   }

/* Estrutura*/
.geral {
   width:962px;
   height:800px;
   border-top:1px solid #000; 
   margin:0px auto 0; 
   background:#fff;
   style="box-shadow:3px 3px 3px #ccc;" 


}
/* Topo */
.topo {
   border-botton:1px solid #c0c0c0;
   padding:0 0 50px 0;
}


h1 {
   background:url(../IMG/galvao.png) no-repeat;
   width:203px;
   height:79px;
   text-indent:-999px;
}
.topo ul { float:right; margin:-60px 0 0 0;}
.topo ul li { display:inline; padding:0 0 0 20px; text-transform: uppercase;}
.topo ul li a {font-weight:bold; text-decoration:none; color:#d5e250;}
.topo ul li a:hover { text-decoration:overline;}   
.topo_1 ul {float:left; margin:-72px 0px 0 -30px; }
.topo_1 ul li { display:inline; padding:0 0px 30px 41px; text-transform: uppercase; }
.topo_1 ul li a {font-weight:bold; text-decoration:none; color:#d5e250;}
.topo_1 ul li a:hover { text-decoration:overline;}   

/*menu lateral*/
/*a{background:#999; display:block; width:200px; margin:5px; border-bottom:#000;}*/


#nav {margin: 0; padding: 0; float:left;}
#nav li {list-style:none; background:url(../IMG/bg_menu_lateral.png); width:189px;  border-bottom:1px solid #ccc;}
#nav li a {display:block; padding:8px; text-decoration:none; box-shadow: 2px 2px 5px #ccc; color:#fff; font:Verdana, Geneva, sans-serif; font-size:14px;}
#nav li ul {display:block;}
#nav li ul { display: none; }
#nav li:hover ul {display:block }
#nav li:hover ul li{background:url(../IMG/bg_sub_menu_lateral2.png); }
#nav li:hover ul li a {color:#555656; }
#nav li:hover ul li a:hover { background:#E8E8E8; border-right: 4px solid #afc838;}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eduardo Giullyanny    1

Eduardo Giullyanny
Postado

eu certamente indico o uso do js, pois ai você conseguiria uma animação. Seria ainda melhor usar jquery. Pelo sim e pelo não, sempre tem codigos demais na net. Mas o bom seria você ver um, e este aqui tá de boa.:

 

http://www.dynamicdrive.com/dynamicindex1/switchmenu2.htm.

 

tem mais no site deste link

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito