Veja abaixo um menu feito (passe o mouse para expandi-lo)
É incrivelmente simples fazer um menu, basta trabalharmos com ULs e LIs aninhadas. Cada LI será um item do menu, quando houver necessidade de um sub menu, basta colocar um UL dentro do LI.
Segue o código:
<html>
<head>
<!--IMPORTAÇÕES NECESSÁRIAS-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
#menu{
width:200px;
}
#menu ul{
width:200px;
}
</style>
</head>
<body>
<ul id="menu" >
<li class="ui-state-disabled"><a href="#">Desabilitado</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li>
<a href="#">Item</a>
<ul>
<li><a href="#">Item nivel 2</a></li>
<li><a href="#">Item nivel 2</a></li>
<li><a href="#">Item nivel 2</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li>
<a href="#">Item</a>
<ul>
<li>
<a href="#">Item nivel 2</a>
<ul>
<li><a href="#">Item nivel 3</a></li>
<li><a href="#">Item nivel 3</a></li>
<li><a href="#">Item nivel 3</a></li>
</ul>
</li>
<li>
<a href="#">Item nivel 2</a>
<ul>
<li><a href="#">Item nivel 3</a></li>
<li><a href="#">Item nivel 3</a></li>
<li><a href="#">Item nivel 3</a></li>
</ul>
</li>
<li><a href="#">Item nivel 2</a></li>
</ul>
</li>
<li class="ui-state-disabled"><a href="#">Desabilitado</a></li>
</ul>
<script>
$( "#menu" ).menu();
</script>
</body>
</html>
Coloque uma largura no menu para ele não ocupar a tela inteira.
Atenciosamente,
Gustavo Marques
Nenhum comentário:
Postar um comentário