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.
Assinar:
Postagens (Atom)