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" />
<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
Pergunta
Guest Fln
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
AKI A PARTE EM CSS AKI A PARTE EM JAVAe 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
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.