HTML & CSS para criar navegação em slide vertical

HTML & CSS para criar navegação em slide vertical

Como guiar o visitante a visualizar conteúdo um a um sem mostrar todo o conteúdo de inicio.

1. Preparar o HTML

Criamos o documento HTML  com as secções HEAD e BODY. A secção HEAD tem um link para um css externo que iremos criar mais à frente. Na região do BODY é onde construimos o conteúdo da página.

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
*** PASSO 2 AQUI
</body>
</html>

2. Criar os links de navegação

A primeira secção a criar é a de navegação. Utilizamos a tag NAV para delimitar os links html. Estes links não acedem a um ficheiro externo mas sim a um elemento que iremos criar na própria página. Para o fazer utilizamos (#) seguido do ID do elemento a aceder.

<nav>
<a href="#page1"><span>Page 1</span></a>
<a href="#page2"><span>Page 2</span></a>
<a href="#page3"><span>Page 3</span></a>
</nav>
*** PASSO 3 AQUI

3. Conteúdo do Article

A tag MAIN é utilizada como contentro para os artigos. A tag ARTICLE é utilizada para conter cada artigo individual. Não há necessidade de criar diferentes páginas para os carregar. Cada artigo tem um ID que corresponde às referências utilizadas na navegação.

<main>
<article id="page1">
<h1>Lightbox</h1>
</article>
<article id="page2">
<h1>Page 2</h1>
</article>
<article id="page3">
<h1>Page 3</h1>
</article>
</main>

4. Definir o CSS

Criamos um novo documento com o nome styles.css para definir a formatação css. Criamos as regras base para os principais elementos HTML e BODY. Aqui teremos um fundo preto e branco e texto a branco por defeito. Há que garantir também a inexistência de paddings e os 100% de altura.

html,body{
display: block;
background: #000;
color: #fff;
padding: 0;
margin: 0;
font-family: monospace;
height: 100%;
}

5. Definir o contentor main

O objetivo do MAIN é controlar os artigos nele contidos e a forma como estes estão guardados e são apresentados. A largura do container é de 75%  da largura do ecrã e altura de 100%, independentemente da resolução. Os valores de margin estão como auto para garantir que o elemento é posicionado ao centro. Para que o efeito trabalhe também pretendemos ocultar o overflow de qualquer conteúdo não desejado.

#main{
display: block;
width: 75%;
height: 100%;
margin: 0 auto 0 auto;
padding: 1em;
overflow: hidden;
}

6. Definir os  articles

Os article são definidos como prontos para serem apresentados mas não são visiveis por defeito. Também devem ser apresentados com uma transição quando acionados. Vamos definir também que os artigos ativos ocupam a altura total da MAIN, sendo a sua posição vertical sobre a página atual. Os efeitos de transição são definidos para a posição de topo, opacidade e border.

article{
position: absolute;
display: block;
width: 75%;
height: 100%;
top: -100%;
opacity: 0;
background-color: red;
border: 0;
transition: top 1s, opacity 1s, border 1s;
overflow: auto;
}

7. A navegação

A transição de efeitos nos conteúdos é acionado quando é chamado o ID do artigo. Isto é detectado com o selector CSS :target.
Combinando as alterações deste com o atributo de transição do passo 6 conseguimos um efeito animado. Artigos ativados passam a ter visibilidade total.

article:target{
opacity: 1;
top: 0;
border: 5px solid #fff;
background-color: #000;
}

8. Navegação

O componente navegação é apresentado à direita. É importante que este fique sempre no mesmo local não ficando fora de alcance devido ao conteúdo. Conseguimos isto utilizando posição absoluta ao topo direita. Utilizamos um z-index de 9999 para garantir que fica por cima de qualquer outro elemento.

nav{
position: absolute;
right: 0;
top: 0;
z-index: 9999;
}

9. Links

A navegação própriamente dita é conseguida com links dentro da tag nav.  Queremos que estes sejam posicionados na vertical e não na horizonta. Conseguimos fazer a alteração formatando a tag A dentro de NAV, apresentando-os na vertical.

nav a{
display: block;
color: #fff;
}

Leave a Reply

Your email address will not be published. Required fields are marked *