Problema com função no menu js

26/06/2015

0

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:
#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

Felipe Lopes

Responder

Posts

26/06/2015

Pedro

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

26/06/2015

Felipe Lopes

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?
[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]
Responder

26/06/2015

Pedro

Tente isso. Ex:
<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.
Responder

26/06/2015

Felipe Lopes

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

26/06/2015

Pedro

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;
Responder

26/06/2015

Felipe Lopes

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

26/06/2015

Pedro

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

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar