Ana Claudia

Programação e Design Web

Menu Pop Up

posted by Ana Claudia On fevereiro - 20 - 2007 8 COMMENTS

Hoje vou mostrar como fazer um menu pop up com CSS (e um pouquinho de Javascript) que funciona tanto no Firefox como no Internet Explorer. Ainda vou mostrar uma dica bônus que eu acho que vai ajudar muita gente.
Primeiro vamos criar o HTML da página( exemplo 1 )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!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>Menu pop up -  passo 1</title>
</head>
<body>
	<div id="navigation">
	  <iframe id='iFrameMenu'></iframe>
	   <ul id="nav">
			<li>
				Link1
 			  <ul>
			    <li><a href="exemplo1.html">Sub1</a></li>
			    <li><a href="exemplo1.html">Sub2</a></li>
			    <li><a href="exemplo1.html">Sub3</a></li>
			   </ul>
			  </li>
			 <li>
			  Link2
     		<ul>
			    <li><a href="exemplo1.html">Sub1</a></li>
			    <li><a href="exemplo1.html">Sub2</a></li>
			    <li><a href="exemplo1.html">Sub3</a></li>
			  </ul>
			 </li>
		 </ul>
	</div>
</body>
</html>

O Primeiro ní­vel da lista são os itens do menu e o segundo ní­vel os do submenu. Até aí­ nem um segredo.
Você deve ter percebido um iframe vazio na nossa página, ele pertence a dica bônus que explicarei mais para frente.
Agora vamos criar nossa folha de estilo( exemplo 2 )

8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

body{
 background-color:#ffffff;
 font-family: arial, helvetica, sans-serif;
 font-size: 12px;
}
#iFrameMenu{
  visibility:hidden;
	position:absolute;
	z-index:2;
}
#navigation {
 background-color: #cccccc;
 position: absolute;
 top: 0px;
 left: 0;
 text-align: center;
 width: 100%;
 padding: 2px 0;
 margin-bottom: 20px;
}
#nav {
	padding-left: 30px;
	min-width: 740px;
  margin: 0 auto;
}
#nav, #nav ul {
	text-align: left;
	font-size: 14px;
	list-style: none;
	font-weight: normal;
	z-index: 8;
}
#nav li {
	float: left;
	padding: 0;
	margin: 0;
	}
#nav a {
	border-right: 1px solid #999;
	display:block;
	line-height: 20px;
	padding: 0 15px;
	color: #000;
	text-decoration: none;
	font-weight: bold;
	}
 
#nav a:hover {
	color: #fff;
	background: #999;
	}
 
#nav li ul {
	margin: 0;
  padding: 0;
  font-size: 13px;
  border: 1px solid #333333;
 	background: #cccccc;
	position: absolute;
  left: -999em;
  height: auto;
  width: 14em;
}
#nav li li {
	width: 14em;
	margin: 0;
}
#nav li ul a {
	border-left: 13px solid #ccffcc;
	margin: 0;
	color: #000
}
#nav li ul a:hover {
	border-left: 13px solid #66cc00;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
	left: auto;
}
#nav li:hover, #nav li.sfhover {
	color: #ffffff;
	background-color: #cccccc;
}
/* Isso funciona em IE */
#nav li.over ul{
	left: auto;
}

Agora nosso menu já funciona corretamente no Firefox. Qual os segredo? O segredo está basicamente nas linhas 68 e 86, que possuem a propriedade left. No primeiro caso a propriedade está com o valor negativo, que é responsável por esconder o submenu, e no segundo caso a propriedade está com valor auto, que coloca o submenu na posição que ele deve ser mostrado. Até aqui parece que está tudo bem, mais ainda tem um probleminha: o nosso “querido amigo” IE não mostra o submenu. Isso acontece por que o IE não entende o indicador :hover para outras tags que não sejam a. Isso quer dizer que ele ignora li:hover. Com um pouco de Javascript nós resolvemos este problema( exemplo 3 ).

98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

function startList(){
 	if(navigator.userAgent.match("MSIE 6.0")){
 	navRoot = document.getElementById("nav");
 	for (i=0; i<navRoot.childNodes.length; i++){
 		node = navRoot.childNodes[i];
    if(node.nodeName=="LI"){
  		node.onmouseover=function(){
  		 this.className+=" over";
    }
     node.onmouseout=function(){
      this.className=this.className.replace(" over", "");
     }
    }
   }
  }
 }
 window.onload = function(){
	startList();
 }

Na linha 100 pegamos todos os elementos que estão dentro da Div com id “nav”,ou seja, nosso item do menu, e a linha 102 vemos quais os elementos dentro dele com a ajuda do atributo ChilNodes(nós fillhos). Verificamos então na linha 103 se o nome da tag que está dentro do nó se chama “li”. Assim que a tag é achada, uma função é chamada no evento de passar o mouse sobre o menu ( onmouseover ) que adiciona na tag a classe over que será responsável por abrir o submenu. Logo abaixo, na linha 107, temos o evento onmouseout, que será responsável por retirar a classe over da tag e fazendo com que nosso submenu seja escondido ao tirar o mouse do menu. Nosso menu já funcina no IE e no Firefox. Agora vem a dica bônus: suponhamos que na página onde está o menu também possua uma tag select. O que acontece quando se abre o submenu no IE? O select irá ficar por cima do seu submenu. Isso é um bug do IE e não adianta querer mudar o z-indez do select que não vai adiantar, pois ele não entende essa propriedade. A solução é colocar um iframe embaixo do submenu e em cima do select, pois o iframe é capaz de se sobrepor ao select. Para que nosso iframe não seja visto na página, colocamos o mesmo tamanho e posição do submenu. Para que fique abaixo do submenu, o iframe deve ter um z-index menor que o do submenu. Vamos alterar essas propriedades dinamicamente, contando novamente com a ajuda do javascript( exemplo 4 ).

99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

function startList(){
 frameM = document.getElementById("iFrameMenu");
 if(navigator.userAgent.match("MSIE 6.0")){
	navRoot = document.getElementById("nav");
	for (i=0; i<navRoot.childNodes.length; i++){
			 node = navRoot.childNodes[i];
    	 if (node.nodeName=="LI"){
			  node.onmouseover=function(){
			   this.className+=" over";
				 nodeF = this.childNodes[2];
				 if(nodeF != undefined){
				   nodeF.style.zIndex = 8;
				   x = getPageOffsetLeft(nodeF);
    			 y = getPageOffsetTop(nodeF);
					 w = nodeF.offsetWidth;
    			 h = nodeF.offsetHeight;
 
    			 frameM.style.position = "absolute";
					 frameM.style.left = x + "px";
    			 frameM.style.top  = y +"px";
    			 frameM.style.width = w + "px";
    			 frameM.style.height  = h + "px";
					 frameM.style.zIndex = (Number(nodeF.style.zIndex)-1);
    		   frameM.style.visibility = "visible";
				 }
        }
        node.onmouseout=function(){
         this.className=this.className.replace(" over", "");
         frameM.style.visibility = "hidden";
        }
       }
			}
		}
	}
 
function getPageOffsetLeft(el) {
 var x;
 x = el.offsetLeft;
 if (el.offsetParent != null)
  x += getPageOffsetLeft(el.offsetParent);
 return x;
}
 
function getPageOffsetTop(el) {
 var y;
 y = el.offsetTop;
 if (el.offsetParent != null)
 y += getPageOffsetTop(el.offsetParent);
 return y;
}

Bom, é isso ai. Talvez fique um pouco confuso para entender no começo, mas eu aconselho que você brinque bastante com o CSS e o Javascript para entender melhor como o script funciona e perceba que não é tão complicado assim.

Fontes:
Menu Drop Down Parte 1
Menu Drop Down parte 2
Mostrar um DIV sobre um SELECT, impossivel?

Categories: CSS, Javascript, Web Standards

8 Comments

  1. Matt
    fevereiro 24, 2007 às 2:05 am

    Ana, belo tutorial! Queria apenas poder acessar a internet de casa pra poder acompanhar o passo a passo. =[

    Se tem uma coisa que gosto bastante e que nunca realmente soube fazer são os menus drop down! Ainda vou enfiar algo do tipo lá¡ no GemP. \o/

    Abraços!

  2. Maria do Carmo
    novembro 9, 2007 às 8:40 pm

    Jóia, cliquei exemplo3 Exibir-codigo fonte. Colei no Dreamweaver e salvei o html. Processei e agora vou estudar o código. Não conseguia abrir submenu ao passar o mouse, com outros exemplos que copiei.Mto bom!!!

  3. wagner
    março 27, 2008 às 10:43 pm

    seria bom, se pudesse ver a imagem de exemplo2

  4. wagner
    março 27, 2008 às 10:45 pm

    desculpe, burrice mimha não tinha visto o botao de zum,

    mas se fosse testo ajudaria mais.

  5. Reginaldo
    dezembro 3, 2008 às 3:45 pm

    Isso eh muito bom tirou uma dúvida minha, parabéns achei muito legal.

  6. Johny Correa Sabino
    abril 17, 2009 às 7:56 pm

    Olá Miss. Ana, achei muito legal seu exemplo, pois enriqueci mais um pouco do meu conhecimento. É de pessoas assim, que nosso planeta precisa, e tenho “certeza que voce irá num momento próximo” ser uma pessoa mais abençoada por nosso grande Deus. Bem, neste instante estou desenvolvendo um aplicativo em ASP.NET com C#. E me deparei c/ um pequeno problema de TELA-PopUp, após carregar minha página principal. Qdo. clico no botão que abre a “PopUp” funciona tudo bem. Mas, em seguida a tela cai ( não chega a fechar, mais fica minimizada ). Agora no FireFox funciona blza. Gostaria de saber se vc pode me dar uma ajudinha.

  7. ke
    junho 8, 2009 às 8:13 pm

    nao precisa tudo isso só para fazer o submenu nao ficar por baixo do select
    é só colocar o iframe depois da ul e fazer no css position: absolute;
    left: 0px; height: 100px; width: 150px; para posicionar.

  8. ke
    junho 8, 2009 às 8:13 pm

    nao precisa tudo isso só para fazer o submenu nao ficar por baixo do select
    é só colocar o iframe depois da ul e fazer no css position: absolute;
    left: 0px; height: 100px; width: 150px; para posicionar.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Comentários Recentes

  • Hugo: conseguir peço desculpas pra vc an
  • Hugo: podemos falar no msn se vc poder é
  • Hugo: vc quer todos os codigos? ou basta
  • Hugo: cara ana claudia estou adorando aqu
  • Ana Claudia: Gente havia um erro no script,no ar
  • Hugo: certo relamente errei feio salvei o

Posts Recetes

Posts Populares

Christmass Theme by Costume Finder
Copyright © 2010 Ana Claudia – Programação e Design Web
Subscribe to Posts | Subscribe to Comments