Menu com Jquery, HTML5, CSS3 com PIE.htc para compatibilidade com Internet Explorer

Um dos problemas dos grupos que desenvolvem softwares para a Web se refere aos browsers do mercado. A palavra é compatibilidade. Não se preocupem, pois ao final do artigo daremos o código completo do exemplo em HTML.

São 3 os principais browsers utilizados:

• Google Chrome;
• Firefox;
• Internet Explorer.

O último é uma praga que se recusa a acompanhar os padrões vigentes ao tempo em que são disponibilizados, principalmente a especificação HTML5. Isto pode ser contornado utilizando-se uma biblioteca javascript de nome HTML5.js, disponível no repositório da Google neste endereço. Para outras compatibilidades com o padrão CSS3, é preciso incluir também a biblioteca PIE.htc, disponível neste endereço.

Cabeçalho do HTML (HEAD)

Conforme dito, o corpo do HEAD do HTML fica assim:

<script src="js/html5.js"></script>
<link rel="stylesheet" href="MenuMeyer.css">
<script src="js/jquery-1.9.1.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.js"><\/script>')</script>

A folha de estilo padrão CSS3

A folha de estilo mencionada (MenuMeyer.css) fica da seguinte forma:

UL.xmenu LI {
list-style-type: none;
font-family: Verdana;
font-size: 14px;
}
UL.xmenu.horizontal LI {
float: left;
}
UL.xmenu.horizontal LI.ultimo {
float: none;
}
UL.xmenu LI A {
border-style: solid; 
border-width: 1px; 
border-color: gray; 
border-radius: 6px;
behavior: url(PIE.htc);
text-decoration: none;
}
UL.xmenu LI A SPAN {
font-weight: normal;
color: royalblue;
background-color:gold;
}
UL.xmenu LI A SPAN.active {
font-weight: bold;
color: gold;
background-color: royalblue;
}

Ou seja, a tag ou sequência de tags que precisar de compatibilidade (como UL nesta folha de estilos) deverá ter a inclusão da cláusula "behavior" típica do Internet Explorer, pois muitas de suas versões tem dificuldade para lidar com o padrão CSS3.

Os menus utilizando as tags UL e LI

Os menus podem ser horizontais ou verticais.

Menu horizontal

   <ul class="xmenu horizontal">
<li><a href="#"><i class="xicone"></i><span>Opção 1</span></a></li>
<li><a href="#"><i class="xicone"></i><span name="Op12">Opção 2</span></a></li>
<li class="ultimo"><a href="#"><i class="xicone"></i><span name="Op13">Opção 3</span></a></li>
   </ul>

Menu Vertical

   <ul class="xmenu vertical">
<li><a href="#"><i class="xicone"></i><span name="Op21">Opção 1</span></a></li>
<li class="active"><a href="#"><i class="xicone"></i><span name="Op22">Opção 2</span></a></li>
<li><a class="ultimo" href="#"><i class="xicone"></i><span name="Op23">Opção 3</span></a></li>
   </ul>

Basicamente, a diferença entre um e outro é o atributo "float". Este atributo é configurado pelo uso da classe xmenu, subclasses horizontal e vertical.

Código de inicialização javascript

Por se tratar de um HTML baseado em jquery (pois a palavra chave aqui é compatibilidade), fazemos a seguinte definição quando o documento está totalmente carregado:

// Ativação
$( document ).ready(function() {
$("i.xicone").html('<img border=0 src="img/estrela.gif">');
$("UL.xmenu>LI>A>SPAN").bind({
"mouseover": function() {
$(this).addClass("active");
},
"mouseout": function() {
$(this).removeClass("active");
},
"click": function(){
bmyClickOption(this);
}
});
});

O evento "onclick" aponta para a função bmyClickOption(). Esta faz uma associação entre o elemento do modelo DOM do HTML carregado que provocou o evento e a função correspondente cujo nome é o nome do elemento (do atributo name) concatenado com a string "Click".

// Manipulação do Click
function bmyClickOption(pElem){
var nomeElem = $(pElem).attr("name");
if( nomeElem == null ){
alert('Sem função específica para manipulação deste evento.');
} else {
var funcao = nomeElem + "Click()";
eval(funcao);
}
}


 Daí termos o seguinte código javascript para manipular os eventos dos elementos nas tags SPAN:

// Biblioteca de eventos click - INICIO
function Op11Click(){
alert("Opção 11");
}
function Op12Click(){
alert("Opção 12");
}
function Op13Click(){
alert("Opção 13");
}
function Op21Click(){
alert("Opção 21");
}
function Op22Click(){
alert("Opção 22");
}
function Op23Click(){
alert("Opção 23");
}

Código completo

<html>
<head>
<script src="js/html5.js"></script>
<link rel="stylesheet" href="MenuMeyer.css">
<script src="js/jquery-1.9.1.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.js"><\/script>')</script>
<script type="text/javascript">
// Biblioteca de eventos click - INICIO
function Op11Click(){
alert("Opção 11");
}
function Op12Click(){
alert("Opção 12");
}
function Op13Click(){
alert("Opção 13");
}
function Op21Click(){
alert("Opção 21");
}
function Op22Click(){
alert("Opção 22");
}
function Op23Click(){
alert("Opção 23");
}
// Biblioteca de eventos click - FIM
// Manipulação do Click
function bmyClickOption(pElem){
var nomeElem = $(pElem).attr("name");
if( nomeElem == null ){
alert('Sem função específica para manipulação deste evento.');
} else {
var funcao = nomeElem + "Click()";
eval(funcao);
}
}
// Ativação
$( document ).ready(function() {
$("i.xicone").html('<img border=0 src="img/estrela.gif">');
$("UL.xmenu>LI>A>SPAN").bind({
"mouseover": function() {
$(this).addClass("active");
},
"mouseout": function() {
$(this).removeClass("active");
},
"click": function(){
bmyClickOption(this);
}
});
});
</script>
</head>
<body>
<h2>Menu Horizontal</h2>
   <div>
   <ul class="xmenu horizontal">
<li><a href="#"><i class="xicone"></i><span>Opção 1</span></a></li>
<li><a href="#"><i class="xicone"></i><span name="Op12">Opção 2</span></a></li>
<li class="ultimo"><a href="#"><i class="xicone"></i><span name="Op13">Opção 3</span></a></li>
   </ul>
   </div>
   <h2>Menu Vertical</h2>
   <div>
   <ul class="xmenu vertical">
<li><a href="#"><i class="xicone"></i><span name="Op21">Opção 1</span></a></li>
<li class="active"><a href="#"><i class="xicone"></i><span name="Op22">Opção 2</span></a></li>
<li><a class="ultimo" href="#"><i class="xicone"></i><span name="Op23">Opção 3</span></a></li>
   </ul>
   </div>
<body>
</html>