Li e Div esconder e aparecer.

Java

20/05/2016

Muito bom dia a todos =D

Minha duvida é o seguinte,

1* - Como Fazer algumas li`s estarem escondidas dentro de uma div, e quando eu clicar em cima dessa Div, entao as li's aparecerem?


2* - Logo em seguida, conforme as Li's estão aparecendo, se uma vez que eu clicar em cima de uma dessas Li's, elas retrossedecem (ou sumissem) todas ao mesmo tempo abrindo respectivamente uma outra Div relacionada a aquela Li clicada?

Exemplo na imagem em anexo:


Codigo HTML



<html>
<head>
</title> ta ta ta </title>
<body>


<nav id="menu">
<li id="img-menu">
<ul>
<li id="qp"><a href="qp.html">QP</a></li>
<li id="dp"><a href="dp.html">DP</a></li>
<li id="vendas"><a href="vendas.html">VENDAS</a></li>
<li id="compras"><a href="compras.html">COMPRAS</a></li>
<li id="cq"><a href="cq.html">CQ</a></li>
<li id="checklist"><a href="#">CHECKLIST</a></li>
<li id="are-com"><a href="http://www.are.com.br">ARE.COM</a></li>
</ul>
</li>

</body>
</html>


</nav>







Codigo CSS


menu{
		background-color:#ccc;
		background-image: url('../img/menu.png');
		background-size:30px;
		background-repeat:no-repeat;
		background-position:right;
		margin-right:20px;
		margin-top:10px;
		float:right;
		background-color:none;}
		
		
		
		#menu li{
			position:relative;
			text-align:right;
			list-style-type:none;
			float:right;
			background-color:none;
			height:45px;
			line-height:45px;
			}
			
			#menu li#img-menu{
			width:30px;
			background-color:none;
			display:block;
			}
			
			
			#menu li a{
				display:block;
				background-color:#0000cc;
				color:#252525;
				font-size:14px;
				text-decoration:none;}
			
			
		#menu li ul{
			position:absolte;
				margin-top:45px;}
				
				
				#menu li ul,
				#menu li ul li{}
				
				
					
					
					#menu li ul li{
						display:block;
						width:80px;
						height:45px;
						line-height:45px;}
Rafael

Rafael

Curtidas 0

Respostas

Jothaz

Jothaz

20/05/2016

Não entendi o que você quer.

Cadê a imagem?

Ou post o link de onde você viu algo parecido.
GOSTEI 0
POSTAR