Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

May_May_Chan

[Resolvido] Menu horizontal com sub menus...

Por , em Javascript

Recommended Posts

May_May_Chan    0

May_May_Chan
Postado

Olá pessoal do IMasters.

 

Estou com um problema no código que peguei nesse blog: http://www.yogodoshi.com/blog/web-developer/aprenda-a-criar-um-menu-drop-down-com-css-e-javascript#comment-201557

 

O código já salvou minha vida mas agora estou precisando adicionar mais submenus nele e não consegui...

 

Mais ou menos assim mas seguindo na horizontal, como está no próprio código do blog:

 

Menu

--Submenu1

----submenu2

------submenu3

Menu

--submenu

Menu

--submenu1

----submenu2

 

E assim vai.

 

Se vcs pudessem me ajudar eu agradeceria muito! \o/

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

May_May_Chan    0

May_May_Chan
Postado

Posta o código do menu

 

Segue o Código completo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testando o menu drop-down</title>
<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 .submenu{
 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;
}

ul.menu li sup{
 font-weight:bold;
 font-size:7px;
 color: red;
}

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

<script type="text/javascript">
function horizontal() {

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

  for (var i=0; i< navItems.length; i++) {
     if(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>

</head>

<body onload="horizontal();">

<ul id="menu_dropdown" class="menubar">
  <li class="submenu"><a href="#">Notícias</a></li>
  <li class="submenu"><a href="#">Institucional</a>
     <ul class="menu">
       <li><a href="#">Fotos da Frota</a></li>
       <li><a href="#">História</a></li>
       <li><a href="#">Missão</a></li>
       <li><a href="#">Visão</a></li>
   <li><a href="#">Instalações</a></li>
     </ul>
  </li>
  <li class="submenu"><a href="#">Qualidade</a>
     <ul class="menu">
       <li><a href="#">Resultado dos indicadores</a></li>
       <li><a href="#">Informativos da Qualidade</a></li>
       <li><a href="#">Política de Qualidade</a></li>
       <li><a href="#">Projetos Sociais</a></li>
   <li><a href="#">Resultado da pesquisa de satisfação</a></li>
     </ul>
  </li>
  <li class="submenu"><a href="#">Serviços</a>
     <ul class="menu">
       <li><a href="#">Links Úteis</a></li>
       <li><a href="#">Itinerário</a></li>
       <li><a href="#">Mapa das Rotas<sup>novo</sup></a></li>
     </ul>
  </li>
     <li class="submenu"><a href="#">Contato</a>
     <ul class="menu">
       <li><a href="#">Colabore Conosco</a></li>
       <li><a href="#">Enquetes finalizadas</a></li>
       <li><a href="#">Fale Conosco</a></li>
   <li><a href="#">Trabalhe Conosco</a></li>
     </ul>
  </li>
  <li class="submenu"><a href="#">Localize seu ônibus</a></li>
</ul>

</body>
</html>

 

Eu partiria para o Jquery!

Veja esse tutorial: http://www.leonelcun...horizontal.html

 

Está explicando legal, mas se tiver alguma dúvida é só postar.

 

Gostei muito da sua dica, obrigada! :D

O problema eh que já fiz muita coisa seguindo o modelo que enviei, só encontrei problemas agora que tive que adicionar mais um nível de submenu. :pinch:

Se for o caso, terei de mudar todos os menus para esse com Jquery... :upset:--'

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

Jquery é um framework do JavaScript,

ele facilita a crianção e manutenção de código, além de reduzir drasticamente

o tamanho deles.

 

Porém nada te impede de ter tudo em JavaScript puro

e um menu ou trecho em Jquery.

 

Não é bonito e nem o ideal, mas para resolver a situação

dentro do prazo pode ser uma pedida. E depois você adapta o resto.

 

Quanto ao seu código, amanhã de manhã se ninguém responder eu

dou uma olhada com calma vejo o que da para adaptar.

 

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

fiz uma adaptação para você testar,

se achar que resolve, ai damos uma melhorada nele

 

completo:

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testando o menu drop-down</title>
<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 .submenu{
 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;
}

ul.menu li sup{
 font-weight:bold;
 font-size:7px;
 color: red;
}

/* 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; }

.subterceiro{

display: none;

}

</style>

<script type="text/javascript">
function horizontal() {

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

  for (var i=0; i< navItems.length; i++) {
 	if(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";}
    	}
 	}
  }

}

/* CRIAR 3º Menu */

var htmltags = new Array();

function mostrar3(classe) {

var htmltags = document.getElementsByTagName("*");

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

	if (htmltags[i].className == classe) {

		htmltags[i].style.display = "block";

	}
}
}


</script>

</head>

<body onload="horizontal();">

<ul id="menu_dropdown" class="menubar">
  <li class="submenu"><a href="#">Notícias</a></li>
  <li class="submenu"><a href="#">Institucional</a>
 	<ul class="menu">
<li class="terceiro" onmouseover="mostrar3('subterceiro');"><a href="#">Teste</a>

		<li class="subterceiro">Texto</li>
		<li class="subterceiro">Texto</li>
		<li class="subterceiro">Texto</li>
</li>
   	<li><a href="#">Fotos da Frota</a></li>
   	<li><a href="#">História</a></li>
   	<li><a href="#">Missão</a></li>
   	<li><a href="#">Visão</a></li>
<li><a href="#">Instalações</a></li>
 	</ul>
  </li>
  <li class="submenu"><a href="#">Qualidade</a>
 	<ul class="menu">
   	<li><a href="#">Resultado dos indicadores</a></li>
   	<li><a href="#">Informativos da Qualidade</a></li>
   	<li><a href="#">Política de Qualidade</a></li>
   	<li><a href="#">Projetos Sociais</a></li>
<li><a href="#">Resultado da pesquisa de satisfação</a></li>
 	</ul>
  </li>
  <li class="submenu"><a href="#">Serviços</a>
 	<ul class="menu">
   	<li><a href="#">Links Úteis</a></li>
   	<li><a href="#">Itinerário</a></li>
   	<li><a href="#">Mapa das Rotas<sup>novo</sup></a></li>
 	</ul>
  </li>
 	<li class="submenu"><a href="#">Contato</a>
 	<ul class="menu">
   	<li><a href="#">Colabore Conosco</a></li>
   	<li><a href="#">Enquetes finalizadas</a></li>
   	<li><a href="#">Fale Conosco</a></li>
<li><a href="#">Trabalhe Conosco</a></li>
 	</ul>
  </li>
  <li class="submenu"><a href="#">Localize seu ônibus</a></li>
</ul>

</body>
</html>

 

 

 

 

O código que fiz foi para simular um getElementByClass que não existe no javascript,

apenas o ById.

 

function mostrar3(classe) {

var htmltags = document.getElementsByTagName("*");

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

	if (htmltags[i].className == classe) {

		htmltags[i].style.display = "block";

	}
}
}

 

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

May_May_Chan    0

May_May_Chan
Postado

fiz uma adaptação para você testar,

se achar que resolve, ai damos uma melhorada nele

 

completo:

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testando o menu drop-down</title>
<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 .submenu{
 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;
}

ul.menu li sup{
 font-weight:bold;
 font-size:7px;
 color: red;
}

/* 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; }

.subterceiro{

display: none;

}

</style>

<script type="text/javascript">
function horizontal() {

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

  for (var i=0; i< navItems.length; i++) {
 	if(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";}
    	}
 	}
  }

}

/* CRIAR 3º Menu */

var htmltags = new Array();

function mostrar3(classe) {

var htmltags = document.getElementsByTagName("*");

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

	if (htmltags[i].className == classe) {

		htmltags[i].style.display = "block";

	}
}
}


</script>

</head>

<body onload="horizontal();">

<ul id="menu_dropdown" class="menubar">
  <li class="submenu"><a href="#">Notícias</a></li>
  <li class="submenu"><a href="#">Institucional</a>
 	<ul class="menu">
<li class="terceiro" onmouseover="mostrar3('subterceiro');"><a href="#">Teste</a>

		<li class="subterceiro">Texto</li>
		<li class="subterceiro">Texto</li>
		<li class="subterceiro">Texto</li>
</li>
   	<li><a href="#">Fotos da Frota</a></li>
   	<li><a href="#">História</a></li>
   	<li><a href="#">Missão</a></li>
   	<li><a href="#">Visão</a></li>
<li><a href="#">Instalações</a></li>
 	</ul>
  </li>
  <li class="submenu"><a href="#">Qualidade</a>
 	<ul class="menu">
   	<li><a href="#">Resultado dos indicadores</a></li>
   	<li><a href="#">Informativos da Qualidade</a></li>
   	<li><a href="#">Política de Qualidade</a></li>
   	<li><a href="#">Projetos Sociais</a></li>
<li><a href="#">Resultado da pesquisa de satisfação</a></li>
 	</ul>
  </li>
  <li class="submenu"><a href="#">Serviços</a>
 	<ul class="menu">
   	<li><a href="#">Links Úteis</a></li>
   	<li><a href="#">Itinerário</a></li>
   	<li><a href="#">Mapa das Rotas<sup>novo</sup></a></li>
 	</ul>
  </li>
 	<li class="submenu"><a href="#">Contato</a>
 	<ul class="menu">
   	<li><a href="#">Colabore Conosco</a></li>
   	<li><a href="#">Enquetes finalizadas</a></li>
   	<li><a href="#">Fale Conosco</a></li>
<li><a href="#">Trabalhe Conosco</a></li>
 	</ul>
  </li>
  <li class="submenu"><a href="#">Localize seu ônibus</a></li>
</ul>

</body>
</html>

 

 

 

 

O código que fiz foi para simular um getElementByClass que não existe no javascript,

apenas o ById.

 

function mostrar3(classe) {

var htmltags = document.getElementsByTagName("*");

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

	if (htmltags[i].className == classe) {

		htmltags[i].style.display = "block";

	}
}
}

 

:thumbsup:

 

Oi Gabriel, obrigada por toda a ajuda!

 

Vou dar uma estudada no link que você mandou, da próxima eu já começo com Jquery. :thumbsup:

Quanto a sua adaptação, eh mais ou menos isso que eu quero mas gostaria que ficasse no padrão do menu, tipo, abrindo a direita com o primeiro submenu. ^_^

 

Vlw! ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito