Posted by Ana Claudia on mar 9, 2007 in
CSS,
Web Standards Muita gente confunde esses 3 conceitos como sinônimos, que embora estejam intimamente ligados, tem definições diferentes. Tentarei explicar resumidamente cada uma delas.
Tableless
Metodologia de criação de páginas sem a utilização de tabelas para a composição de layouts, geralmente com uso de Divs. Isso não significa que quando você desenvolve uma página tableless você não possa usar mais tabelas, mas sim usá-las para sua verdadeira função, a de mostrar dados tabulares, como por exemplo, uma tabela de preços.
Web Standards
Termo que se refere aos padrões web como um todo e não somente linguagem de Marcação (HTML, XHTML) e CSS. Estes padrões foram definidos pela W3C a fim de terminar com a guerra dos browsers e organizar melhor o código para facilitar seu entendimento.
Semântica
A semântica serve para estruturar e nomear elementos corretamente dentro dos padrões web. Um título de uma página pode ser escrito como <div class=’titulo’>Titulo </div> que ele estará seguindo o padrõ determinado pelo W3c, mas será que eleé semanticamente correto? A resposta é não, para isso termos as tags de Títulos(h1,h2,h3), onde para um título principal utiliza-se a tag <h1> e um subtítulo a tag <h2>. Outro exemplo é quanto a utilização de nomes para classes e IDs. Uma classe estará melhor estruturada semanticamente quando seu nome condiz a sua funcionalidade do que os atributos que ela contém. Um link para paginação seria melhor estruturado com o nome de œPaginacao do que LinkAzul.
Fazendo uma análise do que foi abordado, um site cheio de Divs aninhadas pode até ser considerado tableless, assim como um site estruturado em tabelas com elementos e atributos válidos segundo a W3c também é um site web Standards (difícil pensar nisso, mas é verdade). Além desses exemplos e de outros apresentados podemos perceber que estruturar estas 3 regrinhas básicas para criar páginas acessíveis não é tarefa fácil, mas não é impossível. O que você deve ter em mente é que esses conceitos, embora distintos, devem ser utilizados juntos para uma melhor interação entre máquina e humano, com a finalidade de melhor entendimento entre ambos e que também é conhecida como usabilidade, mas isso é assunto para outro Post.
Posted by Ana Claudia on fev 20, 2007 in
CSS,
Javascript,
Web Standards 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?
