Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rafael Augusto_173176

Menu Drop Down horizontal ?

Por , em Desenvolvimento frontend

Recommended Posts

Thiago Jourdan    3

Thiago Jourdan
Postado

Olá.

 

Eu trabalhei num código aqui pra você e ele ficou um tanto "emperiquitado", mas ignore as linhas de efeito e visualização e você vai entender bem o que o código faz. ^^

 

Código CSS:

 

ul{
list-style:none; /* Questão de efeito */
}
#lista-principal{
border-radius:4px; /* Questão de efeito */
box-shadow:0 0 20px orange; /* Questão de efeito */
background: linear-gradient(orange,yellow 60%); /* Questão de visualização */
transition:0.5s; /* Questão de efeito */
height:40px;
padding:3px 10px;
width:30px;
}
#itens li{
background: linear-gradient(blue,lightblue 50%); /* Questão de visualização */
border-radius:4px; /* Questão de efeito */
box-shadow:0 0 20px blue; /* Questão de efeito */
color:#C33; /* Questão de visualização */
padding:3px; /* Questão de efeito */
width:40px;
height:20px;
float:left; /* alinha os itens à esquerda, e assim eles fica de lado */
}
#itens{
transition:0.5s; /* Questão de efeito */
position:absolute; /* Faz com que a posição seja "manipulável" */
margin-top:-23px; /* Manipula pra ficar nessa posição */
opacity:0; /* Utilizei pra efeito (substitua por "display:none;") */
}
#lista-principal:hover #itens{
transition:0.5s; /* Questão de efeito */
opacity:1; /* Utilizei pra efeito (substitua por "display:block;") */
}
#lista-principal:hover{
width:250px; /* Questão de efeito */
transition:0.5s; /* Questão de efeito */
}

 

Código HTML:

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Menu Drop Down Horizontal</title>
		<!-- Aqui, considere o código CSS -->
	</head>
	<body>
		<ul>
			<li id="lista-principal">Lista
				<ul id="itens">
					<li>Item 1</li>
					<li>Item 2</li>
					<li>Item 3</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

 

Espero que tenha ajudado. :)

 

Se não restar mais nenhuma dúvida, peço que marque um ponto positivo, se desejar, e encerre o tópico. ^^

 

Se ainda tiver dúvidas, fique a vontade para perguntar. ;D

 

Abraços,

 

Thiago Jourdan.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito