[Resolvido] Menu com submenu

tiagocaus · Fevereiro 29, 2012

Achei um codigo na web de um menu, só que ele não esconde os demais submenu,

Alguem poderia me ajudar como fazer para funcionar corretamente?

Veja o código:

<!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=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
@charset "utf-8";
/* CSS Document */


.menu{list-style:none; margin:2px 0 0 400px; float:left;}

.menu li{position:relative; float:left; background-color: #FFF;}

.menu li a{font-size:1.3em;  color:#333; text-decoration:none; padding:10px 20px; display:block;}

.menu li a:hover{background:#333; color:#fff; -moz-box-shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 #ccc; text-shadow:0px 0px 5px #fff;}

.menu li ul{position:absolute; top:23px; left:-20px; background-color:#fff; display:none; margin: 0; padding: 0; outline: none; border:1px solid #2492FF;}

.menu li:hover ul ul{display:none;}

.menu li:hover ul, .menu li ul li:hover ul, .menu li.over ul, .menu li ul li.over ul{display:block;}

.menu li ul li{border-bottom:1px solid #2492FF; display:block; width:200px;}

li.border0{border:0;}

.menu li ul li ul{z-index:900; top:0; left:200px; background:#eaeaea;}


/*Fix IE. Hide from IE Mac\*/
* html .menu {margin-left:175px; }
/*End*/

#BarraFixa {
  background-image:url(../images/fundo_barra_fixa.png);
  background-repeat:repeat-x;
  top:0;
   display:block;
   position:fixed;
   z-index:1000;
  width: 100%;
  height:40px;
  color:#666666;
  box-shadow:0 0 10px #333;
  -moz-box-shadow:0 0 10px #333;
  -webkit-box-shadow:0 0 10px #333;
  -khtml-box-shadow:0 0 10px #333;
  border-top:2px solid #9A9A9A\9;
   overflow: visible;
   line-height:1;
  /* Hacks for IE */
   _display:none;
  /****************/
}

/*Fix IE. Hide from IE Mac\*/
* html .menu {margin-left:175px; }
/*End*/
</style>

</head>

<body>

<div id="BarraFixa">   
 <ul class="menu">


  <li><a href="#" title="Porftolio">Menu</a>
    <ul>
      <li><a href="#">SubNivel 1 »</a>
        <ul>
 <li><a href="#">SubNivel 2 »</a>
<ul>
 <li><a href="#">SubNivel 3 »</a>
<ul>
 <li><a href="#">SubNivel 4 »</a>  </li>
</ul>
 </li>
</ul>
 </li>
      </ul>
      </li>
      <li><a href="#">SunNivel 1</a></li>
    </ul>
  </li></ul></div>
</div>

</body>
</html>

Giovani · Fevereiro 29, 2012

Nenhum destes aqui te ajudam?

tiagocaus · Fevereiro 29, 2012

Desculpa mas esse que estou mostrando já esta todo pronto, esse código ai coloquei de forma simplificada e gostei muito por ser pratico.

Poderia dar uma olhada, certamente com seu conhecimento ira encontrar a solução.

Muito obrigado.

NetBoy16 · Fevereiro 29, 2012

Nao tenho tempo pra ver todo o codigo mas vou te dar o caminho, seguinte, vamos supor que você tem 3 menus:home, contato e empresa com seus submenus, dentro de cada um desse menus no caso teria uma nova ul com novas li's dentro.

Oque você faria seria o seguinte:

#home:hover {
/* aqui vai a estilizacao pra mostrar o submenu e oque mais você necessitar */
}

#home:hover #contato, #empresa {
/* aqui você faz a estilizacao para esconder os menus #contato e #empresa ao passar o mouse em cima do menu #home, e assim se repete pro restante dos menus, colocando na ordem correta
}

Espero que isso te de uma nocao, caso você nao entenda outros membros, ou até eu quando tiver mais temp odisponivel posso te ajudar melhor.

Marrabel · Fevereiro 29, 2012

Aqui está assim:

Quando eu passo o mouse no "Menu", aparece os dois "Sub Menu 1" e quando passo o mouse no primeiro "Sub Menu 1", aparece o "Sub Menu 2, 3 e 4".

Pra mim não tem nada de errado. A não ser o fato do "Sub Menu 2,3,4 estarem um ao lado do outro. É isso?

Em qual navegador você testou? Por que aqui só não apareceu nada no IE6, de resto tá normal.

NetBoy16 · Fevereiro 29, 2012

Se quando faz o hover num submenu de um menu e aparece o submenu de outro menu, entao você vai ter que revisar seus :hover's pra deixar apenas :hover nos menus e fazer aqui que te falei.

tiagocaus · Março 1, 2012

Isso meu amigo Marrabel, é exatamente isso. Esses sub-menus só deveriam aparecer quando o mouse estiver sobre o seu antecessor menu, entende?

É isso que não estou sabendo mudar. Poderia ajudar?

Muito obrigado pela sua compreensão.

Marrabel · Março 1, 2012

Se o "SubMenu 2,3,4" pertencem ao "SubMenu 1" tire os "<ul>" e só feche no final

Olha o seu:

<li><a href="#">SubNivel 1 »</a>
<ul>
 <li><a href="#">SubNivel 2 »</a>
<ul>
 <li><a href="#">SubNivel 3 »</a>
 <ul>
 <li><a href="#">SubNivel 4 »</a>  </li>
</ul>
</li>
</ul>

Fico meio bagunçado e confuso. Você colocou um "<ul>" em cada submenu que pertencia ao "submenu1", por isso ela ficou uma ao lado da outra...

Tente assim

Exemplo:


<li><a href="#">SubMenu1</a>
 <ul>
  	<li><a href="#">SubMenu2</a>
  	<li><a href="#">SubMenu3</a>
  	<li><a href="#">SubMenu4</a>
 <ul>
</li>

Espero ter ajudado.

tiagocaus · Março 1, 2012

Amigão, segui sua orientação e consegui ter uma boa noção do meu erro, mas o menu não ficou como deveria.

Por favor, atualize o seu codigo com o meu abaixo e veja como esta aparecendo, ele mostra os demais antes de passar o mouser sobre o menu que tem a seta >>, veja:

<div id="BarraFixa">   
 <ul class="menu">

<li><a href="#">SubMenu1</a>
 <ul>
       <li><a href="#">SubMenu2 >></a>
       	<ul>
               <li><a href="#">SubMenu3</a>
	<li><a href="#">Blabla >></a>
               	<ul>
                       <li> <a href="#">dasdasda</a>
                       <li> <a href="#">dasdasda</a>
                       <li> <a href="#">dasdasda</a>
                       <li> <a href="#">dasdasda >></a>
                       		<ul>
                                       <li> <a href="#">dasdasda</a>
                      			<li> <a href="#">dasdasda</a>
                     			<li> <a href="#">dasdasda</a>
                                       </ul>
          		</ul>
      	    	</ul>
       <li><a href="#">SubMenu3</a>
       <li><a href="#">SubMenu4</a>

</ul>
</ul>
</div>

Marrabel · Março 1, 2012

Me desculpe, eu esqueci de um detalhe no meu exemplo.

Os submenus que não vao ter mais submenus, deve-se fechar a tag "LI"

Exemplo com 4 niveis:


<ul class="menu">
<li><a href="#">Principal</a>
 		<ul>
  			<li><a href="#">SubMenu 1</a></li>
  			<li><a href="#">SubMenu 2</a>
			<ul>
					<li><a href="#">SubSubMenu1</a></li>
					<li><a href="#">SubSubMenu2</a>
 						<ul>
  							<li><a href="#">SubSubSubMenu1</a></li>
  							<li><a href="#">SubSubSubMenu2</a>
   							<ul>
     								<li><a href="#">SubSubSubSubMenu1</a></li>
     								<li><a href="#">SubSubSubSubMenu2</a></li>
   							</ul>
 							</li>
						</ul>
				</li>
  				</ul>
  			</li>
 		</ul>
</li>
</ul>

Daí é só arrumar o CSS

tiagocaus · Março 1, 2012

kkkkk, mas é o CSS que não estou sabendo fazer....

tiagocaus · Março 1, 2012

Amigão, só falta esse CSS para finalizar, me da uma luz....rsrsrs...

Abração.

NetBoy16 · Março 1, 2012

Oque exatamente você precisa quanto ao css ?

tiagocaus · Março 1, 2012

Ele mostra os demais menu antes de passar o mouser sobre o menu que tem a seta >>.

Veja:

<style type="text/css">
.menu{list-style:none; margin:2px 0 0 400px; float:left;}
.menu li{position:relative; float:left; background-color: #FFF;}
.menu li a{font-size:1.3em;  color:#333; text-decoration:none; padding:10px 20px; display:block;}
.menu li a:hover{background:#333; color:#fff; -moz-box-shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 #ccc; text-shadow:0px 0px 5px #fff;}
.menu li ul{position:absolute; top:23px; left:-20px; background-color:#fff; display:none; margin: 0; padding: 0; outline: none; border:1px solid #2492FF;}
.menu li:hover ul ul{display:none;}
.menu li:hover ul, .menu li ul li:hover ul, .menu li.over ul, .menu li ul li.over ul{display:block;}
.menu li ul li{border-bottom:1px solid #2492FF; display:block; width:200px;}
li.border0{border:0;}
.menu li ul li ul{z-index:900; top:0; left:200px; background:#eaeaea;}
</style>


<ul class="menu">
       <li><a href="#">Principal</a>
               <ul>
                       <li><a href="#">SubMenu 1</a></li>
                       <li><a href="#">SubMenu 2 >></a>
                               <ul>
                               <li><a href="#">SubSubMenu1</a></li>
                               <li><a href="#">SubSubMenu2 >></a>
                                <ul>
                                        <li><a href="#">SubSubSubMenu1</a></li>
                                         <li><a href="#">SubSubSubMenu2 >></a>
                                                <ul>
                                                <li><a href="#">SubSubSubSubMenu1</a></li>
                                                <li><a href="#">SubSubSubSubMenu2</a></li>
                                                </ul>

                                                       </li>

                                               </ul>

                                       </li>

                               </ul>

                       </li>

               </ul>

       </li>

</ul>

</div>

NetBoy16 · Março 1, 2012

Nossa, teu codigo ta bem confuso :upset:

Eu recomendo você adotar uma classe ou id a cada menu e submenu, ficará bem mais organizado teu css, pq senao vai fica chei ode ul e li no codigo, coloca uma id em cada menu e submenu pra deixar mais organizado e legivel e valida teu codigo pra ver se nao tem nenhum erro

Dai posta o novo codigo para que possamos avancar para o proximo passo :thumbsup:

tiagocaus · Março 1, 2012

Assim ta bom para você?

<div id="BarraFixa">   
 <ul class="menu">

<li><a href="#">SubMenu1</a>
 <ul>
       <li><a href="#">SubMenu2 >></a>
               <ul>
               <li><a href="#">SubMenu3</a>
               <li><a href="#">Blabla >></a>
                       <ul>
                       <li> <a href="#">dasdasda</a>
                       <li> <a href="#">dasdasda</a>
                       <li> <a href="#">dasdasda</a>
                       <li> <a href="#">dasdasda >></a>
                                       <ul>
                                       <li> <a href="#">dasdasda</a>
                                       <li> <a href="#">dasdasda</a>
                                       <li> <a href="#">dasdasda</a>
                                       </ul>
                       </ul>
               </ul>
       <li><a href="#">SubMenu3</a>
       <li><a href="#">SubMenu4</a>

</ul>
</ul>
</div>

NetBoy16 · Março 1, 2012

Nao falo quanto a identacao, quanto você tem menu com vários niveis de submenus, aplicando id fica mais fácil e legivel o codigo, por exemplo, vamos supor que eu teria que aplicar uma estilizacao ao ultimo submenu, ficaria assim:

.menu li ul li ul li ul li ul {
/* Bem confuso né :) */
}

/* Mas caso você aplique uma id ao ultimo submenu ficaria bem mais curto e legivel esse codigo, vamos supor que o ultimo submenu tem id #ultimosubmenu, ficaria assim: */

#ultimosubmenu {
/* Bem melhor, viu :) */
}

tiagocaus · Março 1, 2012

Certamente concordo com você,

Mas esse raio de código não é meu, achei na internet, bostei por sem simples.

Infelizmente não tenho habilidades para modificar o atual, tem como alguém ajudar como esta?

NetBoy16 · Março 1, 2012

Ué, é simples, a cada no <ul> é um novo menu, é que nem ta no primeiro:

<ul class="menu">

Só que ao invés de class você faz id="nomedomenu"

Faca isso e poste o codigo modificado.

tiagocaus · Março 1, 2012

Seria assim meu amigo, achei que estava falando para mudar tambem no css, se foce eu tava... `~!@#$...rsrsrs

<div id="BarraFixa">   
<ul class="menu">
       <li><a href="#">Principal</a>
               <ul id="Sub1">
                       <li><a href="#">SubMenu 1</a></li>
                       <li><a href="#">SubMenu 2 >></a>
                               <ul id="Sub2">
                                       <li><a href="#">SubSubMenu1</a></li>
                                       <li><a href="#">SubSubMenu2 >></a>
                                               <ul id="Sub3">
                                                       <li><a href="#">SubSubSubMenu1</a></li>
                                                       <li><a href="#">SubSubSubMenu2 >></a>
                                                       <ul id="Sub4">
                                                               <li><a href="#">SubSubSubSubMenu1</a></li>
                                                               <li><a href="#">SubSubSubSubMenu2</a></li>
                                                       </ul>
                                                       </li>
                                               </ul>
                                       </li>
                               </ul>
                       </li>
               </ul>
   </li>
</ul>
</div>

Arquivado

[Resolvido] Menu com submenu

Recommended Posts

tiagocaus 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

tiagocaus 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marrabel 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

tiagocaus 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marrabel 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

tiagocaus 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marrabel 20

Compartilhar este post

Link para o post

Compartilhar em outros sites

tiagocaus 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

tiagocaus 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

tiagocaus 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

tiagocaus 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

tiagocaus 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

tiagocaus 1