Métodos para fazer menu dropdown?

groutmoustache · 10 de junho de 2016

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 refazer, com 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; 
}

DiF · 10 de junho de 2016

@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

groutmoustache · 12 de junho de 2016

@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!

DiF · 12 de junho de 2016

@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