Fórum Problema com função no menu js #524178
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
Curtir tópico
+ 0Posts
26/06/2015
Pedro
Gostei + 0
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]
Gostei + 0
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.
Gostei + 0
26/06/2015
Felipe Lopes
Gostei + 0
26/06/2015
Pedro
me fale se funcionou.Abç
Obs: utilize apenas: position:fixed;
Gostei + 0
26/06/2015
Felipe Lopes
Gostei + 0
26/06/2015
Pedro
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)