Menu Vertical com 3 Niveis de Sub Menus

Maycon Welliton · Junho 11, 2014

Pessoal tudo bem?

Estou desenvolvendo um Menu Vertical onde alguns itens do Menu, possuem outro Sub-Menu, e alguns Sub-Menus necessitarão de outro Nivel de Divisão, eu só consegui criar até o Segundo Nivel, alguem consegue me ajudar?

Nesse link tem uma imagem do problema, quando o cursor para sobre o item do menu com o nome "Variaves" o Todos os Sub Menus aparecem ao mesmo tempo.

http://s112.photobucket.com/user/mayconwelliton/media/imagem_zps3bc7fcea.png.html

Segue os códigos da pagina html:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/1999/xhtml" lang="en" xml : lang="en">
<html>
<head>	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>SimpleTabs</title>
		<script type="text/javascript" src="js/simpletabs_1.3.js"></script>
		
		<!--endereço do jquery -->
		<script type="text/javascript" src="js/jquery-1.11.0.js"	</script>
		<!--endereço do jquery -->
		
		
		
		
	
		<script type="text/javascript">
	$(document).ready(function(){
		$("#menulateral a").click(function( e ){
			e.preventDefault();
			var href = $( this ).attr('href');
			$("#conteudo").load( href +" #conteudo");
		});
	});
	</script>
		
		
		
		<!--função abrir conteudo em div -->
		
		<!--folhas de estilo -->
		<style type="text/css" media="screen">
		@import "css/simpletabs.css";
		@import "css/semtabelas.css";
		</style>
		<!--folhas de estilo -->
		
</head>
<body>	

<div id="tudo">	

	<div id="cabecalho">
			
		<h2 >Menu Funcionarios</h2></span>

	</div> <!fecha cabecalho!>

	<div id="menulateral" class="menu">
	
					<ul>
						<li><a href='index.html'><span>Pagina Principal</span></a></li><!--MENU NIVEL 1-->
						<li><a href='#'><span>Funcionarios</span></a><!--MENU NIVEL 1-->
							<ul>
								<li><a href='pesquisar.php'><span>Localizar</span></a></li><!--MENU NIVEL 2-->
								<li><a href='menufuncionarios.php'><span>Cadastrar Novo</span></a><!--MENU NIVEL 2-->
							</ul>
						
						</li>
						
						<li><a href="#"><span> Variaveis</span></a><!--MENU NIVEL 1-->
							<ul>
								<li><a href='inserirvariaveis.php'><span>Inserir Variaveis</span></a></li><!--MENU NIVEL 2-->
								
								<li>
									<a href="#"><span>Relatorios</span></a><!--MENU NIVEL 2-->
									
									<ul>
										<li><a href='relatoriovariaveis.php'><span>Total Por Nome</span></a></li><!--MENU NIVEL 3-->
										<li><a href='relatoriovariaveis.php'><span>Total Por Unidade</span></a></li><!--MENU NIVEL 3-->
									</ul>
									
								</li>
								
							</ul>
						</li>
						
						<li><a href='ferias.php'><span>Ferias</span></a></li>
					</ul>  
					
	</div><!fecha menulateral!>
	
	<div id="conteudo">

	<p>Conteudo Central</p>
	<p>Index de testes</p>
	<p>Isso é um teste</p>
					
	</div><! fecha div=conteudo !>


	<div id="rodape">Rodape

	</div>


  
</div> <!fecha div=tudo !>

</body>

</html>

E aqui o CSS do HTML:

#tudo{
		width: 1310px;
		padding: 10px;
		margin: 1px 1px 1px 10px;
		font-family: Calibri, sans-serif;
		background: -moz-linear-gradient(top, rgba(201,222,150,1) 0%, rgba(138,182,107,1) 44%, rgba(57,130,53,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,222,150,1)), color-stop(44%,rgba(138,182,107,1)), color-stop(100%,rgba(57,130,53,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Chrome10+,Safari5.1+ */		
		background: -o-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); /* IE6-9 */
		}

#cabecalho{
		text-align: center;
		padding: 5px;
		margin: 10px;
		font-size: 90%;
		clear: left;
		border: 1px solid;
		background-color:  #ffffff;
		}




		
#conteudo{
		text-align: left;
		font-size: 100%;
		padding: 5px ;
		margin: 0px 10px 10px 10px;
		border: 1px solid;
		background-color: #ffffff;
		height: 450px;
		min-height:415px;
		z-index:1; 
		overflow: auto;
		}

#menulateral{
		font-size: 100%;
		padding: 0px;
		margin: 0px  5px 10px 10px;
		width: 200px;
		float: left;
		border: 1px solid;
		background-color:  #ffffff;
		min-height: 460px;

		}
		
#menulateral	ul li {
	position: relative;
	}
	
#menulateral	li ul {
	position: absolute;
	left: 200px;
	top: 0;
	display: none;
	}
	
#menulateral	ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}
	
#menulateral	ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 200px;
	border-bottom: 1px solid #ccc;
	}

#menulateral	li:hover ul { display: block; }
		
#menulateral ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
#menulateral li a {
  height: 32px;
  height: 24px;
  text-decoration: none;
  font-weight: normal;
}
#menulateral li a:link,
#menulateral li a:visited {
  color: #5E7830;
  display: block;
  background: url(images/menu1.gif);
  background-repeat: no-repeat;
  padding: 8px 0 0 10px;
}
#menulateral li a:hover {
  color: #26370A;
  background: url(images/menu1.gif) 0 -32px;
  background-repeat: no-repeat;
  padding: 8px 0 0 10px;
}
#menulateral li a:active {
  color: #26370A;
  background: url(images/menu1.gif) 0 -64px;
  background-repeat: no-repeat;
  padding: 8px 0 0 10px;
}


#rodape{
		text-align: center;
		padding: 15px;
		margin: 10px;
		font-size: 90%;
		clear:both;
		border: 1px solid;
		background-color:  #ffffff;
		}
		
#celula1{
		width:471px;
		height:90px;
		}
		
fieldset{
		font-size: 75%;
		font-weight: bold;
		color: #696969;
		border: 1px dotted #4F4F4F;
		border-radius:4px;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		}
legend{
		font-size: 14px;
		border: 1px;
		color: #000;
		}
		
input, select{
	text-align: center;
	padding: 3px;
	border: 1px solid #999;
	color: #000;
	font-size: 12px;
	border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    box-shadow: 1px 1px 2px #333333;    
    -moz-box-shadow: 1px 1px 2px #333333;
    -webkit-box-shadow: 1px 1px 2px #333333;
	}
label{
	padding-right: 1px;
	padding-left: 15px;
	}
	
input[type='radio'] {
-webkit-box-shadow: inset 0 1px 2px white, 0 1px 2px rgba(0, 0, 0, .2);
-webkit-appearance: none;
-webkit-margin-start: 0;
-webkit-margin-end: 3px;
-webkit-transition: border 500ms;
background: -webkit-linear-gradient(#fafafa, #dcdcdc);
border-radius: 100%;
border: 1px solid #a0a0a0;
display: inline-block;
height: 15px;
margin-bottom: 0;
position: relative;
top: 3px;
vertical-align: baseline;
width: 15px;
}
input[type='radio']:disabled {
opacity: .75;
}
input[type='radio']:not(:disabled):not(:active):hover {
background: -webkit-linear-gradient(#fff, #e6e6e6);
text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}
input[type='radio']:not(:disabled):active {
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
background: -webkit-linear-gradient(#f0f0f0, #bebebe);
border: 1px solid #808080;
text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
input[type='radio']:checked::before {
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-webkit-margin-start: 4px;
background: #808080;
border-radius: 10px;
content: '';
display: inline-block;
font-size: 13px;
font-weight: 400;
height: 5px;
left: 0;
margin-top: 4px;
opacity: 1;
position: absolute;
top: 0;
vertical-align: top;
width: 5px;
}
html[dir='rtl'] input[type='radio']:checked::before {
right: 0;
}
input[type='radio']:active:checked::before {
background: #606060;
}

Vlw...

O menu do 3 nivel não fica escondido, aparece direto...

xanburzum · Junho 11, 2014

no jquery, est habilitado para outro nível... e veja se o css está correto

Marlon Pacheco · Junho 13, 2014

No seu CSS mude a linha:

#menulateral	li:hover ul { display: block; }

para

#menulateral	li:hover > ul { display: block; }

Está funcionando em http://codepen.io/marlonlp/pen/yqkAd

Entrar

Arquivado

Menu Vertical com 3 Niveis de Sub Menus

Recommended Posts

Maycon Welliton 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marlon Pacheco 132

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante