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

Menu

Guest --Rodrigo --

Perguntado por Guest --Rodrigo --,

 Share

Pergunta

Guest --Rodrigo --

Guest --Rodrigo --

Postado
Postado

Pessoal, eu queria uma pequena ajuda, se for possível e claro.

Fiz uma alteração no menu que encontrei na net, bem legal e simples.

Fiz algumas alteração nele para o que desejo realmente usar em meu site, e sempre está dando erro de página, já tentei verificar varrei tudo e não consegui tirar esse erro de página que e causado pelo código do menu, e com isso afeta o site pois não roda algumas extensões como o SWF em meu site.

alguém poderia me ajudar a verificar ou encontrar o erro para me ajustar....

Estarei mandando o código original de onde fiz alteração.

Código original.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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
{
   margin: 0px;
   padding: 0px;
   background-color: #FFFFFF; /* IE6 Bug */
   font-size: 100%;
   }

ul.menubar .menuvertical
{
   margin: 0px;
     padding: 0px;
     list-style: none;
     background-color: #FFFFFF;
   border: 1px solid #ccc;
   float:left;
}

ul.menubar ul.menu
{
   display: none;
   position: absolute;
   margin: 0px;
}

ul.menubar a
{
   padding: 5px;
   display:block;
   text-decoration: none;
   color: #777;
   padding: 5px;
}


ul.menu,
ul.menu ul
{
   margin: 0;
   padding: 0;
   border-bottom: 1px solid #ccc;
   width: 150px; /* Width of Menu Items */
   background-color: #FFFFFF; /* IE6 Bug */
}

ul.menu li
{
   position: relative;
   list-style: none;
   border: 0px;
}

ul.menu li a
{
   display: block;
   text-decoration: none;
   border: 1px solid #ccc;
   border-bottom: 0px;
   color: #777;
   padding: 5px 10px 5px 5px;
}

/* Fix IE. Hide from IE Mac \*/
* html ul.menu li { float: left; height: 1%; }
* 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; }

ul.menu li a:hover { color: #E2144A; }

</style>
</head>
<body onload="vertical();horizontal();">
<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>
<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 2</a></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>
    
</body>
</html>
Código modificado. 
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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 = "#F2F5F7";}
      }
   }

}

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 = "#F2F5F7";}
            navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#F2F5F7";}
         }
      }
   }

}
</script>
<style type="text/css">

body { font: normal 62.5% verdana; }

ul.menubar
{
   margin: 0px;
   padding: 0px;
   background-color: #F2F5F7; /* IE6 Bug */
   font-size: 100%;
   }

ul.menubar .menuvertical
{
   margin: 0px;
     padding: 0px;
     list-style: none;
     background-color: #F2F5F7;
   border: 1px solid #ccc;
   float:left;
}

ul.menubar ul.menu
{
   display: none;
   position: absolute;
   margin: 0px;
}

ul.menubar a
{
   padding: 5px;
   display:block;
   text-decoration: none;
   color: #777;
   padding: 5px;
}


ul.menu,
ul.menu ul
{
   margin: 0;
   padding: 0;
   border-bottom: 1px solid #ccc;
   width: 150px; /* Width of Menu Items */
   background-color: #F2F5F7; /* IE6 Bug */
}

ul.menu li
{
   position: relative;
   list-style: none;
   border: 0px;
}

ul.menu li a
{
   display: block;
   text-decoration: none;
   border: 1px solid #ccc;
   border-bottom: 0px;
   color: #777;
   padding: 5px 10px 5px 5px;
}

