Bem vindo ao brockdev.com, não seja tímido compartilhe suas duvidas e conhecimento. :D

Expandir e recolher com [+] e [-]

thiagohumble Usuário
editado November 2013 em JAVASCRIPT
Olá pessoal, 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_________________________________________________________________________
<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>



CSS_______________________________________________________________________________
/* 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;}

Comentários

  • Jonatan Machado Moderador Global, Administrador
    Olá thiagohumble
    Voce pode utilizar para manipular class a funçao jquery .toggleClass
    http://tableless.com.br/manipulacao-de- ... om-jquery/
    Arsenal Web Design.com
    Desenvolvimento de Lojas Virtuais
    Magento | Zend Framework | HTML5 | CSS3 | Blogs
    image
    E-mail: contato@brockdev.com
  • thiagothomaz Moderador Global
    Modifiquei seu código.

    Criei 2 classes no css que carregam as imagens do "+" e "-".

    .add{background:url("img_add.png");}
    .remove{background:url("img_remove.png");}

    id nos seus links que fazem o dropdown e uma span que irá carregar as imagens.

    E utilizando a biblioteca Jquery
    Faria o seguinte código:

    <script>
    $(document).ready(function(){
    $("#nav li a").click(function(){
    $("#" + this.id + " span").toggleClass("remove");
    });
    });
    </script>


    &lt;html&gt;
    &lt;head&gt;
    &lt;meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /&gt;
    &lt;title&gt;Documento sem título&lt;/title&gt;

    &lt;link href=\"estilo.css\" rel=\"stylesheet\" type=\"text/css\" /&gt;
    &lt;script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"&gt;&lt;/script&gt;

    &lt;script&gt;
    $(document).ready(function(){
    $(\"#nav li a\").click(function(){
    $(\"#\" + this.id + \" span\").toggleClass(\"remove\");
    });
    });
    &lt;/script&gt;


    &lt;/head&gt;
    &lt;body&gt;
    &lt;div style=\"box-shadow: 0 1px 0 1px #CCC;\" class=\"geral\"&gt; &lt;!-- div geral --&gt;


    &lt;div class=\"topo\"&gt;
    &lt;h1&gt;Galvão&lt;/h1&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href=\"#\" title=\"\"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\" title=\"\"&gt;Email&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\" title=\"\"&gt;Antispam&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\" title=\"\"&gt;Sistemas&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\" title=\"\"&gt;Help Desk&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\" title=\"\"&gt;Lista de Ramais&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class=\"topo_1\"&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href=\"#\" title=\"\"&gt; Meu Perfil &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\" title=\"\"&gt; Desbloqueio de Senha&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\" title=\"\"&gt; Fale com o presidente&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt; &lt;/div&gt;
    &lt;div class=\"menu_lateral\"&gt;
    &lt;ul id=\"nav\"&gt;
    &lt;li class=\"n_grupo\"&gt;
    &lt;a id=\"n_grupo\" href=\"#\"&gt;&lt;span class=\"add\"&gt; + &lt;/span&gt;Nosso Grupo &lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Nossa História &lt;/a&gt; &lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Organograma&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Código de Ética&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Certificações&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Onde Atuamos&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;

    &lt;li&gt;
    &lt;a href=\"#\" id=\"area_apoio\"&gt;&lt;span class=\"add\"&gt; + &lt;/span&gt;Área de Apoio&lt;/a&gt;
    &lt;ul&gt;

    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu1 área apoio&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu2 área apoio&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu3 área apoio&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu4 área apoio&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu5 área apoio&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt;Empresas do Grupo&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu1 Emp Grupo&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu2 Emp Grupo&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu3 Emp Grupo&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu4 Emp Grupo&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu5 Emp Grupo&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt;Nossos Programas&lt;/a&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu1 &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu2 &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu3 &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu4 &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=\"#\"&gt; Sub-menu5 &lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/li&gt;


    &lt;/div&gt;
    &lt;div class=\"rodape\"&gt;
    rodape
    &lt;/div&gt;
    &lt;/div&gt;&lt;!-- fim div geral --&gt;

    &lt;/body&gt;
    &lt;/html&gt;


    /* Padrao */
    body {
    background:#f4f4f4;
    font-size:12px;
    font-family:Arial;
    }

    .add{background:url(\"add.png\");}
    .remove{background:url(\"remove.png\");}

    /* 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:black; 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;}


    É assim que eu faria, qualquer dúvida mande ai
    Thiago Thomaz
    Arquiteto de Software
    http://www.thiagothomaz.com
  • Fala tomas beleza?! obrigado pela ajuda.

    Estou tentando aqui colocar pra funcionar o que vc fez, mas não estou conseguindo. Mas pelo o que imagino seria isso mesmo o que preciso.

    ou esse plugin (http://apps.komposta.net/jquery/navgoco/demo/) também.

    Só que também não estou conseguindo colocar pra funcionar.

    Eu copiei o html e o javascript.
    o html coloquei dentro do body, e javascript coloquei em um novo com nome de script.js e no meu html eu chamei esse script.. mas só aprece a lista e não vem os metódos clique... etc
  • thiagothomaz Moderador Global
    Então Humble, o código que coloquei eu fiz os testes com o seu código....
    Verificou se você importou a biblioteca Jquery antes do seu script?
    Os ids usados para achar os elementos HTML batem com os quais o script JS busca?
    Não é para ter segredo.

    Opinião minha: ( Não indico uso de Plugins, sou meio contra uso de ferramentas feito por terceiros principalmente quando se tem pouca experiencia pois você fica sujeito a erros no core da aplicação e ai não saberá como resolver ou perderá muito tempo entendendo o código de quem fez o plugin.

    Plugin de maneira geral procure usar apenas para coisas realmente complexas e busque Plugins bem aceitos pela comunidade que muita gente esteja usando ou gostando. )

    Caso esteja com dificuldades coloque uma mensagem. O "não está funcionando" fica muito vazio...

    Qualquer coisa estamos ai...
    Thiago Thomaz
    Arquiteto de Software
    http://www.thiagothomaz.com
Entre ou Registre-se para fazer um comentário.