Micox Ultimate Drop Down Menu

micox · Fevereiro 20, 2008

Depois de mil anos sumido...

Ae criançada, o bozo chegou.

Hou, seguinte, vocês me ajudam a testar este esquema de menu drop down abaixo??

Vamos contribuir com a paz mundial ajudando as pessoas a não ficarem mais nervosas quando forem fazer menus. O nobre colega micox já doou 8 horas do seu precioso tempo contribuindo com esta causa noblíssima (aumentativo de "nobre" haheaeh).

Contribua você também para contruirmos um mundo mais feliz.

/* menu horizontal-vertical até 4 níveis by elmicox.blogspot.com */
.menu-hv { position: relative; margin: 0; padding: 0; }
	.menu-hv:after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden; }
	.menu-hv * { margin: 0; padding: 0; list-style: none;}
	.menu-hv li { position: relative; float: left; line-height: 1.2em; }
	.menu-hv a { display: block; zoom: 1; line-height: 1.2em; }
	.menu-hv li ul { position: absolute; visibility: hidden;  }
	.menu-hv li ul li { float: none; }
	.menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
	.menu-hv li:hover ul { visibility: visible; }
	.menu-hv li:hover ul ul { visibility: hidden; }
	.menu-hv li li:hover ul { visibility: visible; }
	.menu-hv li li:hover ul ul { visibility: hidden; }
	.menu-hv li li li:hover ul { visibility: visible; }
	/* defina a largura dos itens do seu menu abaixo */
	.menu-hv li { width: 100px; }
	
/* menu vertical-vertical até 4 níveis by elmicox.blogspot.com */
.menu-vv { position: relative; margin: 0; padding: 0; float: left; }
	.menu-vv:after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden; }
	.menu-vv * { margin: 0; padding: 0; list-style: none;}
	.menu-vv li { position: relative; line-height: 1.2em; }
	.menu-vv a { display: block; zoom: 1; line-height: 1.2em; }
	.menu-vv li ul { position: absolute; left: 100%; top: 0; visibility: hidden;  }
	.menu-vv li:hover ul { visibility: visible; }
	.menu-vv li:hover ul ul { visibility: hidden; }
	.menu-vv li li:hover ul { visibility: visible; }
	.menu-vv li li:hover ul ul { visibility: hidden; }
	.menu-vv li li li:hover ul { visibility: visible; }
	/* defina a largura dos itens do seu menu abaixo */
	.menu-vv li { width: 100px; }
	
/*
para ativar o pseudo elemento :hover no IE6- use:
- Behaviors htc como indicado aqui : http://revolucao.etc.br/archives/falso-hover-no-internet-explorer/
- Ou o script IE7/IE8 do dean edwards: http://dean.edwards.name/IE7/
*/

Pra testar é fácil, é só colocar ele em alguma página sua onde tenha um menu drop down e aplicar a classe menu-hv ou menu-vv ao invés do esquema atual que esteja usando. É rapidim e não dói nada, eu prometo.

Sim, eu sei que dá pra juntar um monte de declaração aí mas faço isso depois. No momento preciso das duas classes separadas mesmo pra testar e ir debugando quando der problemas.

Por favor ajudem testando no IE7 e Opera.

Se você já passou por este problema, sabe do boró que é. Vamos ajudar a simplificar este problema. Você mesmo pode ser beneficiado no futuro. http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

helpaeeee

PS.: ñao se esqueça de adicionar um dos truques pra ativar o hover no IE ok?

ou o http://dean.edwards.name/IE7/

<!--[if lt IE 8]> <script type="text/javascript" src="js/IE8.js"></script><![endif]-->

ou o http://revolucao.etc.br/archives/falso-hov...ernet-explorer/

<!--[if lt IE 7]><style type="text/css">body { behavior:url(scripts/csshover.htc); }</style><![endif]-->

William Bruno · Fevereiro 20, 2008

Não tem como você postar um link?

Ou o código do menu <ul>, <li>?

Não entendi muito bem oque você qr...

Nícolas · Fevereiro 20, 2008

Fala Micox, beleza ^^

Pooo 8 horas pra escrever só isso de linha... ta caçando milho no teclado é, ahahahha

