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

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

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

Aceitar