Este widget permite insertar un menú en nuestra página web. Algunas de sus propiedades son:
- disabled: si su valor es 'true' se desactivará el menú.
- icons: permite definir iconos a mostrar en los submenús.
- position: configura la posición de los submenús con respecto a su menú padre.
En cuanto a sus métodos, disponemos entre otros de:
- collapse(): cerrar el submenú que se encuentre activo.
- destroy(): elimina el menú.
- enable() / disable(): activar/desactivar el menú.
- expand(): abre el submenú asociado al elemento que se encuentre activo.
- focus(): activar un determinado elemento de menú.
Veamos un ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | menú</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Observa que definimos el ancho de los menúes en la clase CSS 'ui-menu' -->
<style type="text/css">
body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
.ui-menu { width:120px; }
</style>
<!-- Observa que agregamos también la librería JQuery UI -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script>
<!-- Agregamos también el archivo CSS del theme que usemos -->
<link type="text/css" rel="stylesheet" href="../lib/css/smoothness/jquery-ui-1.10.1.custom.css" />
<script type="text/javascript">
$(document).ready(function()
{
$( "#menu" ).menu();
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="#">Opción A</a></li>
<li class="ui-state-disabled"><a href="#">Opción B</a></li>
<li><a href="#">Opción C</a></li>
<li>
<a href="#">Opción D</a>
<ul>
<li><a href="#">Opción D1</a></li>
<li><a href="#">Opción D2</a></li>
<li class="ui-state-disabled"><a href="#">Opción D3</a></li>
</ul>
</li>
<li><a href="#">Opción E</a></li>
<li>
<a href="#">Opción F</a>
<ul>
<li>
<a href="#">Opción F1</a>
<ul>
<li><a href="#">Opción F1-1</a></li>
<li><a href="#">Opción F1-2</a></li>
</ul>
</li>
<li><a href="#">Opción F2</a></li>
</ul>
</li>
</ul>
</body>
</html>
EXPLICACIÓN:
- Creamos un 'DIV' con una lista para los elementos principales del menú, y otras sublistas para los diferentes niveles.
- Definimos una clase CSS ui-menu para definir del ancho tanto de los menús como de los submenús.
- Fíjate también en que en la lista usamos la clase CSS ui-state-disabled para desactivar elementos del menú.
- Al cargarse la página se llama al método menu() para mostrarlo.
Vea también: [ Menu ] - [ Menu (ejemplo) ]
