• 0
Sign in to follow this  
hunternh

Menu Vertical E Horizontal

Question

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>

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0
Guest --Marcos --

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 é [email protected]

Share this post


Link to post
Share on other sites
  • 0

Trabalho com html há bastante tempo, e agora que conheci vocês, só tenho elogios.

Consegui um menu simples com sub menu de fácil entendimento.

Vocês estão de PARABÉNS.

Att,

Wagner

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this