Ter uma navegação fácil de usar é importante para qualquer site.
Com CSS você pode transformar menus HTML enfadonhos em barras de navegação bonitas.
Uma barra de navegação precisa de HTML padrão como base.
Em nossos exemplos construiremos a barra de navegação a partir de uma lista HTML padrão.
Uma barra de navegação é basicamente uma lista de links, então usar os elementos <ul> e <li> é perfeito senso:
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
Agora vamos remover os marcadores, as margens e o preenchimento da lista:
Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Exemplo explicado:
list-style-type: none;- Remove as balas. Uma barra de navegação não precisa de marcadores de lista
margin: 0;para remover as configurações padrão do navegador
padding: 0;para remover as configurações padrão do navegador
O código no exemplo acima é o código padrão usado nas barras de navegação verticais e horizontais, sobre o qual você aprenderá mais nos próximos capítulos.