Menús desplegables en JAWS
Programacion
Algo que me di cuenta con JAWS, fue la falta de un tema que permitiera menús desplegables. Se puede hacer un poco a lo tosco, metiendo en la plantilla del diseño de la página un código HTML estático que despliegue el menú. Pero eso no tiene gracia. Tomando en cuenta que JAWS tiene un gadget que permite la creación de menús de una forma fácil.
Pero la buena estructuración de los componentes de JAWS hacen de esto una tarea relativamente sencilla. Todo esto únicamente con CSS, :) por supuesto.
Para poder lograrlo únicamente tenemos que hacer lo siguiente:
Primero necesitamos una parte de la hoja de estilo que permita los menús desplegables, podemos usar el siguiente código:
{
background-color: #a30000;
color: #000000;
}
#menus
{
width: 100%;
height: 20px;
}
.menu {
font-family: arial, sans-serif; width:990px; position:relative; margin:0; font-size:11px; margin:0px 0 0px 0; z-index:100;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:150px;
height:20px;
text-align:center;
color:#ffcc00;
background:#a30000;
line-height:20px;
font-size:11px;
overflow:hidden;
}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
.menu ul li:hover a
{color:#ffffff;
background:#183884;
}
.menu ul li:hover ul{display:block; position:absolute; top:20px; left:0; width:151px;}
.menu ul li:hover ul li a.hide
{
background:#a30000;
color:#ffffff;
}
.menu ul li:hover ul li:hover a.hide
{background:#183884;
color:#ffffff;
}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a
{display:block; background:#a30000;
color:#ffcc00;}
.menu ul li:hover ul li a:hover
{background:#183884;
color:#ffffff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-151px;}
Nota: Este estilo funciona para navegadores que no son IE. Se supone existe un "IE Hacking" para este menú desplegable, pero se lo quité desde hace tiempo y no recuerdo que le debería agregar :S. Osea que si alguien necesita adaptarlo a IE, nada más tiene que investigar el IE Hacking.
Con el estilo anterior y este código HTML podemos crear un pequeño menú desplegable.
<div class="menu">
<ul>
<li><a class="hide" href="#">Menu 1</a>
<ul>
<li><a href="#">Item 1-1</a></li>
<li><a href="#">Item 1-2</a></li>
<li><a href="#">Item 1-3</a></li>
</ul>
</li>
<li><a class="hide" href="#">Menu 2</a>
<ul>
<li><a href="#">Item 2-1</a></li>
<li><a href="#">Item 2-2</a></li>
<li><a href="#">Item 2-3</a></li>
</ul>
</li>
</ul>
</div>
</div>
Cómo se puede ver la estructuración es bastante sencilla, un div llamado menus, un div de clase menu los cuales agrupan a todo. Y simples listas anidadas para la creación de los menús y submenús en general.
Ahora tenemos que modificar el template de salida del gadget "Menu" para que permita una salida HTML como el ejemplo anterior. Y el template quedaría de esta forma:
<div id="menus">
<div class="menu">
<ul>
<!-- BEGIN section -->
<!-- BEGIN single -->
<li><a href="{url}">{title}</a></li>
<!-- END single -->
<!-- BEGIN withitems -->
<li><a class="hide" href="{url}" title="{title}">{title}</a>
<ul>
<!-- BEGIN item -->
<li><a href="{url}" title="{title}">{title}</a></li>
<!-- END item -->
</ul>
</li>
<!-- END withitems -->
<!-- END section -->
</ul>
</div>
</div>
<!-- END menu -->
Y con esto ya tenemos listo un menú desplegable en JAWS, y podremos usar el gadget Menu para organizarlo :).
Happy Coding!!!
Permalink: http://www.mononeurona.org/users/entry/thot/580
Comentblogs:
