Array
(
)

Problema com função no menu js

Felipe Lopes
   - 26 jun 2015

Olá pessoal,
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:
#Código#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:
#Código$(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:
#Código$(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:
#Código<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 -->

Pedro@program
   - 26 jun 2015

Felipe não entendi muito bem o que acontece com o menu?

Felipe Lopes
   - 26 jun 2015

O menu lateral fixo vai alterar a div da direita, e uma dessas divs da direita possui um menu em abas, que altera uma div embaixo dela.. a div das abas a qual fiz primeiro estava funcionando certinho, mas quando ponho ela dentro de um botão do menu lateral, o menu em abas some.. entendeu?
Clique na imagem para abrir em uma nova janela
Clique na imagem para abrir em uma nova janela

Pedro@program
   - 26 jun 2015

Tente isso. Ex:
#Código<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.

Felipe Lopes
   - 26 jun 2015

é para eu substituir no menu em abas ou no fixo lateral?

Pedro@program
   - 26 jun 2015

Se for o abas que está sumindo coloque nele, isso fará com que ele vai ficar fixo e assim não irá sumir
me fale se funcionou.Abç

Obs: utilize apenas: position:fixed;

Felipe Lopes
   - 26 jun 2015

Ja resolvi! apenas precisava colocar o numero apos o conteudo_abas no script do menu abas

Pedro@program
   - 26 jun 2015

Ah nem havia pensado nisso, bom pelo menos está resolvido.