F�rum Li e Div esconder e aparecer. #554257

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

Curtir t�pico

+ 0

Responder

Posts

20/05/2016

Jothaz

N�o entendi o que voc� quer.

Cad� a imagem?

Ou post o link de onde voc� viu algo parecido.

Responder

Gostei + 0