ql é o nome para o tipo de menu?

rvsrafael · Fevereiro 29, 2008

Bom galera vê se alguem pode me ajudar

eu fiz um menu p/ minha pag. menu DDown!

fiko perfeito o funcionamento!

mas tive um probleminha abrir as opçoes ele vai se estendendo para o centro da tela

atrapalhando a visualização da pag.

Gostaria de um menu q deslocase p/ baixo!

como uma ramificação

tipo:

__CARGO

___________enfermeiro

_______________enf. geral

__________pedreiro

__________medico

__________motorista

acho deu p/ entender né....

um menu_sub_sub q vai delocando p/ baixo

se alguem tiver um tutorial tbm ajuda

desde já grato!

um tipo esse aki pessoal

http://globoesporte.globo.com/

Balero · Fevereiro 29, 2008

rvsrafael, da uma lida aqui, acho que irá te ajudar:

http://www.maujor.com/tutorial/ddownmenu-a.php

Até mais ;)

rvsrafael · Março 2, 2008

rvsrafael, da uma lida aqui, acho que irá te ajudar:

http://www.maujor.com/tutorial/ddownmenu-a.php

Até mais ;)

Barelo, eu tive esse como base p/ fazer o DDown...

agora esse gostaria q estendece para baixo!

como o site do globo esporete por exemplo:

Exemplo:

no segundo menu do globoesporte.com

você vai em: FUTEBOL(clica)/Brasileiro(clica)/opção desejada(clica escolhendo)

ASSIM Q EU PRECISO!!

certo? vê se pod me ajudar!!!

grato http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Mau B. Miranda · Março 2, 2008

Fala ae "rvsrafael" beleza!!!

Cara você já tentou o seguinte:

- Cria as <ul> uma dentro da outra conforme necessário, todas abertas para você ver posição e tamanho qndo elas abrirem;

- Depois cria uma classe ".on" que será apenas "display:inline" e outra classe ".off" com "display:none";

- Após isso com js DOM, você faz a ul mudar de classe!!!!

O q acontece é q qndo clicar no link q tiver dentro da <li> o outro nível muda de classe para "on", display inline!!

Da pra melhorar o js, o q costumo usar é algo assim:

CODE

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
ul {
	margin:0;
	padding:0;
}
.on {
	display:inline;
}
.off {
	display:none;
}
-->
</style>
<script language="javascript" type="text/javascript">
function showSecond(v) 
{
	if(document.getElementById('secundaria'+v).className == 'off')
	{
		document.getElementById('secundaria'+v).className = "on";
	}
	else 
	{
		document.getElementById('secundaria'+v).className = "off";
	}
}
function showThird(v) 
{
	if(document.getElementById('terciaria'+v).className == 'off')
	{
		document.getElementById('terciaria'+v).className = "on";
	}
	else 
	{
		document.getElementById('terciaria'+v).className = "off";
	}
}
</script>
</head>
 
<body>
<ul id="primaria">
	<li><a href="#" onclick="showSecond(1)">Opção 1</a>
		<ul id="secundaria1" class="off">
			<li><a href="#" onclick="showThird(1)">Opção A</a></li>
				<ul id="terciaria1" class="off">
					<li><a href="#">Opção 1.2</a></li>
					<li><a href="#">Opção 1.3</a></li>
				</ul>
			<li><a href="#">Opção B</a></li>
		</ul>		</li>
	<li><a href="#" onclick="showSecond(2)">Opção 2</a>
		<ul id="secundaria2" class="off">
			<li><a href="#">Opção A</a></li>
			<li><a href="#">Opção B</a></li>
		</ul></li>
	<li><a href="#">Opção 3</a></li>
</ul>
</body>
</html>

Espero q essa idéia ajude!!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[]'s

rvsrafael · Março 6, 2008

Fala ae "rvsrafael" beleza!!!

Cara você já tentou o seguinte:

- Cria as <ul> uma dentro da outra conforme necessário, todas abertas para você ver posição e tamanho qndo elas abrirem;

- Depois cria uma classe ".on" que será apenas "display:inline" e outra classe ".off" com "display:none";

- Após isso com js DOM, você faz a ul mudar de classe!!!!

O q acontece é q qndo clicar no link q tiver dentro da <li> o outro nível muda de classe para "on", display inline!!

Da pra melhorar o js, o q costumo usar é algo assim:

CODE

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">



</style>

<script language="javascript" type="text/javascript">

function showSecond(v)

{

if(document.getElementById('secundaria'+v).className == 'off')

{

document.getElementById('secundaria'+v).className = "on";

}

else

{

document.getElementById('secundaria'+v).className = "off";

}

}

function showThird(v)

{

if(document.getElementById('terciaria'+v).className == 'off')

{

document.getElementById('terciaria'+v).className = "on";

}

else

{

document.getElementById('terciaria'+v).className = "off";

}

}

</script>

</head>

<body>

<ul id="primaria">

<li><a href="#" onclick="showSecond(1)">Opção 1</a>

<ul id="secundaria1" class="off">

<li><a href="#" onclick="showThird(1)">Opção A</a></li>

<ul id="terciaria1" class="off">

<li><a href="#">Opção 1.2</a></li>

<li><a href="#">Opção 1.3</a></li>

</ul>

<li><a href="#">Opção B</a></li>

</ul> </li>

<li><a href="#" onclick="showSecond(2)">Opção 2</a>

<ul id="secundaria2" class="off">

<li><a href="#">Opção A</a></li>

<li><a href="#">Opção B</a></li>

</ul></li>

<li><a href="#">Opção 3</a></li>

</ul>

</body>

</html>

Espero q essa idéia ajude!!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[]'s

Valeu mesmo parcero!

rodo perfeito!!!

agora meu proximo passo é arredondar os cantos... se puder me ajudar!!

abgraço

grato!

Mau B. Miranda · Março 6, 2008

Opa, fala ae rvsrafael, beleza!!!

Q bom q o esquema q coloquei ai serviu pra você!!! Como falei é assim q costuma usar qndo tenho q fazer algo aparecer e desaparecer a nível de bloco!!!! Simples e funcional!!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

E em relação aos cantos arredondados, vamos dar um jeito sim, isso tbm não é dificil!!!!

Se tiver uma imagem de como você quer o menu, coloca ae q dae fica mais fácil pra fazer o código, até pq não sei qual e qntos cantos arredondados você precisa!!!! http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

Nesse link, o Maujor mostra a uma técnica q dá pra ser adaptada para outros casos de cantos arredondados!!!

http://www.maujor.com/tutorial/sliding-door.php

[]'s

rvsrafael · Março 6, 2008

Opa, fala ae rvsrafael, beleza!!!

Q bom q o esquema q coloquei ai serviu pra você!!! Como falei é assim q costuma usar qndo tenho q fazer algo aparecer e desaparecer a nível de bloco!!!! Simples e funcional!!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

E em relação aos cantos arredondados, vamos dar um jeito sim, isso tbm não é dificil!!!!

Se tiver uma imagem de como você quer o menu, coloca ae q dae fica mais fácil pra fazer o código, até pq não sei qual e qntos cantos arredondados você precisa!!!! http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

Nesse link, o Maujor mostra a uma técnica q dá pra ser adaptada para outros casos de cantos arredondados!!!

http://www.maujor.com/tutorial/sliding-door.php

[]'s

opa... ajuda é sempre bem vinda!

vô colocar abaixo o codigo!

se puder me ajudar....

<html>
<head>

<title>PROJETO DO MENU!</title>

<style type="text/css">


/*removeremos as marcas (bullets)*/
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
   /* font:menu;	 */
	font-size: 10px;
	font-family: Verdana, Geneva, Arial, sans-serif;

	}

/*cor do fundo*/
ul li a {
	display: block;
	text-decoration: none;
	color: #003399;
	background: #FFFF00;
	padding: 5px;
	border: 2px solid #003399;
	border-bottom: 0;
	}
	
	
/*bug*/
 /* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */


/*fim do menu linha */
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 140px;
	border-bottom: 2px solid #003399;

	}


/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */


/*fundo ao passa do mouse */
li a:hover {
	   /* background-image:url(img/menu_fundo1.gif);*/
		color: #FFFFFF;
		font: bold 100%;
		background: #003399;
				}

.on {
display:inline;
}
.off {
display:none;
}
-->
</style>

<script language="javascript" type="text/javascript">
function showSegundo(v)
 {	if(document.getElementById('segundo'+v).className == 'off')
 	{		document.getElementById('segundo'+v).className = "on";	}
	 	else 	{		document.getElementById('segundo'+v).className = "off";	}}

		 function showTerceiro(v)
		 {	if(document.getElementById('terceiro'+v).className == 'off')
		 	{		document.getElementById('terceiro'+v).className = "on";	}
			 	else 	{		document.getElementById('terceiro'+v).className = "off";	}}
			 	
			 	
			 	function showQuarto(v)
			   {	if(document.getElementById('quarto'+v).className == 'off')
				 	{		document.getElementById('quarto'+v).className = "on";	}
						  else 	{		document.getElementById('quarto'+v).className = "off";	}}

			 		 function showQuinto(v)
				   {	if(document.getElementById('quinto'+v).className == 'off')
		 			   {		document.getElementById('quinto'+v).className = "on";	}
				   		  else 	{		document.getElementById('quinto'+v).className = "off";	}}
				   	
						function showSexto(v)
					   {	if(document.getElementById('sexto'+v).className == 'off')
						 	{		document.getElementById('sexto'+v).className = "on";	}
						   		 else 	{		document.getElementById('sexto'+v).className = "off";	}}
</script>




</head>
<body>
<ul id="primaria">

	 <li><a href="#" onClick="showSegundo(1)">*Home</a>  </li>


	<li><a href="#" onClick="showSegundo(2)"><div class="style1">*Faculdade</div></a>
		   <ul id="segundo2" class="off">
			   <li><a href="#">Histórico</a></li>
			   <li><a href="#" onClick="showTerceiro(2)">-Administração</a></li>
					   <ul id="terceiro2" class="off">
							<li><a href="#">---Diretoria Geral</a></li>
						   <li><a href="#">---Coordenadoria de Cursos e Estágios</a></li>
					   </ul>
			   <li><a href="#">Expediente</a></li>
			   <li><a href="#">Núcleo de P. Pesquisa</a></li>
			</ul>
	 </li>

	 <li><a href="#" onClick="showSegundo(3)">*Graduação</a>
		   <ul id="segundo3" class="off">
			   <li><a href="#" onClick="showTerceiro(3)">*-*Agraria</a></li>
					   <ul id="terceiro3" class="off">
						   <li><a href="#">---Agronomia</a></li>
						   <li><a href="#">---Engenharia Ambiental</a></li>
						   <li><a href="#">---Medicina Veterinaria</a></li>
					   </ul>
			   
			  <li><a href="#" onClick="showQuarto(3)">*-*Biologica</a></li>
					   <ul id="quarto3" class="off">
						  <li><a href="#">---Ciências Biológicas</a></li>
						  <li><a href="#">---Educação Física</a></li>
						  <li><a href="#">---Enfermagem</a></li>
					   </ul>
					   
			   <li><a href="#" onClick="showQuinto(3)">*-*Exatas</a></li>
					   <ul id="quinto3" class="off">
						  <li><a href="#">---Ciência da Computação</a></li>
						  <li><a href="#">---Desenho Industrial</a></li>
					   </ul>
					   
			   <li><a href="#" onClick="showSexto(3)">*-*Humanas</a></li>
					   <ul id="sexto3" class="off">
						   <li><a href="#">---Administração</a></li>
						   <li><a href="#">---Ciências Econômicas</a></li>
						   <li><a href="#">---Direito</a></li>
						   <li><a href="#">---Geografia</a></li>
					   </ul>
			 </ul>
	   </li>
	   
	<li><a href="#" onClick="showSegundo(4)">*Convênios</a>
		   <ul id="segundo4" class="off">
			   <li><a href="#">bla bla bla 1</a></li>
			   <li><a href="#">bla bla bla 2</a></li>
			   <li><a href="#">bla bla bla 3</a></li>
			</ul>
	</li>



  </ul>
</li>
	
</ul>
</body>
</html>

gostaria q o home - arredonda cantos superior D/E

--------- convenios - arredonda cantos inferior D/E

obrigado....

Mau B. Miranda · Março 6, 2008

Fala ae rvsrafael, beleza

Pelo que entendi você quer q esse menu esteja inteiro em um box q tenha os cantos arredondados, é isso??!!

E o menu vai ter largura fixa, ou pode variar??!!! E esse "box" o fundo dele é cor chapada ou degrade??!! Vai ter algum border?!!

HEhehehe agora as perguntas são minhas!!!aheuaehauhea

Se for largura fixa e cor sólida é mais tranquilo!!!

[]'s

rvsrafael · Março 6, 2008

Fala ae rvsrafael, beleza

Pelo que entendi você quer q esse menu esteja inteiro em um box q tenha os cantos arredondados, é isso??!!

E o menu vai ter largura fixa, ou pode variar??!!! E esse "box" o fundo dele é cor chapada ou degrade??!! Vai ter algum border?!!

HEhehehe agora as perguntas são minhas!!!aheuaehauhea

Se for largura fixa e cor sólida é mais tranquilo!!!

[]'s

como é bom t ver por aki véio....

é o seguinte!

_realmente é box com você disse d cantos arredondados!

_o menu vai sim ter uma largura fixa....embora a altura pod variar, pois em alguns campos o item do menu é extenso!

se você tiver uma ideia p/ melhorar!!!

_ele de inicio seria chapada, mas gostaria sim de um degrade!!!

(penso no seguinte tenho q diferenciar as opções de acordo com sua escala)

ex.: funcionario(uma cor) / cozinha(outra cor) / nome(outra)...

_agora arrespeito da borda seria interessante para a separação!

valeu obrigado pela atenção!

Arquivado

ql é o nome para o tipo de menu?

Recommended Posts

rvsrafael 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Balero 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rvsrafael 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mau B. Miranda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rvsrafael 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mau B. Miranda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rvsrafael 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mau B. Miranda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

rvsrafael 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Fóruns

Tempo Real

Informação importante