Problema/duvida Em Menu...

Março 27, 2007

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>
&lt;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>

.Andreia. · Março 27, 2007

é só voce ajeitar a fonte porque como está tendo de tabela agora, ele perdeu as configs

<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">
<table border="1">
<tr>
<td>
<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>
</td>
<td>
<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>
</td>
</ul>
</li>
</ul>
</li>
</ul>
</tr>
</table>
</center>    
</body> 
</html>

rei fernando · Março 27, 2007

maravilha! funcionou perfeitamente!

obrigado andreia!

Entrar

Problema/duvida Em Menu...

Pergunta

Guest --rei fernando --

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

.Andreia.

Link para o comentário

Compartilhar em outros sites

rei fernando

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades