Problema com função no menu js
26/06/2015
0
Estou com uma dúvida que não estou conseguindo resolver :wacko:
Primeiramente eu adaptei um menu em abas, ou seja, um menu que não carregasse uma nova página e sim trocasse o conteúdo de uma div, ai eu precisava fazer um menu lateral vertical fixo na esquerda, que fizesse a mesma coisa.
Tentei adaptar o código, o menu apareceu, até funciona, mas nao 100%.. do jeito que eu quero ele ta fazendo sumir o primeiro menu que eu fiz de errado?.. podem me ajudar?
CSS:
#container{ width:900px; height:500px; } div.conteudo { padding:10px 15px; } #cssmenu { margin-top: 10px; } #menu { height:500px; float:left; background: #333; list-style: none; margin: 0px 10px 0px 0px; padding: 0; width: 12em; } #menu li { font: 89.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; margin: 0; padding: 0; list-style: none; } #menu a { background: #333; border-bottom: 1px solid #393939; color: #ccc; display: block; margin: 0; padding: 8px 12px; text-decoration: none; font-weight: normal; } #menu a:hover { background: #2580a2 left center no-repeat; color: #fff; padding-bottom: 8px; } #menu li a.corrente { background:#2580a2; } div.aba { background:#fff; text-align:justify; margin-bottom:20px; padding:10px 15px; border:1px solid #666; } #nav { margin:0; padding:3px 0; border-bottom:1px solid #778; font:bold 12px Georgia, "Times New Roman", Times, serif; } #nav li { list-style:none; margin-right:6px; display:inline; } #nav li a { padding:3px 6px; border:1px solid #778; border-bottom:none; background:#dde; color:#333; text-decoration:none; } #nav li a:hover { color:#000; background:#aae; border-color:#227; } #nav li a.corrente { background:#fff; border-bottom:1px solid #fff; }
JavaScript do menu lateral:
$(document).ready(function(){ $('#cssmenu').prepend( '<ul id="menu"><li class="corrente"><a href="#relatorios"><span>Relatórios</span></a></li><li><a href="#documentos"><span>Documentos</span></a></li><li><a href="#suporte"><span>Suporte</span></a></li><li class="last"><a href="#desconectar"><span>Desconectar</span></a></li> </ul>') $('.conteudo').css({ display: 'none', marginTop: 0, borderTopWidth: 0 }) $('#container_abas1').css('display', 'block'); $('a', $('#menu')).click(function() { var i = $('a', $('#menu')).index(this) + 1; $(this).parents('#cssmenu').children('.conteudo:visible').hide(); $('#container_abas' + i).show(); $(this).parents('#menu').find('a').removeClass('corrente'); $(this).addClass('corrente'); }) })
JavaScript do menu em aba da div de dentro:
$(document).ready(function(){ $('#container_abas').prepend( '<ul id="nav"> <li><a href="#aba1" class="corrente">2015</a></li> <li><a href="#aba2">2014</a></li> <li><a href="#aba3">2013</a></li> <li><a href="#aba4">2012</a></li> <li><a href="#aba5">2011</a></li> </ul>') $('.aba').css({ display: 'none', marginTop: 0, borderTopWidth: 0 }) $('#aba1').css('display', 'block'); $('a', $('#nav')).click(function() { var i = $('a', $('#nav')).index(this) + 1; $(this).parents('#container_abas').children('.aba:visible').hide(); $('#aba' + i).show(); $(this).parents('#nav').find('a').removeClass('corrente'); $(this).addClass('corrente'); }) })
e o HTML:
<div id="container"> <div id="cssmenu"> <div id="container_abas1" class="conteudo"> <div id="aba1" class="aba"> <h2>2015</h2> <p>Janeiro</p> <p>Fevereiro</p> <p>Março</p> <p>Abril</p> <p>Maio</p> <p>Junho</p> <p>Julho</p> <p>Agosto</p> <p>Setembro</p> <p>Outubro</p> <p>Novembro</p> <p>Dezembro</p> </div> <div id="aba2" class="aba"> <h2>2014</h2> <p>Janeiro</p> <p>Fevereiro</p> <p>Março</p> <p>Abril</p> <p>Maio</p> <p>Junho</p> <p>Julho</p> <p>Agosto</p> <p>Setembro</p> <p>Outubro</p> <p>Novembro</p> <p>Dezembro</p> </div> <div id="aba3" class="aba"> <h2>2013</h2> <p>Janeiro</p> <p>Fevereiro</p> <p>Março</p> <p>Abril</p> <p>Maio</p> <p>Junho</p> <p>Julho</p> <p>Agosto</p> <p>Setembro</p> <p>Outubro</p> <p>Novembro</p> <p>Dezembro</p> </div> <div id="aba4" class="aba"> <h2>2012</h2> <p>Janeiro</p> <p>Fevereiro</p> <p>Março</p> <p>Abril</p> <p>Maio</p> <p>Junho</p> <p>Julho</p> <p>Agosto</p> <p>Setembro</p> <p>Outubro</p> <p>Novembro</p> <p>Dezembro</p> </div> <div id="aba5" class="aba"> <h2>2011</h2> <p>Janeiro</p> <p>Fevereiro</p> <p>Março</p> <p>Abril</p> <p>Maio</p> <p>Junho</p> <p>Julho</p> <p>Agosto</p> <p>Setembro</p> <p>Outubro</p> <p>Novembro</p> <p>Dezembro</p> </div> </div> <!-- Fim div#container_abas --> <div id="container_abas2" class="conteudo"> <div> teste2 </div> </div> <div id="container_abas3" class="conteudo"> <div> teste3 </div> </div> <div id="container_abas4" class="conteudo"> <div> teste4 </div> </div> </div> </div><!-- Fim div#container -->
Felipe Lopes
Posts
26/06/2015
Felipe Lopes
[img]http://arquivo.devmedia.com.br/forum/imagem/439103-20150626-192318.png[/img]
[img]http://arquivo.devmedia.com.br/forum/imagem/439103-20150626-192408.png[/img]
26/06/2015
Pedro
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Saúde</title> </head> <body> <div id="conteudo"> <h1>Saúde</h1> </div> <div id="menu"> <ul> <li><a href="dicas02.html" target="conteudo">Dicas</a></li> <li><a href="uteis.html" target="conteudo">Úteis</a></li> <li><a href="faca+.html" target="conteudo">Faça+</a></li> <li><a href="escute.html" target="conteudo">Escute os especialistas</a></li> <li><a href="vídeos.html" target="conteudo">Vídeos</a></li> <li><a href="inicio.html" target="conteudo">Retorne à Home</a></li> </ul> </div> <style> body { color: #000; font: 12px Verdana, sans-serif; } #conteudo { width: 70%; float: right; text-align: center; } #menu { width: 30%; margin: 0; padding: 0; float: left; } #menu ul li { margin: 0; padding: 0px; border-bottom: 1px solid #CCC; text-align: left; list-style-type: none; position:fixed; */ MENU FIXO SEGUINDO COM O CONTEÚDO \* } #menu a:link { background: #F5F5F5; color: #666; font-weight: bold; text-decoration: none; padding: 8px; display: block; } #menu a:hover { background: #E5F0FF; color: #039; } </style> </body> </html>
Exemplo o menu ficará fixo. Espero ter ajudado.
26/06/2015
Felipe Lopes
26/06/2015
Pedro
me fale se funcionou.Abç
Obs: utilize apenas: position:fixed;
26/06/2015
Felipe Lopes
Clique aqui para fazer login e interagir na Comunidade :)