Jump to content

  2. → Viewing Profile: Posts: Itabora

Itabora

Member Since 03/07/2007
Offline Last Active 15/12/2009, 16:28
-----

Posts I've Made

In Topic: Submenu Em Css, Com Dois Níveis

11/12/2009, 08:38

Valeu, Kahor!
Agora consegui!

Abraço.

In Topic: Submenu Em Css, Com Dois Níveis

10/12/2009, 10:26

Obrigado, Thiago.

Vou procurar algo com JS.

Abs.

In Topic: Submenu Em Css, Com Dois Níveis

09/12/2009, 16:54

Olá, Victor.

Obrigado pela rápida resposta. Mas acabo de ficar no mesmo problema (apesar de o menu já funcionar com o teclado). Não sei como fazer um "sub-submenu", que apareça ao lado de algum submenu que eu passe o mouse.

No código, eu alterei, colocando ul para fazer o "sub-submenu", mas não funciona direito (agora, nem no Firefox):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Dropdown acessível via teclado</title>
<style type="text/css">
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; }
#menu li a{
	display:block;
	padding:.2em .5em;
	text-decoration:none;
	color:#154daf;
}
#menu li ul{
	background:#154daf;
}
#menu li ul a{
	color:#fff;
}
</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="#servicos">Serviços</a> 
		<ul> 
			<li><a href="#design">Design</a></li> 
			<li><a href="#prog">Programação</a>
				<ul>
					<li><a href="#prog">Prog. 1</a></li>
				</ul>
			</li>
		</ul> 
	</li>
</ul> 
</body>
</html>

  1. Fórum WMO
  2. → Viewing Profile: Posts: Itabora
  3. Privacy Policy
  4. Regras ·
IPB Skin By Virteq