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>
Nenhum comentário:
Postar um comentário