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

Menu Vertical E Horizontal

hunternh

Perguntado por hunternh,

 Share

Pergunta

hunternh

hunternh

Postado
Postado

Esse código permite colocar quantos submenus forem necessário sem precisar alterar o css, estou aberto a sugestões para melhoria do código e simplificação espero que gostem.

Se for usar o vertical, retire o código javascript do horizontal e vice-e-versa.

A imagem utilizada aqui pode ser baixada aqui: http://rapidshare.com/files/17589906/arrow.gif.html

Código: 

<!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" xml:lang="pt-br" 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 hr 
{ 
   width: 148px; 
   padding: 0px; 
   margin: 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>

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0
Guest --Marcos --

Guest --Marcos --

Postado
Postado

Olá! gostei muito deste código já estou usando!

o único problema é que em ie 6 ou menor dá problema quando tem campos combobox em baixo, você tem alguma maneira de resolver isto ???

valeu!!

meu email é mpp.ata@gmail.com

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