/* Fix IE. Hide from IE Mac \*/
* html ul.menu li { float: left; height: 1%; }
* 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 a:hover { color: #E2144A; }
</style>
</head>
<body onLoad="vertical();horizontal();">
<ul id="nav" class="menu">
  <li class="submenu"><a href="#"><strong>Redes e servidores</strong><br />
  </a>
    <ul>
     <li><a href="#">Administração de Rede</a></li>
      <li><a href="#">Administração de Servidores</a></li>
      <li><a href="#">Anti-Vírus Servidor</a></li>
      <li><a href="#">Redes e Wireless</a></li>
      <li><a href="#">Implementação de Servidores</a></li>
      <li><a href="#">TS- Terminal serviçe</a></li>
      <li><a href="#">Conexao remota</a></li>
      <li><a href="#">Manutenção de servidor</a></li>
      <li><a href="#">VPN - Rede Privada Virtual</a></li>
    </ul>
  </li>
  <li class="submenu"><a href="#"><strong>Empresa</strong><br />
    </a>
      <ul>
        <li><a href="#">Miss&atilde;o</a></li>
        <li><a href="#">Clientes</a></li>
        <li><a href="#">Parcerias</a></li>
        <li><a href="#">Tecnologia</a></li>
        <li><a href="#">Trabalhe conosco</a></li>
      </ul>
  </li>
  <li class="submenu"><a href="#"><strong>Cria&ccedil;&atilde;o de Sites</strong></a>
    <ul>
      <li><a href="#">Registro de Domínio</a></li>
      <li><a href="#">Criação de e-mails</a></li>
      <li class="submenu"><a href="#">Desenvolvimento de WebSites</a>
        <ul>
         <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>
        </ul>
      </li>
    </ul>
  </li>
  <li class="submenu"><a href="#"><strong>Monitora&ccedil;&atilde;o  CFTV</strong><br />
  </a>
    <ul>
      <li><a href="#">Projeto</a></li>
      <li><a href="#">Manutenção</a></li>
      <li><a href="#">Instalação</a></li>
    </ul>
  </li>
  <li class="submenu"><a href="#"><strong>Suporte T&eacute;cnico</strong><br />
  </a>
    <ul>
      <li><a href="#">Manutenção de Computadores</a></li>
      <li><a href="#">Server e Client</a></li>
      <li><a href="#">Cadastro</a></li>
      <li><a href="#">Drivers e Downloads</a></li>
    </ul>
  </li>
<li class="submenu"><a href="#"><strong>Visitas</strong><br />
</a>
    <ul>
      <li><a href="#">Solicitar visita</a></li>
    </ul>
  </li>
  <li class="submenu"><a href="#"><strong>Contato</strong><br />
</a>
    <ul>
      <li><a href="#">Fale Conosco</a></li>
    </ul>
  </li>
</ul>
<br/>
</body>
</html>

Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

  • 0
fercosmig

fercosmig

Postado
Postado

No original tem 2 menus, no modificado você deixou somente um mas esta chamando a função horizontal que era do segundo.

retire a parte em vermelho, testei aqui sem problemas

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Menu horizontal e vertical</title>

.

.

.

}

function horizontal() {

var navItems = document.getElementById("barra").getElementsByTagName("li");

for (var i=0; i< navItems.length; i++) {

if((navItems.className == "menuvertical") || (navItems.className == "submenu"))

{

if(navItems.getElementsByTagName('ul')[0] != null)

{

navItems.onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#F2F5F7";}

navItems.onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#F2F5F7";}

}

}

}

}

</script>

<style type="text/css">

.

.

.

ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */

ul.menu li a:hover { color: #E2144A; }

</style>

</head>

<body onLoad="vertical();horizontal();">

<ul id="nav" class="menu">

<li class="submenu"><a href="#"><strong>Redes e servidores</strong><br />

</a>

<ul>

<li><a href="#">Administração de Rede</a></li>

<li><a href="#">Administração de Servidores</a></li>

<li><a href="#">Anti-Vírus Servidor</a></li>

<li><a href="#">Redes e Wireless</a></li>

.

.

.

<li><a href="#">Fale Conosco</a></li>

</ul>

</li>

</ul>

<br/>

</body>

</html>

Link para o comentário
Compartilhar em outros sites

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,5k
    • Posts
      652,4k
×
×
  • Criar Novo...