Menu de site com Accessibilidade

Ghost01 · Maio 26, 2011

Bom galerinha estou com um trabalho de faculdade para fazer que é construir um site com algumas regras da acessibilidade da w3c, bom pesquisando consegui um script que cria um menu onde ele funcione com o mouse e com o teclado acessando as opções, bom o script funciona, porem tenho necessidade de criar um sub-menu do sub-menu, porem esse sub-menu quando utilizo o mouse ele já esta exibindo, e quando eu utilizo o tab, fuinciona porem quando passa para o outro menu principal ele não esta escondendo o sub-menu do anterior.

Espero que consigam entender, vou colocar os codigos tanto da pagina como do arquivo css.

Codificação da Pagina HTML

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="pt" lang="pt">
<head>
<style>@import "teste.css";</style>
&lt;script type="text/javascript">
	function enableSubMenus(){
		var lis = document.getElementsByTagName('li');
		for (var i = 0, li; li = lis[i]; i++){
		 var link = li.getElementsByTagName('a')[0];
		 if (link){
			link.onfocus = function(){
			 var ul = this.parentNode.getElementsByTagName('ul')[0];
			 if (ul)
			 ul.style.display = 'block';
			}
			var ul = link.parentNode.getElementsByTagName('ul')[0];
			if (ul){
			 var ullinks = ul.getElementsByTagName('a');
			 var ullinksqty = ullinks.length;
			 var lastItem = ullinks[ullinksqty - 1];
			 if (lastItem){
				lastItem.onblur = function(){
				 this.parentNode.parentNode.style.display = '';
				}
			 }
			}
		 }
		}
	}
	window.onload = enableSubMenus;
</script>
</head>
<body>
<ul id="menu"> 
	<li><a href="#inicio">Início</a></li>

    <li> 
	<li><a href="#servicos">Serviços</a> 
		<ul> 
			<li><a href="#design">Design</a> 
            	<ul>
            		<li><a href="#teste">Teste de Sub</a></li>
            	</ul>
            </li>
		</ul>
</li>
    </li>

<li><a href="#solucoes" class="arrow">Soluções  </a>
    	<ul>
			<li><a href="#outro1">Outro1</a></li> 
			<li><a href="#outro2">outro2</a></li>
        </ul>      	
	</li>
</ul> 
</body>
</html>[/codebox]

Código do CSS

[codebox]/***************************
Menu
***************************/

#menu > li > a.arrow {background-image: url(arrow-down.gif)}

ul{ list-style:none; }

#menu li {
float:left;
position:relative;
}
#menu li ul {
display:none;
position:absolute;
top:0;
left:0;
margin:1.5em 0 0 0;
padding:0;
}

#menu li:hover ul { display:block; }

/*******************************
Configurações do Menu
******************************/
#menu li a{
display:block;
padding:.2em .5em;
text-decoration:none;
color:#ff0000;
}

/*******************************
Cor de fundo dos sub-menus
******************************/
#menu li ul{
background:#999999;
}

/*******************************
Cor do texto dos sub-menus
******************************/
#menu li ul a{
color:#000000;
}

#menu li a.arrow ,
#menu > li > a.arrow {
background-repeat: no-repeat;
background-position: right 50%
}

Espero que consigam me ajudar.

Ghost01 · Maio 27, 2011

Bom galera, sobre os menus não estarem sumindo depois que perde-se o foco seja do mouse ou seja do teclado consegui resolver, segue o codigo corrigido:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="pt" lang="pt">
<head>
<style>@import "teste.css";</style>
<script type="text/javascript">
	function enableSubMenus(){
		var lis = document.getElementsByTagName('li');
		for (var i = 0, li; li = lis[i]; i++){
		 var link = li.getElementsByTagName('a')[0];
		 if (link){
			link.onfocus = function(){
			 var ul = this.parentNode.getElementsByTagName('ul')[0];
			 if (ul)
			 ul.style.display = 'block';
			}
			var ul = link.parentNode.getElementsByTagName('ul')[0];
			if (ul){
			 var ullinks = ul.getElementsByTagName('a');
			 var ullinksqty = ullinks.length;
			 var lastItem = ullinks[ullinksqty - 1];
			 if (lastItem){
				lastItem.onblur = function(){
				 this.parentNode.parentNode.style.display = '';
				}
			 }
			}
		 }
		}
	}
	window.onload = enableSubMenus;
</script>
</head>
<body>
<ul id="menu"> 
	<li><a href="#inicio">Início</a></li>

	<li><a href="#solucoes">Empresa</a>
    	<ul>
			<li><a href="#outro1">Emp?</a>
            	<ul>
                	<li><a href="#teste">Emp?01</a></li>
                </ul>
            </li> 
			<li><a href="#outro2">Emp?03</a></li>
        </ul>      	
	</li>

	<li><a href="#solucoes">Soluções</a>
    	<ul>
			<li><a href="#outro1">Outro1</a>
            	<ul>
                	<li><a href="#teste">Teste</a></li>
                </ul>
            </li> 
			<li><a href="#outro2">outro2</a></li>
        </ul>      	
	</li>

</ul> 
</body>
</html>[/codebox]

Porem agora o problemas esta no css, não consegui criar um css para fazer o sub-sub-menu sair de cima dele jogando ele para lateral, por exemplo:

A opção Emp?01 está ficando emcima do emp?03 e não na lateral do Emp?, será que alguém pode me ajudar? O arquivo css ta no tópico.

Entrar

Menu de site com Accessibilidade

Pergunta

Ghost01

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Ghost01

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades