• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

subkiller

menu_dropdown

5 mensagens neste tópico

boas

no meu site, eu tenho um menu_dropdown que com 4 opçoes e quando eu passo o rato por uma opçao abre amis para baixo, mas agora eu queria mudar isso e fazer com que as sub-opçoes so abram quando o user carregar numa opçao primaria... mas tou com dificuldades porque javascript nao é o meu forte....  :-[

vou mostrar o codigo:

<script type="text/javascript">
function vertical()
{
var navItems = document.getElementById("menu_dropdown").getElementsByTagName("li");
for(var i=0; i< navItems.length; i++)
{
	if(navItems[i].className == "submenu" || navItems[i].className == "menu")
	{
		if(navItems[i].getElementsByTagName('ul')[0] != null)
		{
			navItems[i].onmouseover=function() { this.getElementsByTagName('ul')[0].style.display="block"; }
			navItems[i].onmouseout=function() { this.getElementsByTagName('ul')[0].style.display="none"; }
		}
	}
}
}
</script>

<?php
function list_menu() //funçao que lista o menu
{

?>
<div id="left-lateral"> <!-- div que leva o menu inteiro -->
<ul id="menu_dropdown" class="menubar"> <!-- MENUBAR -->
	<!-- SUBMENU -->
	<li class="submenu"><a href="index.php"><font color="#999999">Inicio</font></a></li> <!-- Opçao -->
	<li class="submenu"><a href="contactos.php"><font color="#999999">Contactos</a></font></li> <!-- Opçao -->
	<li class="submenu"><a href="#"><font color="#999999">Maquinas</font></a> <!-- Opçao -->
		<ul class="menu"> <!-- MENU -->
			<li><a href="maquinas_cat1.php"><font color="#999999"> <!-- Sub-opçoes que abrem quandoo user passa o rato sobre a opçao -->
			<?php
			$nome_cat=get_content("select nome_cat1 from nome_cats where id=1"); //nome da categoria guardado na base de dados
			echo "$nome_cat";
			?>
			</a></font></li>
			<li><a href="maquinas_cat2.php"><font color="#999999"> <!-- Sub-opçoes que abrem quandoo user passa o rato sobre a opçao -->
			<?php
			$nome_cat=get_content("select nome_cat2 from nome_cats where id=1");
			echo "$nome_cat";
			?>
			</a></font></li>
			<li><a href="maquinas_cat3.php"><font color="#999999"> <!-- Sub-opçoes que abrem quandoo user passa o rato sobre a opçao -->
			<?php
			$nome_cat=get_content("select nome_cat3 from nome_cats where id=1");
			echo "$nome_cat";
			?>
			</a></font></li>
			<li><a href="maquinas_cat4.php"><font color="#999999"> <!-- Sub-opçoes que abrem quandoo user passa o rato sobre a opçao -->
			<?php
			$nome_cat=get_content("select nome_cat4 from nome_cats where id=1");
			echo "$nome_cat";
			?>
			</a></font></li>
		</ul> <!-- FIM MENU -->
	</li>
	<!-- FIM SUBMENU -->
	<li class = "submenu"><a href="#"><font color="#999999">Embalagens</font></a>
		<ul class = "menu"> <!-- MENU -->
			<li><a href="#"><font color="#999999">Cat1</a></font></li> <!-- #999999 = cinzento -->
			<li><a href="#"><font color="#999999">Cat2</a></font></li> <!-- Sub-opçoes que abrem quandoo user passa o rato sobre a opçao -->
			<li><a href="#"><font color="#999999">Cat3</a></font></li> <!-- Sub-opçoes que abrem quandoo user passa o rato sobre a opçao -->
			<li><a href="#"><font color="#999999">Cat4</a></font></li> <!-- Sub-opçoes que abrem quandoo user passa o rato sobre a opçao -->
		</ul> <!-- FIM MENU -->
	</li>
</ul> <!-- FIM MENUBAR -->
</div> <!-- FIM LEFT-LATERAL -->
<?php
} //fecha funcao
?>

é isto... eu psensei que fosse so alterar o evento onmouseover para onclick mas nao funcionou como queria....

alguem ajuda?

cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

fazes a mesma coisa, so que em vez de onmouover,  chamas a funçao por onclick é a mesma coisa

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

eu ja tinha alterado assim mas e quando eu carregava aparecia para baixo mas assim que eu puxasse o rato para baixo para clicar nas sub-opçoes eles desapareciam...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

isso porque tu tens que ter mais padding no css, porque se tiveres pouco tu sais da area que marcaste com onmouseover, e o menu desaprece fica desactivado

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

nao esta a resultar... ou eu é que estou a fazer mal:

o meu css é:

.menubar 
{
text-align: left; /* alinhar texto a esquerda */
list-style-type: none; /* esconder pontos das listas */
width: 150px; /* largura do menu */
/*background-color: #505050; /* fundo do menu */
/*border: 2px solid #505050; /* borda de todo o menu */
display: block; /* exibir tudo em bloco */
/*padding: 10px;*/
}

.submenu
{
background-color: #505050; /* fundo das celulas */
font-size: 12px; /* tamanho das letras */
display: block; /* exibir tudo em bloco */
list-style-type: none; /* esconder pontos das listas */
font-family: "Lucida Grande",Geneva,Arial,Verdana,sans-serif; /* tipo de letra */
font-weight: bold; /* negrito */
border: 2px solid #999999; /* borda da celula */
padding: 10px;
}

.menu
{
list-style-type: none; /* esconder pontos das listas*/
background-color: #505050; /* fundo do espaço que abre (NOTA: ser igual ao fundo da celula e ao fundo do menu) */
display: none; /* nao aparece NOTA: nao aparece ao  iniciar porque so deve aparecer quando o utilizador carregar no submenu */
padding-bottom: 10px;
}

so fica aberto enquanto o rato estiver em cima do link...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora