olá estou com um problema/duvida com esse menu aqui
eu peguei ele pronto na net comentei tudo que ele faz beleza..
o problema: se eu deixa-lo junto um ao lado do outro ok, e se eu deixa um só também ok
mas quando eu coloco um menu em uma celula da tabela eo outro em outra celula, o segundo não funciona
alguém poderia dar uma ajuda nisso ai pra mim?!
obrigdo!!!
codigo do menu:
<html>
<head>
<title>Menu horizontal e vertical</title>
<script type="text/javascript">
function vertical() {
var navItems = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i< navItems.length; i++) {
if(navItems[i].className == "submenu") {
navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";}
navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";}
}
}
}
function horizontal() {
var navItems = document.getElementById("barra").getElementsByTagName("li");
for (var i=0; i< navItems.length; i++) {
if((navItems[i].className == "menuvertical") || (navItems[i].className == "submenu"))
{
if(navItems[i].getElementsByTagName('ul')[0] != null)
{
navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";}
navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";}
}
}
}
}
</script>
<style type="text/css">
body { font: normal 62.5% verdana; }
ul.menubar
{
/* AQUI MUDA A POSIÇÃO DO MENU INDO PARA O MEIO */
margin: 0px;
/* AQUI MUDA A POSIÇÃO DO MENU INDO PARA O MEIO */
padding: 0px;
/* AQUI NÃO MUDA NADA */
background-color: #FFFFFF; /* IE6 Bug */
/* AQUI MUDA O TAMANHO DA FONTE DO MENU */
font-size: 12px;
}
ul.menubar .menuvertical
{
/* AQUI DA MAIS ESPAÇO ENTRE AS CELULAS E VAI MAIS PARA O MEIO O MENU */
margin: 0px;
/* AQUI AUMENTA O ESPAÇO DA CELULA DO MENU */
padding: 0px;
/* AQUI MUDA */
list-style: none;
/* AQUI MUDA A COR DE FUNDO DA CELULA MAS QUANDO PASSA O MOUSE EM CIMA SOME A COR */
background-color: #FFFFFF;
/* AQUI MUDA A GROSSURA DA BORDA E MUDA A COR */
border: 1px solid #CCC;
/* AQUI MUDA A POSIÇÃO DO MENU INDO PRA ESQUERDA, DIREITA E TAL */
float:left;
}
ul.menubar ul.menu
{
/* AQUI MUDA */
display: none;
/* AQUI MUDA O TAMANHO DA CELULA PRINCIAPAL DE ACORDO COM O TAMANHO DA CELULA QUE APARECE EM BAIXO */
position: absolute;
/* AQUI NÃO MUDA NADA */
margin: 0px;
}
ul.menubar a
{
/* AQUI MUDA O TAMANHO DA CELULA QUE ABRE NO MENU */
padding: 5px;
/* AQUI NÃO MUDA NADA */
display:block;
/* AQUI NÃO MUDA NADA */
text-decoration: none;
/* AQUI MUDA A COR DA FONTE DO MENU */
color: #CCC;
/* AQUI MUDA O TAMANHO DA CELULA DO MENU */
padding: 5px;
}
ul.menu,
ul.menu ul
{
/* AQUI NÃO MUDA NADA */
margin: 0;
/* AQUI NÃO MUDA NADA */
padding: 0;
/* AQUI NÃO MUDA NADA */
border-bottom: 1px solid #ccc;
/* AQUI MUDA A LARGURA DA CELULA INTERNA DO MENU */
width: 150px;
/* AQUI NÃO MUDA NADA */
background-color: #FFFFFF;
}
ul.menu li
{
/* AQUI NÃO MUDA NADA */
position: relative;
/* AQUI NÃO MUDA NADA */
list-style: none;
/* AQUI NÃO MUDA NADA */
border: 0px;
}
ul.menu li a
{
/* AQUI NÃO MUDA NADA */
display: block;
/* AQUI MUDA */
text-decoration: none;
/* AQUI MUDA A LARGURA DA BORDA DAS CELULAS DE DENTRO DO MENU */
border: 1px solid #ccc;
/* AQUI NÃO MUDA NADA */
border-bottom: 0px;
/* AQUI MUDA A COR DOS LINKS DAS CELULAS INTERNAS DO MENU */
color: #777;
/* AQUI MUDA OS TAMANHOS DAS CELULAS INTERNAS DO MENU */
padding: 5px 10px 5px 5px;
}
/* Fix IE. Hide from IE Mac \*/
/* AQUI NÃO MUDA NADA */
* html ul.menu li { float: left; height: 1%; }
/* AQUI NÃO MUDA NADA */
* html ul.menu li a { height: 1%; }
/* End */
ul.menu ul
{
position: absolute;
display: none;
left: 149px; /* Set 1px less than menu width */
top: 0px;
}
ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */
ul.menu li.submenu { background: transparent url(arrow.gif) right center no-repeat; }
/* AQUI MUDA A COR DO LINK QUANDO O MOUSE ESTA EM CIMA DELE */
ul.menu li a:hover { color: #FF0000; }
</style>
</head>
<body onLoad="vertical();horizontal();">
<center>
<br>
<br>
<br>
<br>
<ul id="barra" class="menubar">
<li class="menuvertical"><a href="#">Menu 1</a>
<ul id="nav" class="menu">
<li><a href="#">Home</a></li>
<li class="submenu"><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li class="submenu"><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li class="submenu"><a href="#">Hosting</a>
<ul>
<li><a href="#">Dedicated</a></li>
<li class="submenu"><a href="#">Virtual</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
<li><a href="#">Shared</a></li>
<li><a href="#">Managed</a></li>
</ul>
</li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li class="submenu"><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</li>
<li class="menuvertical"><a href="#">Menu 3</a>
<ul id="nav" class="menu">
<li><a href="#">Home</a></li>
<li class="submenu"><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li class="submenu"><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li class="submenu"><a href="#">Hosting</a>
<ul>
<li><a href="#">Dedicated</a></li>
<li class="submenu"><a href="#">Virtual</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
<li><a href="#">Shared</a></li>
<li><a href="#">Managed</a></li>
</ul>
</li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li class="submenu"><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</center>
</body>
</html>
Pergunta
Guest --rei fernando --
olá estou com um problema/duvida com esse menu aqui
eu peguei ele pronto na net comentei tudo que ele faz beleza..
o problema: se eu deixa-lo junto um ao lado do outro ok, e se eu deixa um só também ok
mas quando eu coloco um menu em uma celula da tabela eo outro em outra celula, o segundo não funciona
alguém poderia dar uma ajuda nisso ai pra mim?!
obrigdo!!!
codigo do menu:
<html> <head> <title>Menu horizontal e vertical</title> <script type="text/javascript"> function vertical() { var navItems = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i< navItems.length; i++) { if(navItems[i].className == "submenu") { navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";} navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";} } } } function horizontal() { var navItems = document.getElementById("barra").getElementsByTagName("li"); for (var i=0; i< navItems.length; i++) { if((navItems[i].className == "menuvertical") || (navItems[i].className == "submenu")) { if(navItems[i].getElementsByTagName('ul')[0] != null) { navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";} navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";} } } } } </script> <style type="text/css"> body { font: normal 62.5% verdana; } ul.menubar { /* AQUI MUDA A POSIÇÃO DO MENU INDO PARA O MEIO */ margin: 0px; /* AQUI MUDA A POSIÇÃO DO MENU INDO PARA O MEIO */ padding: 0px; /* AQUI NÃO MUDA NADA */ background-color: #FFFFFF; /* IE6 Bug */ /* AQUI MUDA O TAMANHO DA FONTE DO MENU */ font-size: 12px; } ul.menubar .menuvertical { /* AQUI DA MAIS ESPAÇO ENTRE AS CELULAS E VAI MAIS PARA O MEIO O MENU */ margin: 0px; /* AQUI AUMENTA O ESPAÇO DA CELULA DO MENU */ padding: 0px; /* AQUI MUDA */ list-style: none; /* AQUI MUDA A COR DE FUNDO DA CELULA MAS QUANDO PASSA O MOUSE EM CIMA SOME A COR */ background-color: #FFFFFF; /* AQUI MUDA A GROSSURA DA BORDA E MUDA A COR */ border: 1px solid #CCC; /* AQUI MUDA A POSIÇÃO DO MENU INDO PRA ESQUERDA, DIREITA E TAL */ float:left; } ul.menubar ul.menu { /* AQUI MUDA */ display: none; /* AQUI MUDA O TAMANHO DA CELULA PRINCIAPAL DE ACORDO COM O TAMANHO DA CELULA QUE APARECE EM BAIXO */ position: absolute; /* AQUI NÃO MUDA NADA */ margin: 0px; } ul.menubar a { /* AQUI MUDA O TAMANHO DA CELULA QUE ABRE NO MENU */ padding: 5px; /* AQUI NÃO MUDA NADA */ display:block; /* AQUI NÃO MUDA NADA */ text-decoration: none; /* AQUI MUDA A COR DA FONTE DO MENU */ color: #CCC; /* AQUI MUDA O TAMANHO DA CELULA DO MENU */ padding: 5px; } ul.menu, ul.menu ul { /* AQUI NÃO MUDA NADA */ margin: 0; /* AQUI NÃO MUDA NADA */ padding: 0; /* AQUI NÃO MUDA NADA */ border-bottom: 1px solid #ccc; /* AQUI MUDA A LARGURA DA CELULA INTERNA DO MENU */ width: 150px; /* AQUI NÃO MUDA NADA */ background-color: #FFFFFF; } ul.menu li { /* AQUI NÃO MUDA NADA */ position: relative; /* AQUI NÃO MUDA NADA */ list-style: none; /* AQUI NÃO MUDA NADA */ border: 0px; } ul.menu li a { /* AQUI NÃO MUDA NADA */ display: block; /* AQUI MUDA */ text-decoration: none; /* AQUI MUDA A LARGURA DA BORDA DAS CELULAS DE DENTRO DO MENU */ border: 1px solid #ccc; /* AQUI NÃO MUDA NADA */ border-bottom: 0px; /* AQUI MUDA A COR DOS LINKS DAS CELULAS INTERNAS DO MENU */ color: #777; /* AQUI MUDA OS TAMANHOS DAS CELULAS INTERNAS DO MENU */ padding: 5px 10px 5px 5px; } /* Fix IE. Hide from IE Mac \*/ /* AQUI NÃO MUDA NADA */ * html ul.menu li { float: left; height: 1%; } /* AQUI NÃO MUDA NADA */ * html ul.menu li a { height: 1%; } /* End */ ul.menu ul { position: absolute; display: none; left: 149px; /* Set 1px less than menu width */ top: 0px; } ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */ ul.menu li.submenu { background: transparent url(arrow.gif) right center no-repeat; } /* AQUI MUDA A COR DO LINK QUANDO O MOUSE ESTA EM CIMA DELE */ ul.menu li a:hover { color: #FF0000; } </style> </head> <body onLoad="vertical();horizontal();"> <center> <br> <br> <br> <br> <ul id="barra" class="menubar"> <li class="menuvertical"><a href="#">Menu 1</a> <ul id="nav" class="menu"> <li><a href="#">Home</a></li> <li class="submenu"><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li class="submenu"><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li class="submenu"><a href="#">Hosting</a> <ul> <li><a href="#">Dedicated</a></li> <li class="submenu"><a href="#">Virtual</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> <li><a href="#">Shared</a></li> <li><a href="#">Managed</a></li> </ul> </li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li class="submenu"><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </ul> </li> <li class="menuvertical"><a href="#">Menu 3</a> <ul id="nav" class="menu"> <li><a href="#">Home</a></li> <li class="submenu"><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li class="submenu"><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li class="submenu"><a href="#">Hosting</a> <ul> <li><a href="#">Dedicated</a></li> <li class="submenu"><a href="#">Virtual</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> <li><a href="#">Shared</a></li> <li><a href="#">Managed</a></li> </ul> </li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li class="submenu"><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </ul> </li> </ul> </center> </body> </html>Link para o comentário
Compartilhar em outros sites
2 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.