Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

edison.silva

Menu Drop Down passando por cima do Rodapé ao clicar nos Sub Menus

Por , em Desenvolvimento frontend

Recommended Posts

edison.silva    0

edison.silva
Postado

Bom dia Pessoal,

Estou desenvolvendo um sistema com o menu Drop Down, quando clico nos Sub Menus eles vão descendo normal, porém, o problema é que ele passa por "cima" do rodapé da pagina, onde na verdade o rodapé deveria companhar o Menu-Sub-Menus.

Ainda não achei o erro, por favor, alguém poderia ajudar? grato

 

Código da página index.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Controle de Gastos Pessoais</title>
<!-- importação do CSS principal-->
<link rel="stylesheet" href="css/estilo.css" type="text/css">
<script language="JavaScript" src="js/jquery-1.3.2.js" type="text/javascript"></script>
    <script language="JavaScript" type="text/javascript">
  	$(function() {
  		// Evento de clique do elemento: ul#menu li.parent > a
  		$('ul#menu li.parent > a').click(function() {
  			// Expande ou retrai o elemento ul.sub-menu dentro do elemento pai (ul#menu li.parent)
  			$('ul.sub-menu', $(this).parent()).slideToggle('fast', function() {
  				// Depois de expandir ou retrair, troca a classe 'aberto' do <a> clicado       
  				$(this).parent().toggleClass('aberto');
  			});
			return false;
  		});
  	});
  </script>
</head>

<body>
<div id="tudo">
   	  	<div id="topo">        
        </div><!-- Fim div topo-->
       
      <div id="conteudo">
        <div id="colEsq">
           Coluna do Menu
         <ul id="menu">
           <li class="header">Menu</li>                    
			<li class="parent teste"><a href="#" title="">Cadastros</a>
			<ul class="sub-menu"> 
			<li><a href="#" title="">Meus Dados</a></li>
			<li><a href="#" title="">Empresas</a></li>
			<li><a href="#" title="">Usuários</a></li>
			<li><a href="#" title="">Cidades</a></li>
		</ul>
	</li>
	<li class="parent teste"><a href="#" title="">Financeiro</a>
		<ul class="sub-menu">                                   
			<li><a href="#" title="">Contas a Pagar</a></li>  
			<li><a href="#" title="">Contas a Receber</a></li>
			<li><a href="#" title="">Movimentação do Caixa</a></li>
			<li><a href="#" title="">Fechamento do Caixa</a></li>
		</ul>
	</li>      
	
	<li class="parent"><a href="#" title="">Relatórios</a>
		<ul class="sub-menu">                                   
			<li><a href="#" title="">Contas a Pagar</a></li>  
			<li><a href="#" title="">Contas a Receber</a></li>
			<li><a href="#" title="">Caixa</a></li>
		</ul>
	</li> 
	<li class="parent"><a href="#" title="">Configurações</a>
		<ul class="sub-menu"> 
			<li><a href="#" title="">Backup</a></li> 
			<li><a href="#" title="">Permissão de Acesso</a>
		</ul>
	</li>       
	<li><a href="#" title="">Contato</a></li>       
	<li><a href="#" title="">Sair</a></li>
</ul>
         </ul>
       </div><!-- Fim div colEsq-->
        
        <div id="colDir">
      	Conteudo dos Forms
      </div>    
    </div><!-- Fim div Conteudo-->
    
  	<div id="rodape">
      	Conteudo do Rodapé
    </div>  
</div><!-- Fim div tudo-->
    
</body>
</html>

Código do CSS:

body{
	padding: 0px;
	margin: 0px;
	height: 100%;
	background:#CCC;
	}

#tudo{
	width:960px;
	margin:0 auto;
	
 }
#conteudo{ 
     width:960px;
	 background:#930;
	 padding-bottom: 30px;
	
	 
}
#conteudo #colEsq {
    width: 150px;
    height: 450px;
    float: left;
    background: #ECEFE7;
}
 
#conteudo #colDir {
    width: 810px;
    height: 450px;
    float: left;
    background: #FFF;
}
#topo{
     width:960px;
	 height:83px;
	 background:#069;	
}
#rodape{
	width: 960px;
	height: 50px; /*ajusta a altura do rodapé*/
	clear: both;
	background-color: #069;
	border-top: 2px solid #00C;
		
}

ul#menu {
	width: 185px;
	border: 1px solid silver;  
	margin-top: -2px;
	border-right: 1px solid #000;
	padding: 0 0 1em 0;
	list-style:none;
	margin-bottom: 1em;
	font-family: 'Arial', 'Lucida Grande', Verdana, 'Trebuchet MS';
	background-color: #ECEFE7;
	font-size:14px;	
	-moz-border-radius: 7px;
   -webkit-border-radius: 7px;   
   box-shadow: 1px 2px 3px #000;
   
   
	
}

ul#menu li {                
	color: #F0FFFF;        
	line-height: 19px;   
	background-color: ##000CD;
	
}

ul#menu li.header {  
	font-weight: bolder; 
	height:38px;
	line-height: 30px;
	padding: 0px 3px;
	font-size: 18px;
	background-image: -moz-linear-gradient(100% 100% 90deg, #e9bc36,#ff9900);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9900), to(#e9bc36));
	
}   

ul#menu li a {
	color: #000000; 
	text-decoration: none;
	display: block;       
	padding: 3px 3px;
	outline: none;
}                     

ul#menu li.parent > a {
	color: #000000; 
	font-size:14px;
	background: transparent url('file:///C|/xampp/htdocs/Controle Financeiro/img/setaBaixo.jpg') right center no-repeat;
}                   

ul#menu li.aberto > a {
	background: transparent url('file:///C|/xampp/htdocs/Controle Financeiro/img/setaSima2.jpg') right center no-repeat;
}                   

ul#menu li a:hover {   
	background-color: #DCDCDC;
	color:#483D8B;
}
.teste li a:hover {   
	background-color: #DCDCDC;
	color:#483D8B;
	font-size:15px;
}
ul#menu li ul.sub-menu {
  	display: none;
	font-size:14px;
	;
	list-style:none;
}                 

ul#menu li ul.sub-menu li a {
	padding-left: 15px;
	color: maroon;
}

Link da página para visualizar melhor o problema:

http://www.projetos.esy.es/

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Olá edilson, blza!

 

Esse seu menu, fica com todos aberto, isso não é legal, usa o "accordion menu" assim ele fecha um ao abrir o outro.

 

Veja alguns links

 

http://www.menucool.com/vertical/accordion-menu-css

 

http://cssmenumaker.com/blog/5-free-jquery-accordion-menus

 

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm

 

 

Ficará bem mais elegante e economiza seu Height

 

Espero ter ajudado,

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Por nada amigo,

 

Que bom que ajudou.

 

:joia:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito