[Home] [HTML] [CSS] [Contacto]

SMPW

CSS

CSS: Cascading Style Sheets

Aula OT: 03/04/2024

Criação de uma barra de navegação com CSS

Um dos componentes importantes de um site é facilitar a navegação. Com CSS pode-se transformar menus simples (HTML com texto) em barras de navegação mais apelativas.
Tal como sugerido pelo w3schools, podemos criar uma barra de navegação utilizando uma lista HTML.

Ou seja, algo assim:

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="html.html">HTML</a></li>
  <li><a href="css.html">CSS</a></li>
  <li><a href="contacto.html">Contacto</a></li>
</ul>

Mas isto em HTML resulta apenas nisto:

Mas pretendemos obter algo com este aspeto, como ?

Resposta: Em HTML nada

Utilizar apenas CSS, tal como fizemos com o botão

Vamos por partes:

Como fazer para que a lista fique na horizontal:

Ou seja, algo assim:

li {
  display: inline;
}

Mas existe uma outra forma: FLOAT

Como fazer para que a lista fique na horizontal:

Fazer o alinhamento à esquerda:

li {
  float: left;
}

Remover os bulletes, margem e pading

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

Para que serve o overflow: hidden; ?

Melhorar o aspeto dos links

Utilizar a mesta técnica que se usou no botão

a {
  display: block;
  padding: 8px;
  color: white;
  background-color: navy;
}

! Já está quase na versão final !

O que falta para ficar assim ?

Trabalho de casa:

Implementar a barra anterior e aplicar no site pessoal da UC

[Topo]