Ir para conteúdo

POWERED BY:

Arquivado

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

Raphael Vasconcelos

[Resolvido] Adicionar um submenu no submenu

Por , em Desenvolvimento frontend

Recommended Posts

Raphael Vasconcelos    0

Raphael Vasconcelos
Postado

Boa tarde, Galera

 

Bom eu to com um problema brabo aqui...

Estou tentando fazer um menu dropdown com pelo menos 2 niveis de submenu.

Pesquisando na internet eu achei um código pronto, porém ele tem apenas 1 nivel de submenu, ja entendi como funciona tirando a parte do position:relative pois nao entendi direito como ele funciona.Mas isso pesquisando com calma eu termino aprendendp, aprendi tudo o que sei sozinho e como css é extenso eu vou aumentando o conhecimento quando tenho a necessidade.

 

Bom, eu tentei seguir o padrao do pai para os filhos mas nao tive resultado..no maximo um ficou por cima do outro. Se puderem me explicar ficarei muito grato.

Segue o código e o máximo que consegui chegar, as outras tentativas nem aparecia:

<!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.menu .submenu{
  margin: 0px;
  padding: 0px;
  list-style: none;
  background-color: #FFFFFF;
  border: 1px solid #ccc;
  float: left; 
  height: 1%;
}
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="#">Empresa</a></li>
   <li class="submenu"><a href="#">Padrao Qualidade</a>
      <ul class="menu">
        <li><a href="#">Fotos da Frota</a></li>
        <li class="submenu"><a href="#">História</a>
        	<ul class="menu">
            	<li><a href="#">Pré - História</a></li>
                <li><a href="#">Pós - História</a></li>
            </ul>
        </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>

Vlw!Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Basta seguir a lógica:

 

/* oculta todos os <ul> que tenham <ul>'s como antecessores,
   isso vale para submenus de qualquer nível */
ul ul { display: none; }

/* exibe o ul descendente direto do <li> em estado :hover
   dessa forma, mantemos os submenus ocultos. Como todos os
   submenus estão contidos dentro de elementos <li>, não é
   necessário ficar declarando 'li:hover ul li:hover' */
li:hover > ul { display: block; }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

A diferença entre vertical ou horizontal está simplesmente na regra:

 

li { float: left; }

Que fará com que cada <li> flutue à esquerda do outro.

 

Sem mexer no posicionamento, você fará um menu abre-e-fecha conhecido pelo nome de menu acordeão que necessitará de Javascript para uma melhor experiência.

 

Outra alternativa para menus verticais, é o menu em cascata, que necessitará de outras regrinhas, para alterar sua funcionalidade:

 

/* alteramos o position para que o ul descendente receba absolute */
#menu li { position: relative; }
/* Posicionamos o submenu totalmente à esquerda, alinhado com o topo */
#menu li > ul { display: none; left: 100% position: absolute; top: 0; }
/* Exibição do menu
#menu li:hover > ul { display: block; }

Compartilhar este post

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

Informação importante

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

  Aceito