Ir para conteúdo
Fórum Script Brasil
  • 0

menu drop-down

Guest Fln

Perguntado por Guest Fln,

 Share

Pergunta

Guest Fln

Guest Fln

Postado
Postado

Como centralizar menu dropdown? bom eu estou com problema eu preciso centralizar menu dropdown so q ele fica sempre na left, e eu queria por ele encima de uma imagen so q ele também não fica =/ vou postar o codigo aqui para voces

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content=""  />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<link href="css/pagina.css" rel="stylesheet" type="text/css" />
&lt;script type="text/javascript" src="js/menu.js"></script>
<title>Menu Drop Down</title>
</head>
 <body onload="menuDropDown(4);">
                  <!--
Na classe submenu deverão ser informadas as opções do menu horizontal (barra de menu).
Na classe menu deverão ser informadas as opções do menu vertical.
Para inserir mais um nível deve-se alterar a classe "item" para "submenu" e adicionar outra 

lista de classe "menu" nela.
--> 
<ul id="menu_dropdown" class="menubar">
   <li class="submenu"><a href="#">Cadastros</a>
      <ul class="menu">   
          <li class="item"><a href="#">01</a></li>
          <li class="item"><a href="#">0000</a></li>
          <li class="item"><a href="#">Power</a></li>               
          <li class="item"><a href="#">Power</a></li>                              
                                                                 
      </ul>
  </li>
   <li class="submenu"><a href="#">Aeeee</a>
      <ul class="menu">
        <li class="item"><a href="#">PPA</a></li>
        <li class="item"><a href="#">LDO</a></li>        
        <li class="item"><a href="#">LOA</a></li>
      </ul>
  </li>
   <li class="submenu"><a href="#">PowerPowers</a>
      <ul class="menu">
        <li class="item"><a href="#">PowerPowerPower</a></li>
        <li class="item"><a href="#">Power</a></li>        
        <li class="item"><a href="#">Power</a></li>
        <li class="item"><a href="#">Power</a></li>        
      </ul>
  </li>
   <li class="submenu"><a href="#">Power</a>
      <ul class="menu">
        <li class="item"><a href="#">DPoweria</a></li>
        <li class="item"><a href="#">DPower</a></li>        
        <li class="item"><a href="#">DPower</a></li>        
        <li class="submenu"><a href="#">Power</a>
           <ul class="menu">
                             
               <
              
</body>
</html>
AKI A PARTE EM CSS 
/* 
Regra 0 - Definiçao da fonte padrão encontrada na maioria dos computadores
*/
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
}
/* 
Regra 1 - Classe que define as propriedades da barra horizontal
*/
ul.menubar{
  margin: 0px;
  padding: 0px;
  background-color: #FFFFFF; /* IE6 Bug */
}
/* 
Regra 2 - Classe que define o formato e a posiçao dos submenus (um ao lado do outro)
*/ 
ul.menubar .submenu{
  margin: 0px;
  padding: 0px;
  list-style: none;
  background-color: #FFFFFF;
  border: 1px solid #ccc;
  float:left; 
}
/* 
Regra 3 - Classe que define a posiçao e a exibiçao dos menus verticais (inicialmente eles não são exibidos)
*/  
ul.menubar ul.menu{
  display: none;
  position: absolute;
  margin: 0px;
}
/* 
Regra 4 - Classe que define a aparencia do link da barra horizontal
*/  
ul.menubar a{
  padding: 5px;
  display:block;
  text-decoration: none;
  padding: 5px;
}
/* 
Regra 5 - Classe que define o tamanho e a cor do menu vertical
*/ 
ul.menu, ul.menu ul{
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ccc;
  width: 150px; 
  background-color: #FFFFFF; /* IE6 Bug */
} 
/* 
Regra 6 - Classe que define o posicionamento dos itens do menu vertical relativos ao submenu
*/  
ul.menu li{
  position: relative;
  list-style:none;
  border: 0px;
}
/* 
Regra 7 - Classe que define a aparencia dos links dos itens do menu vertical
*/  
ul.menu li a{
  display: block;
  text-decoration: none;
  border: 1px solid #ccc;
  border-bottom: 0px;
  padding: 5px 10px 5px 5px;
}
/* 
Regra 8 - Classe que define o posicionamento do menu vertical
*/   
ul.menu ul{
  position: absolute;
  display: none;
  left: 149px; /* Definir 1px menor que o tamannho do menu */
  top: 0px; 
}
/* 
Regra 9 - Classe que define o tamanho e a posiçao do 3o nível de menus
*/ 
ul.menu li.submenu {
  width: 150px; 
  position: relative; 
  list-style:none; 
  border: 0px; 
  float:none;  
  z-index: 1000; /* IE7 Bug */
}
/* 
Regra 10 - Classe que define a aparencia dos links do 3o nível de menus
*/ 
ul.menu li.submenu a {
  display: block;
  text-decoration: none;
  border: 1px solid #ccc;
  border-bottom: 0px;
  padding: 5px 10px 5px 5px;
}

/* Fixar IE. Invisível para IE Mac \*/
* html ul.menu li { float: left; height: 1%; } /* Regra 11 */
* html ul.menu li a { height: 1%; } /* Regra 12 */
* html ul.menu li.submenu { float: none; height: 1%; } /* Regra 13 */
* html ul.menu li.submenu a { height: 1%; } /* Regra 14 */
/* Fim */

/* 
Regra 15 - Classe que torna os sub-menus invisíveis inicialmente
*/ 
ul.menu li.submenu ul { display: none; } 
/* 
Regra 16 - Classe que insere a imagem da seta para a direita no menu vertical
*/  
ul.menu li.submenu {
  background-color: transparent;
  background-image: url(../img/seta_dir.gif);
  background-repeat: no-repeat;
  background-position: 93% 50%;
}
AKI A PARTE EM JAVA 
// JavaScript Document
/*
  Funçao que exibe um menu drop-down horizontal em até 3 níveis
*/
function menuDropDown(tema) {
   moz = !(document.all);  // Testar o navegador mozilla
   nav = navigator.appName;  // Armazena o nome do navegador
   temas(tema);  // Funçao que retorna as cores escolhidas para o menu
   if(moz || nav == 'Opera') {
       // Regras CSS para o Firefox, Safari e Opera
       document.styleSheets[0].cssRules[2].style.backgroundColor = cor_Menu_NaoAtiva; 
       document.styleSheets[0].cssRules[4].style.color = cor_Fonte_Menu_NaoAtiva;    
       document.styleSheets[0].cssRules[5].style.backgroundColor = cor_Submenu_NaoAtiva;    
       document.styleSheets[0].cssRules[7].style.color = cor_Fonte_Submenu_NaoAtiva;
       document.styleSheets[0].cssRules[9].style.backgroundColor = cor_Submenu_NaoAtiva;       
       document.styleSheets[0].cssRules[10].style.color = cor_Fonte_Submenu_NaoAtiva;;
   }
   else  
   {
       // Regras CSS apenas para o Internet Explorer
       document.styleSheets[0].rules[2].style.backgroundColor = cor_Menu_NaoAtiva; 
       document.styleSheets[0].rules[4].style.color = cor_Fonte_Menu_NaoAtiva;    
       document.styleSheets[0].rules[5].style.backgroundColor = cor_Submenu_NaoAtiva;    
       document.styleSheets[0].rules[7].style.color = cor_Fonte_Submenu_NaoAtiva;
       document.styleSheets[0].rules[9].style.backgroundColor = cor_Submenu_NaoAtiva;       
       document.styleSheets[0].rules[10].style.color = cor_Fonte_Submenu_NaoAtiva;;
   }
   var navItems = document.getElementById("menu_dropdown").getElementsByTagName("li");  // Armazena o conteúdo de todas as tags "li" do id "menu_dropdown"
   var links = document.getElementById("menu_dropdown").getElementsByTagName("a");  // Armazena o conteúdo de todas as tags "a" do id "menu_dropdown"

   for (var i=0; i< navItems.length; i++) {  // Laço de repetiçao que percorre todos o items do menu e muda as propriedades da CSS
      if(navItems[i].className == "submenu") {
         if(navItems[i].getElementsByTagName('ul')[0] != null) {
            // Controla a exibiçao dos menus verticais e altera a cor de fundo dos mesmos
            navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = cor_Menu_Ativa;}
            navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = cor_Menu_NaoAtiva;}
            // Alterar a cor da fonte da classe submenu
            links[i].onmouseover=function() {this.style.color = cor_Fonte_Menu_Ativa;}
            links[i].onmouseout=function() {this.style.color = cor_Fonte_Menu_NaoAtiva;}            
         } // fim if menu
      } // fim if submenu
      if(navItems[i].className == "item") {
         // Alterar a cor de fundo da classe item
         navItems[i].onmouseover=function() {this.style.backgroundColor = cor_Submenu_Ativa;}
         navItems[i].onmouseout=function() {this.style.backgroundColor = cor_Submenu_NaoAtiva;}
         // Alterar a cor da fonte da classe item
         links[i].onmouseover=function() {this.style.color = cor_Fonte_Submenu_Ativa;}
         links[i].onmouseout=function() {this.style.color = cor_Fonte_Submenu_NaoAtiva;}          
      } // fim if item
   } // fim for
} // fim funcao 

