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

Dúvidas com menu CSS + Java (menu horizontal + vertical)

Bia-g

Perguntado por Bia-g,

 Share

Pergunta

Bia-g

Bia-g

Postado
Postado

Boa tarde,

peguei um código aqui do scriptbrasil (abaixo) em que tenho a possibilidade de 2 tipos de menu um vertical e outro horizontal.

Tentei inverter a ordem deles para que o horizontal viesse primeiro e depois o vertical, mas quando faço isso o menu vertical deixa de funcionar corretamente.

Como não entendo muito bem recorro a vocês.

Podem me ajudar?

Obrigada

(segue o 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>[/codebox]

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0
fercosmig

fercosmig

Postado
Postado

Testei no FF, funfou de boa

<!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="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>


<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />


<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>




</body>
</html>[/codebox]

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,1k
    • Posts
      651,8k
×
×
  • Criar Novo...