Menu com submenus na Horizontal

Marcos Moleiro · Abril 18, 2006

Olá!!

Peguei um exemplo de menu no site do Maurício Samy Silva (http://www.maujor.com/tutorial/ddownmenu-a.php) e adaptei para ficar na horizontal. Ficou bom, mas gostaria que somente os submenus ficassem na vertical mas não estou conseguindo... se alguém puder me ajudar desde já meu muito obrigado!!

Marcos

<!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" lang="pt-br" xml:lang="pt-br"><head><meta name="keywords" content="tutorial,acessibilidade,css,css menu,estilo,folhas estilo,layout css,layout sites,menu css,paginas web,tutorial css,web design,web standards,webdesign,tableless" /><meta name="description" content=" Tutoriais, macetes, dicas sobre uso das CSS para projetar sites." /><meta name="author" content="Nick Rigby" /><meta name="MSSmartTagsPreventParsing" content="true" /><meta http-equiv="imagetoolbar" content="no" /><meta http-equiv="Pragma" content="no-cache" /><meta name="robots" content="all" /><meta name="language" content="pt-br" /><meta name="ICBM" content="-22.975781,-43.193082" /><meta name="DC.title" content="CSS para Web Design" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Horizontal Drop Down Menus - Parte 3</title><script type="text/javascript">function IEHoverPseudo() {	var navItems = document.getElementById("primary-nav").getElementsByTagName("li");		for (var i=0; i<navItems.length; i++) {		if(navItems[i].className == "menuparent") {			navItems[i].onmouseover=function() { this.className += " over"; }			navItems[i].onmouseout=function() { this.className = "menuparent"; }		}	}}window.onload = IEHoverPseudo;</script><style type="text/css">body { font: normal 62.5% verdana; }ul#primary-nav,ul#primary-nav ul {	margin: 0;	padding: 0;/*	width: 600px; */ /* Width of Menu Items */	border-bottom: 0px; solid #ccc;	background: #fff;   /* IE6 Bug *//*	background: blue;  /* IE6 Bug */ cor do fundo dos menus	font-size: 100%;	}ul#primary-nav li {	position: relative;	list-style: none;	display: inline;		float:left;	}ul#primary-nav li a {	display: block;	text-decoration: none;		float:left;	color: #777;/*	color: red;   cor das letras do menu */	padding: 5px;	border: 1px solid #ccc;	border-bottom: 1;	}/* Fix IE. Hide from IE Mac \*/* html ul#primary-nav li { float: left; height: 1%; }* html ul#primary-nav li a { height: 1%; }/* End */ul#primary-nav ul {	position: absolute;	display: none;	left: 0px;   /* Set 1px less than menu width */	top: 23px;	}ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ul#primary-nav li:hover ul ul ,ul#primary-nav li:hover ul ul ul,ul#primary-nav li.over ul ul,ul#primary-nav li.over ul ul ul { display: none; top: 17px;} /* Hide sub-menus initially */ul#primary-nav li:hover ul,ul#primary-nav li li:hover ul,ul#primary-nav li li li:hover ul,ul#primary-nav li.over ul,ul#primary-nav li li.over ul,ul#primary-nav li li li.over ul { display: block; } /* The magic */ul#primary-nav li.menuparent { background: transparent url(arrow-down.gif) right center no-repeat; } /* ul#primary-nav li.menuparent { background: yellow url(arrow-down.gif) right center no-repeat; } Cor dos que tem o -> */ul#primary-nav li.menuparent:hover,ul#primary-nav li.over { background-color: #f9f9f9; }/*ul#primary-nav li.over { background-color: blue } cor da selecao quando tem submenu */ul#primary-nav li a:hover { color: #E2144A;  }/*ul#primary-nav li a:hover { color: blue; background-color: blue} cor da letra dos menus com selecao / cor do fundo */</style></head><body><h1>EXEMPLO DE MENU PRINCIPAL NA HORIZONTAL</h1><h2>Adaptação feita por:</h2>Marcos Antunes Moleiro<br><br><ul id="primary-nav">  <li><a href="#">Home</a></li>  <li class="menuparent"><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="menuparent"><a href="#">Services   </a> 	<ul>	  <li><a href="#">Web Design</a></li>	  <li><a href="#">Internet Marketing</a></li>	  <li class="menuparent"><a href="#">Hosting   </a> 		<ul>		  <li><a href="#">Dedicated</a></li>		  <li><a href="#">Virtual</a></li>		  <li><a href="#">Shared</a></li>		  <li><a href="http://www.uem.br" target="_blank">Managed</a></li>		</ul>	  </li>	  <li><a href="#">Domain Names</a></li>	  <li><a href="#">Broadband</a></li>	</ul>  </li>  <li class="menuparent"><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>

micox · Abril 18, 2006

Vê se te ajuda: http://forum.imasters.com.br/index.php?act...e=menu+vertical

Se não, posta ae denovo.

Giovani · Abril 19, 2006

E ai Marcos,

Tente colocar um link com a sua página e não o código. Torna mais rápido a ajuda aqui do pessoal! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Abraços!

Marcos Moleiro · Abril 19, 2006

ok... vou tentar...

Marcos Moleiro · Abril 19, 2006

Valeu micox!No link que você me passou encontrei um outro link (http://solardreamstudios.com/learn/css/cssmenus/) postado pelo Santiago que faz exatamente o que eu preciso... Obrigado!MarcosPs. Como você fez essa busca?? Tento mais não consigo... digito em Procurar por Palavra-chave "menu+vertical" (sem as aspas) mas só retorna a minha postagem!

micox · Abril 20, 2006

Realmente a busca aqui do invisionBoard não está muito boa.Eu mandei pesquisar pelas palavras "menu vertical" (sem as aspas) dentro do forum webstandards.

Marcos Moleiro · Abril 20, 2006

Agora funcionou a busca... vai saber :wacko:

Com relação ao menu, mudei os Css para poder usar mais submenus. Agora dá para usar até o 4 submenus (acho que exagerei http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif ).

Também fiz alterações no html para poder usar uma seta como imagem para os submenus, já que no código original (em solardreamstudios) usava o sinal de "+".

Os menus originais (com os "+") podem ser vistos em:

Original Horizontal

Original Vertical

os menus modificados (com as setas) podem ser vistos em:

Menu Horizontal

Menu Vertical

Ficou bom, mas... o código html dos menus para aceitarem a seta ficaram muito repetitivos, pois sempre deve-se escrever:

STYLE="background-position: center right; background-image: url(SetaDireita.gif); background-repeat: no-repeat;"

como pode ser visto nesta parte do código:

...  <li><a href="#" STYLE="background-position: center right; background-image: url(SetaDireita.gif); background-repeat: no-repeat;">				  Learn   </a>	<ul>	  <li><a href="#" STYLE="background-position: center right; background-image: url(SetaDireita.gif); background-repeat: no-repeat;">					  Fireworks</a>		<ul>...

Para evitar essa repetição tentei criar um estilo chamado seta da seguinte forma...

#seta { background-position: center right; background-image: url(SetaDireita.gif); background-repeat: no-repeat}...  <li><a href="#" ID="seta">				  Learn   </a>	<ul>  <li><a href="#" ID="seta">					  Fireworks</a>		<ul>...

... mas não deu certo... alguém poderia me ajudar???

Obrigado!

Marcos

micox · Abril 20, 2006

Simples. Troque o ID="seta" por class="seta".ID é o identificador (nome) do elemento.Ah e procure usar sempre minúsculas pra ficar no padrão.Muito boa sua solução. Parabéns...

Marcos Moleiro · Abril 20, 2006

Mesmo assim não funciona (a seta não aparece)...acho que deve ser por causa dessa parte do código que inicia o menu<ul id="navmenu">e ai não consegue achar o estilo "seta"Aguadeço a ajuda desde ját+Marcos

micox · Abril 20, 2006

Marcos. Estude sobre seletores. no site do maujor explica bem.

Seu código ficará assim:

.seta { /* <-- Alterado de # (malha) para . (ponto) */background-position: center right;background-image: url(SetaDireita.gif);background-repeat: no-repeat}...  <li><a href="#" class="seta"> <!-- alterado para class -->				  Learn   </a>	<ul>  <li><a href="#" class="seta"> <!-- alterado para class -->					  Fireworks</a>		<ul>

Marcos Moleiro · Abril 21, 2006

Realmente preciso estudar um pouco mais... http://forum.imasters.com.br/public/style_emoticons/default/joia.gif!!

Não querendo ser chato, mesmo assim não funcionou!

Veja a figura abaixo:

http://img126.imageshack.us/my.php?image=c...061118387vj.jpg

O que será que está acontecendo? http://forum.imasters.com.br/public/style_emoticons/default/cry.gif

Se puder me ajudar, desde já agradeço!

t+

Marcos

micox · Abril 22, 2006

Poste o link ou o código (link de preferencia).

Marcos Moleiro · Abril 22, 2006

Já consegui algum progresso, estudei um pouco mais e fiz as seguintes modificações:

no html

...<ul id="navmenu">  <li><a href="#">Blog</a></li>  <li class="setabaixo"><a href="#">				  Work   </a>	<ul>	  <li class="setadireita"><a href="#">					  Websites</a>		<ul>...

no css

.../* Alterações feitas para colocar setas nos menus */ul#navmenu li.setabaixo a { background-position: center right; background-image: url(SetaBaixo.gif); background-repeat: no-repeat}ul#navmenu li.setadireita a ,ul#navmenu ul li.setadireita a ,ul#navmenu ul li.setadireita:hover a ,ul#navmenu ul li.setadireita li.setadireita a ,ul#navmenu ul li.setadireita li.setadireita:hover a ,ul#navmenu ul li.setadireita li.setadireita li.setadireita a ,ul#navmenu ul li.setadireita li.setadireita li.setadireita:hover a { background-position: center right; background-image: url(SetaDireita.gif); background-repeat: no-repeat}...

Esta funcionando perfeitamente no Mozilla/Firefox, mas no internet explorer não :o

Olhe só as imagens:

Tela de Menu no IE

Tela de Menu no Mozilla

Aqui está o link para o menu:

Link para o Menu

O que devo fazer para rodar no IE??

Muito obrigado desde já

Marcos

micox · Abril 24, 2006

No IE o hover só pode ser aplicado a elementos <a>.Mas testei aqui no IE6 e parece que tá igual. você já mudou o código fonte?

Marcos Moleiro · Abril 24, 2006

Então... no Mozilla/Firefox funciona bem, mas no internet explorer não. Nas fotos dos screenshots da minha última mensagem você pode ver que os menus abrem no IE6 só que quando o mouse está sobre o menu/submenu as setas somem... e aí que é o problema...Acho que tenho que modificar alguma coisa no .js para que aceite a classe setadireita, mas não estou conseguindo.... o que você acha???obrigado!Marcos

micox · Abril 24, 2006

você observou o que eu disse antes ou nem leu?

No IE o hover só pode ser aplicado a elementos <a>.

Marcos Moleiro · Abril 24, 2006

Li sim... é que no arquivo html.js tem um código que corrige essa falha do IE...

navHover = function() {	var lis = document.getElementById("navmenu").getElementsByTagName("LI");	for (var i=0; i<lis.length; i++) {		lis[i].onmouseover=function() {			this.className+=" iehover";		}		lis[i].onmouseout=function() {			this.className=this.className.replace(new RegExp(" iehover\\b"), "");		}	}}if (window.attachEvent) window.attachEvent("onload", navHover);

Como a rotina funciona no Mozilla com as modificações que eu fiz, e tem uma rotina em JavaScript que corrige essa falha que você colocou, não sei porque não está funcionando!!

Será que devo acrescentar a classe setadireita no JavaScript?? Como??

Obrigado!

Marcos

fabfernandes · Abril 28, 2006

Marcos.... você poderia nos mostrar como ficou o codigo finalizado? os liks que você passou estao todos furados...

Marcos Moleiro · Abril 30, 2006

Olá a todos!!

Consegui fazer o menu da maneira como queria http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Os links da minha última mensagem estão desatualizados pois estava alterando-os para um novo modelo que encontrei na internet.

Pesquisando aqui no imasters (não sei em quais mensagens, desculpe a falta do crédito, pois foram muitas mensagens pesquisadas) encontrei um link que me levou a outro link e desse a um outro link com o seguinte artigo:

http://www.htmldog.com/articles/suckerfish/dropdowns/

Lendo e estudando o artigo acima pude entender um pouco mais sobre como trabalhar com menus horizontais.

Com o artigo acima descobri uma nova forma de construção do CSS (um pouco diferente dos meus posts anteriores) bem mais claro e simples.

Neste mesmo artigo tem um exemplo de menu horizontal bem interessante:

http://www.htmldog.com/articles/suckerfish...pdowns/example/

Fiz algumas mudanças no código para se adaptar as minhas necessidades: Cores, posição, mudança para aceitar mais níveis (agora aceita 5 níveis :wacko: ) e menu no mesmo estilo na Vertical.

Um exemplo do menu adaptado por mim pode ser visto em:

Menu Horizontal

Menu Vertical

Gostaria de compartilhar com todos do forum a solução encontrada para Menus Horizontais.

Gostaria, ainda, de pedir a ajuda para testar em outros navegadores e possíveis correções, pois testei somente no Mozilla, Firefox e Internet Explorer.

Me parece que no Konqueror não está funcionando muito bem...

Gostaria de agradecer a todos, mas principalmente ao Micox pela grande ajuda!!

t+

Marcos

PS. Achei também outros modelos de menus olhem só que menu interessante:

http://www.thedesigntribe.com/new-menu12.htm

Giovani · Abril 30, 2006

Marcos,

Primiero, muito legal você ter colocado o resultado do seu trabalho aqui, para que todos possam ver! Isso é muito bom! B)

Segundo, PARABÉNS!!! Espero que outras pessoas sejam influenciadas por você....q foi atrás, pesquisou, postou aqui, enfim, mostrou q correr atras do q se quer não é tão dificil!!! Novamente parabéns a você, e é claro, ao micox tab, q sempre nos ajuda qdo precisamos! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Abraços a todos!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Arquivado

Menu com submenus na Horizontal

Recommended Posts

Marcos Moleiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Moleiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Moleiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Moleiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Moleiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Moleiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Moleiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Moleiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Moleiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

fabfernandes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Moleiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104