Existe um problema com o foco para o link nos menus exclusivamente em CSS3, pois os estilos que ativam os blocos também os desativam quando se vai clicar nos links.
Ao declararmos o estilo:
#menu li ul {display:none;}
Ocorre algo esperado e algo indesejável também. Os submenus ficam fechados (esperado). Ao clicarmos em "Menu 1", ou "Menu 2", etc, os submenus são abertos, devido ao estilo:
#menu li:focus ul {display:block;}
Isto também é esperado, aliás, obrigatório. Mas quando clicamos em uma das opções do submenu, como "1.1", ou "1.2", por exemplo, como o "UL" do submenu perde o foco, ele fecha o submenu antes que o link possa ser ativado.
Como resolver isto ?
O exemplo a seguir resolve este problema com ":active":
<style>
#menu li ul {display:none;}
#menu li ul:active {display:block;}
#menu li ul:active li {display:block;}
#menu li:focus ul {display:block;}
#menu li ul li a {display:block;}
</style>
<ul id="menu">
<li tabindex="1">Menu 1
<ul>
<li tabindex="11"><a href="http://www.copasa.com.br" target="_blank">1.1</a></li>
<li tabindex="12"><a href="http://www.google.com" target="_blank">1.2</a></li>
<li tabindex="13"><a href="http://www.baixaki.com.br" target="_blank">1.3</a></li>
</ul>
</li>
<li tabindex="2">Menu 2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li tabindex="3">Menu 3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
Informamos ao interpretador de páginas que enquanto o grupo "UL" do submenu estiver ativo (ou seja, qualquer de seus elementos, seja UL, seja LI, estiver em foco) ele deverá ficar aberto.
sexta-feira, 27 de novembro de 2015
quinta-feira, 26 de novembro de 2015
Menus HTML5 usando CSS3 e jquery - vários níveis
O post anterior tratava de menus HTML5 usando apenas CSS3.
Neste post vamos mostrar como se faz um menu de mais níveis utilizando jquery.
Por que o jquery é necessário ? Porque o CSS3 ainda não dispõe de uma opção :parent.
Modelo:
<head>
<style>
#menu li ul {display:none;}
#menu li ul:active {display:block;}
#menu li:focus ul {display:block;}
#menu li ul li ul {display:none;}
#menu li:focus ul li ul {display:none;}
#menu li ul li:focus ul{display:block;}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
function confPai(filho){
$( filho ).parent().css( "display", "block" );
}
$( document ).ready(function() {
console.log( "ready!" );
$("#menu li ul li").bind("click",function(){
confPai(this);
});
});
</script>
</head>
<ul id="menu">
<li tabindex="0">Menu 1
<ul>
<li tabindex="01">1.1
<ul>
<li>1.1.1</li>
<li>1.1.2</li>
<li>1.1.3</li>
</ul>
</li>
<li tabindex="02">1.2
<ul>
<li>1.2.1</li>
<li>1.2.2</li>
<li>1.2.3</li>
</ul>
</li>
<li tabindex="03">1.3
<ul>
<li>1.3.1</li>
<li>1.3.2</li>
<li>1.3.3</li>
</ul>
</li>
</ul>
</li>
<li tabindex="1">Menu 2
<ul>
<li tabindex="11">2.1
<ul>
<li>2.1.1</li>
<li>2.1.2</li>
<li>2.1.3</li>
</ul>
</li>
<li tabindex="12">2.2
<ul>
<li>2.2.1</li>
<li>2.2.2</li>
<li>2.2.3</li>
</ul>
</li>
<li>2.3</li>
</ul>
</li>
<li tabindex="2">Menu 3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
Neste post vamos mostrar como se faz um menu de mais níveis utilizando jquery.
Por que o jquery é necessário ? Porque o CSS3 ainda não dispõe de uma opção :parent.
Modelo:
<head>
<style>
#menu li ul {display:none;}
#menu li ul:active {display:block;}
#menu li:focus ul {display:block;}
#menu li ul li ul {display:none;}
#menu li:focus ul li ul {display:none;}
#menu li ul li:focus ul{display:block;}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
function confPai(filho){
$( filho ).parent().css( "display", "block" );
}
$( document ).ready(function() {
console.log( "ready!" );
$("#menu li ul li").bind("click",function(){
confPai(this);
});
});
</script>
</head>
<ul id="menu">
<li tabindex="0">Menu 1
<ul>
<li tabindex="01">1.1
<ul>
<li>1.1.1</li>
<li>1.1.2</li>
<li>1.1.3</li>
</ul>
</li>
<li tabindex="02">1.2
<ul>
<li>1.2.1</li>
<li>1.2.2</li>
<li>1.2.3</li>
</ul>
</li>
<li tabindex="03">1.3
<ul>
<li>1.3.1</li>
<li>1.3.2</li>
<li>1.3.3</li>
</ul>
</li>
</ul>
</li>
<li tabindex="1">Menu 2
<ul>
<li tabindex="11">2.1
<ul>
<li>2.1.1</li>
<li>2.1.2</li>
<li>2.1.3</li>
</ul>
</li>
<li tabindex="12">2.2
<ul>
<li>2.2.1</li>
<li>2.2.2</li>
<li>2.2.3</li>
</ul>
</li>
<li>2.3</li>
</ul>
</li>
<li tabindex="2">Menu 3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
Menus HTML5 usando apenas CSS3
Passou o tempo em que ficávamos "garimpando" códigos Javascript para fazer menus aplicáveis às páginas de Internet. Surgiu o CSS3.
Aqui está o modelo de uma página bem simples com um menu utilizando tags UL/LI e o mínimo de estilo CSS3:
<style>
#menu li ul {display:none;}
#menu li:focus ul {display:block;}
</style>
<ul id="menu">
<li tabindex="0">Menu 1
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
<li tabindex="1">Menu 2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li tabindex="2">Menu 3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
A primeira linha de estilo (na tag style) torna invisíveis todos os conteúdos que atendam à hierarquia de UL precedido por um LI a partir da tag cujo id seja "menu". Isto significa que os blocos internos das opções de primeiro nível da hierarquia UL/LI iniciarão no estado de ocultos (display:none).
A segunda linha de estilo (na tag style) é que define o principal comportamento deste menu UL/LI. Apesar do evento mencionado ser "focus", o menu vai apresentar um comportamento no momento em que o botão do mouse for pressionado sobre o nível hierárquico LI, porém somente naqueles níveis em que exista o atributo "tabindex". Isto se explica pelo fato de que o click de mouse dirige o foco para a LI selecionada.
Experimente trocar o conteúdo da tag style por:
<style>
#menu li ul {display:none;}
#menu li:hover ul {display:block;}
</style>
Desta forma, bastará apenas passar o ponteiro do mouse sobre o primeiro nível de uma tag LI (que possui o atributo tabindex) para que seu bloco correspondente apareça.
Aqui está o modelo de uma página bem simples com um menu utilizando tags UL/LI e o mínimo de estilo CSS3:
<style>
#menu li ul {display:none;}
#menu li:focus ul {display:block;}
</style>
<ul id="menu">
<li tabindex="0">Menu 1
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
</li>
<li tabindex="1">Menu 2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li tabindex="2">Menu 3
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
A primeira linha de estilo (na tag style) torna invisíveis todos os conteúdos que atendam à hierarquia de UL precedido por um LI a partir da tag cujo id seja "menu". Isto significa que os blocos internos das opções de primeiro nível da hierarquia UL/LI iniciarão no estado de ocultos (display:none).
A segunda linha de estilo (na tag style) é que define o principal comportamento deste menu UL/LI. Apesar do evento mencionado ser "focus", o menu vai apresentar um comportamento no momento em que o botão do mouse for pressionado sobre o nível hierárquico LI, porém somente naqueles níveis em que exista o atributo "tabindex". Isto se explica pelo fato de que o click de mouse dirige o foco para a LI selecionada.
Experimente trocar o conteúdo da tag style por:
<style>
#menu li ul {display:none;}
#menu li:hover ul {display:block;}
</style>
Desta forma, bastará apenas passar o ponteiro do mouse sobre o primeiro nível de uma tag LI (que possui o atributo tabindex) para que seu bloco correspondente apareça.
sexta-feira, 21 de agosto de 2015
Corrigindo erros ASP.NET no IIS 7
Muitas vezes ocorrem erros inexplicáveis em scripts ASP.NET copiadas da Internet, e que sabemos estarem 100 % corretas. O que pode estar acontecendo ?
A resposta está no famigerado .NET. Uma framework cujos problemas se comparam aos der compatibilidade de bibliotecas Linux do passado. As versões em conflito produzem esta enorme dor de cabeça.
Por exemplo, você executa uma script que veio de um Visual Studio, e o que acontece ?
Veja abaixo:
Esta sequência instala o dot.Net 4.0 na infra-estrutura do IIS.
A resposta está no famigerado .NET. Uma framework cujos problemas se comparam aos der compatibilidade de bibliotecas Linux do passado. As versões em conflito produzem esta enorme dor de cabeça.
Por exemplo, você executa uma script que veio de um Visual Studio, e o que acontece ?
Veja abaixo:
O que fazer ? Basta ativar o comando "cmd.exe" do bom e velho DOS, nop C:\Windows\System32, tomando o cuidado de ativar com o botâo direito do mouse, escolhendo a opção "Executar como Administrador", e fazer como mostrado a seguir:
Assinar:
Postagens (Atom)