/* 
Funçao que recebe o código do tema a ser utilizado pela funçao menuDropDown() e retorna
as cores de fundo da barra de menus, dos submenus e das fontes. 
*/
function temas(tema) {
  switch(tema) {
       case 1 : //preto
           cor_Menu_Ativa = '#FFFFFF';
           cor_Menu_NaoAtiva = '#000000'; 
           cor_Fonte_Menu_Ativa = '#000000';
           cor_Fonte_Menu_NaoAtiva = '#999999';
           cor_Submenu_Ativa = '#FFFFFF';
           cor_Submenu_NaoAtiva = '#000000';
           cor_Fonte_Submenu_Ativa = '#000000';
           cor_Fonte_Submenu_NaoAtiva = '#999999';
           break
       case 2 : //branco
           cor_Menu_Ativa = '#000000';
           cor_Menu_NaoAtiva = '#FFFFFF'; 
           cor_Fonte_Menu_Ativa = '#FFFFFF';
           cor_Fonte_Menu_NaoAtiva = '#999999';
           cor_Submenu_Ativa = '#000000';
           cor_Submenu_NaoAtiva = '#FFFFFF';
           cor_Fonte_Submenu_Ativa = '#FFFFFF';
           cor_Fonte_Submenu_NaoAtiva = '#999999';
           break
        case 3 : //azul
           cor_Menu_Ativa = '#000000';
           cor_Menu_NaoAtiva = '#0000FF'; 
           cor_Fonte_Menu_Ativa = '#FFFFFF';
           cor_Fonte_Menu_NaoAtiva = '#FFFFFF';
           cor_Submenu_Ativa = '#000000';
           cor_Submenu_NaoAtiva = '#0000FF';
           cor_Fonte_Submenu_Ativa = '#FFFFFF';
           cor_Fonte_Submenu_NaoAtiva = '#FFFFFF';
           break
       case 4 : // verde
           cor_Menu_Ativa = '#000000';
           cor_Menu_NaoAtiva = '#009900'; 
           cor_Fonte_Menu_Ativa = '#FFFFFF';
           cor_Fonte_Menu_NaoAtiva = '#FFFFFF';
           cor_Submenu_Ativa = '#000000';
           cor_Submenu_NaoAtiva = '#009900';
           cor_Fonte_Submenu_Ativa = '#FFFFFF';
           cor_Fonte_Submenu_NaoAtiva = '#FFFFFF';
           break
       case 5 : // vermelho
           cor_Menu_Ativa = '#000000';
           cor_Menu_NaoAtiva = '#FF0000'; 
           cor_Fonte_Menu_Ativa = '#FFFFFF';
           cor_Fonte_Menu_NaoAtiva = '#FFFFFF';
           cor_Submenu_Ativa = '#000000';
           cor_Submenu_NaoAtiva = '#FF0000';
           cor_Fonte_Submenu_Ativa = '#FFFFFF';
           cor_Fonte_Submenu_NaoAtiva = '#FFFFFF';
           break
       case 6 : // amarelo
           cor_Menu_Ativa = '#000000';
           cor_Menu_NaoAtiva = '#FFFF00'; 
           cor_Fonte_Menu_Ativa = '#CCCCCC';
           cor_Fonte_Menu_NaoAtiva = '#0000FF';
           cor_Submenu_Ativa = '#000000';
           cor_Submenu_NaoAtiva = '#FFFF00';
           cor_Fonte_Submenu_Ativa = '#CCCCCC';
           cor_Fonte_Submenu_NaoAtiva = '#0000FF';
           break
      case 7 : // laranja
           cor_Menu_Ativa = '#FF9900';
           cor_Menu_NaoAtiva = '#FFCC00'; 
           cor_Fonte_Menu_Ativa = '#0000FF';
           cor_Fonte_Menu_NaoAtiva = '#000000';
           cor_Submenu_Ativa = '#FF9900';
           cor_Submenu_NaoAtiva = '#FFCC00';
           cor_Fonte_Submenu_Ativa = '#0000FF';
           cor_Fonte_Submenu_NaoAtiva = '#000000';
           break
      case 8 : // marrom
           cor_Menu_Ativa = '#993300';
           cor_Menu_NaoAtiva = '#996600'; 
           cor_Fonte_Menu_Ativa = '#FFFFFF';
           cor_Fonte_Menu_NaoAtiva = '#FFFFFF';
           cor_Submenu_Ativa = '#993300';
           cor_Submenu_NaoAtiva = '#996600';
           cor_Fonte_Submenu_Ativa = '#FFFFFF';
           cor_Fonte_Submenu_NaoAtiva = '#FFFFFF';
           break
      case 9 : // naval
           cor_Menu_Ativa = '#3399FF';
           cor_Menu_NaoAtiva = '#99CCFF'; 
           cor_Fonte_Menu_Ativa = '#FFFFFF';
           cor_Fonte_Menu_NaoAtiva = '#000000';
           cor_Submenu_Ativa = '#3399FF';
           cor_Submenu_NaoAtiva = '#99CCFF';
           cor_Fonte_Submenu_Ativa = '#FFFFFF';
           cor_Fonte_Submenu_NaoAtiva = '#000000';
           break
       case 10 : // ouro
           cor_Menu_Ativa = '#CC9900';
           cor_Menu_NaoAtiva = '#CCCC33'; 
           cor_Fonte_Menu_Ativa = '#000000';
           cor_Fonte_Menu_NaoAtiva = '#FFFFFF';
           cor_Submenu_Ativa = '#CC9900';
           cor_Submenu_NaoAtiva = '#CCCC33';
           cor_Fonte_Submenu_Ativa = '#000000';
           cor_Fonte_Submenu_NaoAtiva = '#FFFFFF';
           break
       case 11 : // purpura
           cor_Menu_Ativa = '#9900CC';
           cor_Menu_NaoAtiva = '#CC00FF'; 
           cor_Fonte_Menu_Ativa = '#000000';
           cor_Fonte_Menu_NaoAtiva = '#FFFFFF';
           cor_Submenu_Ativa = '#9900CC';
           cor_Submenu_NaoAtiva = '#CC00FF';
           cor_Fonte_Submenu_Ativa = '#000000';
           cor_Fonte_Submenu_NaoAtiva = '#FFFFFF';
           break
       case 12 : // menu_xp
           cor_Menu_Ativa = '#CCCCCC';
           cor_Menu_NaoAtiva = '#D3E5FA'; 
           cor_Fonte_Menu_Ativa = '#000000';
           cor_Fonte_Menu_NaoAtiva = '#0A246A';
           cor_Submenu_Ativa = '#1665CB';
           cor_Submenu_NaoAtiva = '#FFFFFF';
           cor_Fonte_Submenu_Ativa = '#FFFFFF';
           cor_Fonte_Submenu_NaoAtiva = '#000000';
           if(moz || nav == 'Opera') {
               document.styleSheets[0].cssRules[2].style.border = 'none'; 
               document.styleSheets[0].cssRules[5].style.border = '1px solid #55A1FF';      
               document.styleSheets[0].cssRules[7].style.border = 'none';                  
               document.styleSheets[0].cssRules[10].style.border = 'none';                  
           }
           else {
               document.styleSheets[0].rules[2].style.border = 'none'; 
               document.styleSheets[0].rules[5].style.border = '1px solid #55A1FF';      
               document.styleSheets[0].rules[7].style.border = 'none';                  
               document.styleSheets[0].rules[10].style.border = 'none';                  
           }
           break
       case 13 : // menu_office
           cor_Menu_Ativa = '#C6D3EF';
           cor_Menu_NaoAtiva = '#ECE9D8'; 
           cor_Fonte_Menu_Ativa = '#000000';
           cor_Fonte_Menu_NaoAtiva = '#000000';
           cor_Submenu_Ativa = '#C6D3EF';
           cor_Submenu_NaoAtiva = '#FFFFFF';
           cor_Fonte_Submenu_Ativa = '#000000';
           cor_Fonte_Submenu_NaoAtiva = '#000000';
           if(moz || nav == 'Opera') {
               document.styleSheets[0].cssRules[2].style.border = 'none'; 
               document.styleSheets[0].cssRules[5].style.width = '156px';            
               document.styleSheets[0].cssRules[5].style.border = '1px solid #8A867A';
               document.styleSheets[0].cssRules[5].style.padding = '2px';                          
               document.styleSheets[0].cssRules[9].style.border = '1px solid #8A867A';     
               document.styleSheets[0].cssRules[9].style.padding = '2px';
           }
           else {
               document.styleSheets[0].rules[2].style.border = 'none'; 
               document.styleSheets[0].rules[5].style.border = '1px solid #8A867A';
               document.styleSheets[0].rules[5].style.padding = '2px';                          
               document.styleSheets[0].rules[9].style.border = '1px solid #8A867A';     
               document.styleSheets[0].rules[9].style.padding = '2px';
           }
           break
       case 14 : // metálico
           cor_Menu_Ativa = '#DCDAED';
           cor_Menu_NaoAtiva = '#F3F2F9'; 
           cor_Fonte_Menu_Ativa = '#FFFFFF';
           cor_Fonte_Menu_NaoAtiva = '#000000';
           cor_Submenu_Ativa = '#DCDAED';
           cor_Submenu_NaoAtiva = '#F3F2F9';
           cor_Fonte_Submenu_Ativa = '#0000FF';
           cor_Fonte_Submenu_NaoAtiva = '#333333';
           if(moz || nav == 'Opera') {
               document.styleSheets[0].cssRules[2].style.height = '24px'; 
               document.styleSheets[0].cssRules[2].style.backgroundColor = '#FFFFFF'; 
               document.styleSheets[0].cssRules[2].style.border = '1px solid #666666';               
               document.styleSheets[0].cssRules[2].style.backgroundImage = 'url(../img/fundo_01.jpg)';
               document.styleSheets[0].cssRules[2].style.backgroundRepeat = 'repeat-x';
           }
           else {
               document.styleSheets[0].rules[2].style.height = '24px'; 
               document.styleSheets[0].rules[2].style.backgroundColor = '#FFFFFF'; 
               document.styleSheets[0].rules[2].style.border = '1px solid #666666';               
               document.styleSheets[0].rules[2].style.backgroundImage = 'url(../img/fundo_01.jpg)';
               document.styleSheets[0].rules[2].style.backgroundRepeat = 'repeat-x';
           }               
           break
       case 15 : // menu vista
           cor_Menu_Ativa = '#DCDAED';
           cor_Menu_NaoAtiva = '#F3F2F9'; 
           cor_Fonte_Menu_Ativa = '#FFFFFF';
           cor_Fonte_Menu_NaoAtiva = '#000000';
           cor_Submenu_Ativa = '#DCDAED';
           cor_Submenu_NaoAtiva = '#F3F2F9';
           cor_Fonte_Submenu_Ativa = '#0000FF';
           cor_Fonte_Submenu_NaoAtiva = '#333333';
           if(moz || nav == 'Opera') {
               document.styleSheets[0].cssRules[2].style.height = '24px'; 
               document.styleSheets[0].cssRules[2].style.width = '92px';            
               document.styleSheets[0].cssRules[2].style.backgroundColor = '#FFFFFF'; 
               document.styleSheets[0].cssRules[2].style.border = 'none';               
               document.styleSheets[0].cssRules[2].style.backgroundImage = 'url(../img/round10a.gif)';
               document.styleSheets[0].cssRules[2].style.backgroundRepeat = 'repeat-x';
           }
           else {
               document.styleSheets[0].rules[2].style.height = '25px'; 
               document.styleSheets[0].rules[2].style.width = '92px';            
               document.styleSheets[0].rules[2].style.backgroundColor = '#FFFFFF'; 
               document.styleSheets[0].rules[2].style.border = 'none';               
               document.styleSheets[0].rules[2].style.backgroundImage = 'url(../img/round10a.gif)';
               document.styleSheets[0].rules[2].style.backgroundRepeat = 'repeat-x';
           }               
           break
       default : //branco
           cor_Menu_Ativa = '#000000';
           cor_Menu_NaoAtiva = '#FFFFFF'; 
           cor_Fonte_Menu_Ativa = '#FFFFFF';
           cor_Fonte_Menu_NaoAtiva = '#999999';
           cor_Submenu_Ativa = '#000000';
           cor_Submenu_NaoAtiva = '#FFFFFF';
           cor_Fonte_Submenu_Ativa = '#FFFFFF';
           cor_Fonte_Submenu_NaoAtiva = '#999999';
           break
      }
}

e agora voces podem me dizer onde esta meu erro? gostaria de mexer no posicionamento do menu para min poder por ele encima de uma figura brigado

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...