Ir ao conteúdo
  • Cadastre-se
Joao_Lucaas

RESOLVIDO Métodos para fazer menu dropdown?

Recommended Posts

Galera, eu já li vários livros de HTML, cursos e vídeos, porém, eu aprendi só teoria. Resolvi colocar em prática, uma vez que eu entendia qual a função de cada tag.

Agora que estou praticando, percebi que ao replicar um template free eu consigo fazer tudo, mas depois não sei refazercom facilidade. Depois disso, passei a focar em aprender como fazer o menu, sem outros conteúdos, em código.

 

Passadas frustrações com a "trollagem do CSS" (posicionando onde eu não quero :(), consegui entender melhor esta linguagem e estruturar o dropdown, porém, continuo com alguns problemas, que só poderão ser entendido se vocês usarem os seguinte códigos, em vossos navegadores e me informarem o que se passa e como resolver.

Ps I: Estou usando somente o básico do CSS, junto com HTML, para praticar o segundo. Depois, vou ler mais sobre CSS e me aprofundar mais.

Ps II: Em qual momento vocês acham que devo começar à aprender frameworks, como bootstrap?

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Teste!</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<nav>
		<ul class="menu">
			<li>
				<a href="#">Lista 1</a>
				
				<ul class="submenu">
					<li>
						<a href="#">Lista 1.1</a>
					</li>
					
					<li>
						<a href="#">Lista 1.2</a>
					</li>
				</ul>
				
			</li>
			
			<li>
				<a href="#">Lista 2</a>
				
				<ul class="submenu">
					<li>
						<a href="#">Lista 2.1</a>
					</li>
					
					<li>
						<a href="#">Lista 2.2</a>
					</li>
				</ul>
				
			</li>
			
		</ul>
	</nav>
</body>
</html>
ul{
	list-style: none;
	text-align: center;
}

a{
	text-decoration: none;
}

.menu{
	border: 5px solid greenyellow;
	padding: 0;
	margin: 20px;	
	position: absolute;
}

.menu li{
	border: 2px solid green;
	display: inline-block;	
	margin: 0;
}

.submenu{
	display: none;
	margin: 0;
	border: 2px solid black;
}

.submenu li{
	display: block;
	position: relative;
}

.menu li:hover .submenu{
	display: block;
	border: 2px solid red;
	padding: 0; 
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Joao_Lucaas O erro praticamente está na definição das regras css de posição relativa e absoluta e algumas outras ali.

 

Veja: https://jsfiddle.net/o8cfx0za/

 

Esta leitura do Maujor é ótima para entender como funciona: http://www.maujor.com/tutorial/ddownmenu.php

Contudo veja este outro exemplo usando a técnica listless!   https://jsfiddle.net/3jd6aoLy/

 

Repare que dentro do nav  há vários blocos Div,  retire um a um, ou acrescente um a  um e veja!

Ao meu ver é menos complicado do que fazer com listas :) 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@dif 

Seus códigos me ajudaram à entender oquê eu estava errando. Agora, consigo criar o dropdown com listas e sem listas.

Devido aos exemplos mostrados, tenho mais dúvidas:

 

O método listless é tão semântico quanto o unordered list, para os bots de search engines?

  • Quais as vantagens de cada método, se comparados?

Listless utilizado em menus é acessível aos leitores de telas? - Eu quero dizer: será lido  de forma correta?
 


Obrigado, novamente!

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Joao_Lucaas

Creio que para o SEO nada muda.  Talvez possa futuramente ser até melhor.

Porque o <nav> é um elemento do HTML5. Logo, ele veio para substituir o elemento  <ul id="nav">.

 

O elemento <nav> não precisa de um grupo de listas.  Por isso podemos substituir por divs, ou sections, além de spans.

 

Sobre os leitores de tela, bom.. creio que se estivéssemos em 2013, poderia não funcionar.. mas hoje em dia, pode ser que sim, Não vou afirmar porque nunca testei um e foi a primeira vez que pesquisei sobre o assunto!

 

As fontes das quais eu achei bem relevante é:

https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/

https://www.sitepoint.com/are-navigation-lists-necessary/

 

Mas uma coisa sobre as listas que é quase unanime: é bem mais fácil fazer menus com lista  rsrsrs

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×