Zueira, eu sei que a lógica é complicada http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Seguinte cara.. maldade sua criar o negocio e num jogar o html aee pra gente testar, ahahha, mas beleza..

Pra facilitar pro povo testar to jogando aqui 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=iso-8859-1" />
<title>Titulo</title>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
<style type="text/css">
<!--
/* menu horizontal-vertical até 4 níveis by elmicox.blogspot.com */
* {
	margin: 0px;
	padding: 0px;
}
.menu-hv { position: relative; margin: 0; padding: 0; }
	.menu-hv:after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden; }
	.menu-hv * { margin: 0; padding: 0; list-style: none;}
	.menu-hv li { position: relative; float: left; line-height: 1.2em;  }
	.menu-hv a { display: block; zoom: 1; line-height: 1.2em; background-color: #F1F1F1; border: 1px solid #CCC; margin: 0px; }
	.menu-hv a:hover { background-color: #E1E1E1;  }
	.menu-hv li ul { position: absolute; visibility: hidden;  }
	.menu-hv li ul li { float: none; }
	.menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
	.menu-hv li:hover ul { visibility: visible; }
	.menu-hv li:hover ul ul { visibility: hidden; }
	.menu-hv li li:hover ul { visibility: visible; }
	.menu-hv li li:hover ul ul { visibility: hidden; }
	.menu-hv li li li:hover ul { visibility: visible; }
	/* defina a largura dos itens do seu menu abaixo */
	.menu-hv li { width: 200px; }
	
/* menu vertical-vertical até 4 níveis by elmicox.blogspot.com */
.menu-vv { position: relative; margin: 0; padding: 0; float: left; }
	.menu-vv:after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden; }
	.menu-vv * { margin: 0; padding: 0; list-style: none;}
	.menu-vv li { position: relative; line-height: 1.2em; }
	.menu-vv a { display: block; zoom: 1; line-height: 1.2em;  background-color: #F1F1F1; border: 1px solid #CCC; margin: 0px; }
	.menu-vv a:hover { background-color: #E1E1E1;  }
	.menu-vv li ul { position: absolute; left: 100%; top: 0; visibility: hidden;  }
	.menu-vv li:hover ul { visibility: visible; }
	.menu-vv li:hover ul ul { visibility: hidden; }
	.menu-vv li li:hover ul { visibility: visible; }
	.menu-vv li li:hover ul ul { visibility: hidden; }
	.menu-vv li li li:hover ul { visibility: visible; }
	/* defina a largura dos itens do seu menu abaixo */
	.menu-vv li { width: 200px; }
	
/*
para ativar o pseudo elemento :hover no IE6- use:
- Behaviors htc como indicado aqui : http://revolucao.etc.br/archives/falso-hover-no-internet-explorer/
- Ou o script IE7/IE8 do dean edwards: http://dean.edwards.name/IE7/
*/
-->
</style>
</head>
<body>

	<div class="menu-hv">
		<ul>
			<li><a href="#">Item do menu 1</a></li>
			<li><a href="#">Item do menu 2</a>
				<ul>
					<li><a href="#">Item do submenu 1</a></li>
					<li><a href="#">Item do submenu 2</a>
						<ul>
							<li><a href="#">Item do subsubmenu 1</a></li>
							<li><a href="#">Item do subsubmenu 2</a></li>
							<li><a href="#">Item do subsubmenu 3</a>						
								<ul>
									<li><a href="#">Item do subsubsubmenu 1</a></li>
									<li><a href="#">Item do subsubsubmenu 2</a></li>
									<li><a href="#">Item do subsubsubmenu 3</a></li>
									<li><a href="#">Item do subsubsubmenu 4</a></li>
									<li><a href="#">Item do subsubsubmenu 5</a></li>
									<li><a href="#">Item do subsubsubmenu 6</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">Item do submenu 3</a></li>
					<li><a href="#">Item do submenu 4</a></li>															
				</ul>
			</li>
			<li><a href="#">Item do menu 3</a></li>
			<li><a href="#">Item do menu 4</a>
				<ul>
					<li><a href="#">Item do submenu 1</a></li>
					<li><a href="#">Item do submenu 2</a>
						<ul>
							<li><a href="#">Item do subsubmenu 1</a></li>
							<li><a href="#">Item do subsubmenu 2</a></li>
							<li><a href="#">Item do subsubmenu 3</a></li>
							<li><a href="#">Item do subsubmenu 4</a></li>
							<li><a href="#">Item do subsubmenu 5</a></li>
						</ul>
					</li>
					<li><a href="#">Item do submenu 3</a></li>															
				</ul>
			</li>						
			<li><a href="#">Item do menu 5</a>
				<ul>
					<li><a href="#">Item do submenu 1</a></li>
					<li><a href="#">Item do submenu 2</a>
						<ul>
							<li><a href="#">Item do subsubmenu 1</a></li>
							<li><a href="#">Item do subsubmenu 2</a></li>
							<li><a href="#">Item do subsubmenu 3</a></li>
						</ul>
					</li>
					<li><a href="#">Item do submenu 3</a></li>
					<li><a href="#">Item do submenu 4</a></li>
					<li><a href="#">Item do submenu 5</a></li>
					<li><a href="#">Item do submenu 6</a></li>															
				</ul>
			</li>
			<li><a href="#">Item do menu 6</a></li>						
		</ul>
	</div>


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




	<div class="menu-vv">
		<ul>
			<li><a href="#">Item do menu 1</a></li>
			<li><a href="#">Item do menu 2</a>
				<ul>
					<li><a href="#">Item do submenu 1</a></li>
					<li><a href="#">Item do submenu 2</a>
						<ul>
							<li><a href="#">Item do subsubmenu 1</a></li>
							<li><a href="#">Item do subsubmenu 2</a></li>
							<li><a href="#">Item do subsubmenu 3</a>						
								<ul>
									<li><a href="#">Item do subsubsubmenu 1</a></li>
									<li><a href="#">Item do subsubsubmenu 2</a></li>
									<li><a href="#">Item do subsubsubmenu 3</a></li>
									<li><a href="#">Item do subsubsubmenu 4</a></li>
									<li><a href="#">Item do subsubsubmenu 5</a></li>
									<li><a href="#">Item do subsubsubmenu 6</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">Item do submenu 3</a></li>
					<li><a href="#">Item do submenu 4</a></li>															
				</ul>
			</li>
			<li><a href="#">Item do menu 3</a></li>
			<li><a href="#">Item do menu 4</a>
				<ul>
					<li><a href="#">Item do submenu 1</a></li>
					<li><a href="#">Item do submenu 2</a>
						<ul>
							<li><a href="#">Item do subsubmenu 1</a></li>
							<li><a href="#">Item do subsubmenu 2</a></li>
							<li><a href="#">Item do subsubmenu 3</a></li>
							<li><a href="#">Item do subsubmenu 4</a></li>
							<li><a href="#">Item do subsubmenu 5</a></li>
						</ul>
					</li>
					<li><a href="#">Item do submenu 3</a></li>															
				</ul>
			</li>						
			<li><a href="#">Item do menu 5</a>
				<ul>
					<li><a href="#">Item do submenu 1</a></li>
					<li><a href="#">Item do submenu 2</a>
						<ul>
							<li><a href="#">Item do subsubmenu 1</a></li>
							<li><a href="#">Item do subsubmenu 2</a></li>
							<li><a href="#">Item do subsubmenu 3</a></li>
						</ul>
					</li>
					<li><a href="#">Item do submenu 3</a></li>
					<li><a href="#">Item do submenu 4</a></li>
					<li><a href="#">Item do submenu 5</a></li>
					<li><a href="#">Item do submenu 6</a></li>															
				</ul>
			</li>
			<li><a href="#">Item do menu 6</a></li>						
		</ul>
	</div>

Eu dei uma estilizada de muito leve não pra ficar bonito, mas só para testar pq tava os links puros.

No Opera funcionou bacana ^^

Agora no IE 7, ele fica dando um espaço entre a li que contem tem o submenu, tipo um margin bottom.

Aee as vezes quando se arrasta o mouse devido ao espaço que fica entre os botões ele some, depende da velocidade que você arrasta o mouse.

Até joguei um * com padding e margin 0px mas não adiantou, é bug do IE mesmo <_<

Só não tentei arrumar porque to saindo do trampo agora... to louco pra ir pra casa :lol:

Mas aeee foi um ótimo trabalho, já vi muitas postagens excelentes sua no fórum, sempre com umas dicas ótimas e tal.

E ta de parabéns pelo CSS que ta bacana http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Flw aee

micox · Fevereiro 21, 2008

Não tem como você postar um link?

Ou o código do menu <ul>, <li>?

Seguinte cara.. maldade sua criar o negocio e num jogar o html aee pra gente testar, ahahha, mas beleza..

hehe, coloquei online pessoal: http://naironjcg.googlepages.com/menus.htm

Mas o lance é o seguinte povo. Não quero que testem apenas esta página que passei em diversos navegadores. Quero que, se possível, testem em várias situações também:

com doctype, sem doctype, dentro do topo, dentro da lateral, no ie7, no ie8, no opera, no linux, no mac, etc.

tipo, troquem outro menu que estejam utilizado por este (em uma página de testes) pra ver o que dá, etc.

Quero fazer um código de menu final pra ninguém mais quebrar a cabeça (até que os navegadores mudem muito).

Eu dei uma estilizada de muito leve não pra ficar bonito, mas só para testar pq tava os links puros.

Podem estilizar tranquilamente. Eu fiz só o esqueleto pois a idéia é esta: Faço o esqueleto do menu drop-down e o cara adapta à sua realidade sem mexer quebrar a cabeça no código do esqueleto.

Agora no IE 7, ele fica dando um espaço entre a li que contem tem o submenu, tipo um margin bottom.

Aee as vezes quando se arrasta o mouse devido ao espaço que fica entre os botões ele some, depende da velocidade que você arrasta o mouse.

Até joguei um * com padding e margin 0px mas não adiantou, é bug do IE mesmo

vou baixar o multiple IE e testar essa parada.

Valeus pessoal.

O código já está unido atualmente assim:

/*
  Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) até 4 níveis
  by Micox - elmicox.blogspot.com - Ver. 2.0 - 20/02/08 - Creative Commons License
*/	
.menu-hv, .menu-vv { position: relative; margin: 0; padding: 0 }
	.menu-hv:after, .menu-vv:after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden }
	.menu-hv * ,	.menu-vv * { margin: 0; padding: 0; list-style: none}
	.menu-hv li ,   .menu-vv li { position: relative; line-height: 1.2em; vertical-align: top }
	.menu-hv a ,	.menu-vv a { display: block; zoom: 1; line-height: 1.2em }
	.menu-hv li ul, .menu-vv li ul { position: absolute; visibility: hidden  }
	.menu-hv li:hover ul,  .menu-vv li:hover ul { visibility: visible }
	.menu-hv li:hover ul ul,  .menu-vv li:hover ul ul { visibility: hidden }
	.menu-hv li li:hover ul,  .menu-vv li li:hover ul { visibility: visible }
	.menu-hv li li:hover ul ul,  .menu-vv li li:hover ul ul { visibility: hidden }
	.menu-hv li li li:hover ul,  .menu-vv li li li:hover ul { visibility: visible }
	/* características horizontal-vertical */
	.menu-hv li { float: left; }		
	.menu-hv li ul li { float: none; }
	.menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
	/* características vertical-vertical */
	.menu-vv { float: left; }	
	.menu-vv li ul { left: 100%; top: 0; }
	/*
	  ALTERE ABAIXO. defina a largura dos itens do seu menu abaixo
	  ou apague as linhas se for definir em outro lugar
	*/
	.menu-hv li { width: 100px; background-color: cyan }
	.menu-vv li { width: 100px; background-color: yellow }

micox · Fevereiro 22, 2008

Corrigi a página http://naironjcg.googlepages.com/menus.htm e agora tá funfando no IE7 também.

Fall · Fevereiro 22, 2008

Show o menu drop down

curto fazê lo com o jquery q fik bem facim tb...

abraços e curto mto ler seus artigos no seu blog

flwww

micox · Fevereiro 23, 2008

Ho, valeu cara. Tô honrado.

em breve estarei no imasters também heheh

micox · Março 7, 2008

Valeu pelos helps ae pessoal.

Já estou blogando o bixo.

Agora não precisa de javascript externo pra ativar o hover http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

O código final ficou:

/*
  Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) até 4 níveis
  by Micox - elmicox.blogspot.com - Ver. 2.0 - 20/02/08 - Creative Commons License
*/	
.menu-hv, .menu-vv { position: relative; margin: 0; padding: 0; display: block; zoom: 1;}
	.menu-hv * ,	.menu-vv * { margin: 0; padding: 0; list-style: none}
	.menu-hv li ,   .menu-vv li { position: relative; line-height: 1.2em; vertical-align: top }
	.menu-hv a ,	.menu-vv a { display: block; zoom: 1; line-height: 1.2em }
	.menu-hv li ul, .menu-vv li ul { position: absolute; visibility: hidden  }
	.menu-hv li:hover ul,  .menu-vv li:hover ul,
	.menu-hv li.hover ul,  .menu-vv li.hover ul { visibility: visible }
	.menu-hv li:hover ul ul,  .menu-vv li:hover ul ul,
	.menu-hv li.hover ul ul,  .menu-vv li.hover ul ul { visibility: hidden }
	.menu-hv li li:hover ul,  .menu-vv li li:hover ul,
	.menu-hv li li.hover ul,  .menu-vv li li.hover ul { visibility: visible }
	.menu-hv li li:hover ul ul,  .menu-vv li li:hover ul ul,
	.menu-hv li li.hover ul ul,  .menu-vv li li.hover ul ul { visibility: hidden }
	.menu-hv li li li:hover ul,  .menu-vv li li li:hover ul,
	.menu-hv li li li.hover ul,  .menu-vv li li li.hover ul { visibility: visible }
	/* características horizontal-vertical */
	.menu-hv:after, .menu-hv.after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden}
	.menu-hv li { float: left; }		
	.menu-hv li ul li { float: none; }
	.menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
	/* características vertical-vertical */
	.menu-vv { float: left; }	
	.menu-vv li ul { left: 100%; top: 0; }
	/* ****************************************
	  ALTERE ABAIXO. defina a largura dos itens do seu menu abaixo
	  ou apague as linhas se for definir em outro lugar
	*/
	.menu-hv li { width: 100px; background-color: cyan }
	.menu-vv li { width: 100px; background-color: cyan }
	.menu-hv li a:hover { background-color: gray }
	.menu-vv li a:hover { background-color: gray }

	
/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6
   http://elmicox.blogspot.com/2008/03/ativando-hover-e-first-child-no-ie-6-um.html */
* html * { color: expression( (function(who){ if(!who.MXPC){
	who.MXPC = '1';
	if(who.nodeName != 'A'){
		who.onmouseenter=function(){ who.className += ' hover'};
		who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
	(who==who.parentNode.firstChild) ? who.className += ' first-child' : '';
} } )(this) , 'auto') }

micox · Junho 18, 2009

Ops, depois de mil anos re-achei este tópico via google e percebi que eu havia esquecido de passar o resultado final.

Já testei em diversos sites e diversos navegadores e têm funcionado bem (desde que o html esteja certinho e, se possível, com doctype declarado corretamente).

Realmente, no final, facilita muito. É só copiar e colar o código e depois estilizar o visual (nas linhas indicadas para isto).

Ficou muito bom.

A explicação: http://elmicox.blogspot.com/2008/03/ultima...n-css-at-4.html

O exemplo: http://naironjcg.googlepages.com/menus.htm (não se assustem com a estilização feia do exemplo. Você pode alterar a estilização de uma forma muito fácil)

Manoel33 · Julho 22, 2011

Oi Micox,

Obrigado por esse código, era o que precisava para meu site. Uso sem problemas no Firefox 5 e no IE9.

Mas, já abusando, será que você poderia dar uma sugestão de como 'retardar' um pouco o desaparecimento das abas que são abertas, para melhorar a usabilidade. Meu site é acessado por pessoas mais velhas e elas têm certa dificuldade para pular rapidamente de uma aba para a sub-aba que se abre.

Valeu,

Manoel

Arquivado

Micox Ultimate Drop Down Menu

Recommended Posts

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nícolas 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fall 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

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Manoel33 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

printf iniciante básico

Fóruns

Tempo Real

Informação importante