David CHCUma estratégia interessante para quem tem pouco conteúdo, como em sites institucionais, é adoção da página no formato “OnePage” ou “Landing page”. Criar site OnePage traz bastante otimização em seus projetos.
Uma página no formato “OnePage” consiste em que todo conteúdo que deveria estar alocado em outras páginas de um site estariam na mesma página, separadas só por seções.
Existem muitas formas de navegação como utilizar javascript para fazer animações e transição dessas páginas.
Veja um exemplo simples do modelo de site OnePage que criaremos neste tutorial.
Mas podemos criar este mesmo efeito utilizando CSS3, criando animação com a propriedade transition e também usando a pseudo classe :target.
A pseudo classe :target consegue identificar link âncora da URL. Dessa forma, podemos aplicar o estilo aos elementos.
Estrutura da página Onepage
A estrutura dos arquivos e pastas seria esta:
- css/
- style.css
- images/
- background.jpg
- index.html
Vamos criar nossa estrutura HTML, no arquivo index.html.
<!doctype html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>OnePage HTML5 e CSS3</title> <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/4.1.1/normalize.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <section id="home" class="content"> <article class="box"> <h2>Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa, vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar. Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae, viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus. </p> </article> </section> <section id="company" class="content"> <article class="box"> <h2>Empresa</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa, vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar. Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae, viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus. </p> </article> </section> <section id="service" class="content"> <article class="box"> <h2>Serviços</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa, vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar. Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae, viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus. </p> </article> </section> <section id="contact" class="content"> <article class="box"> <h2>Contato</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo massa, vestibulum id pulvinar quis, pharetra vestibulum quam. Sed ornare malesuada arcu id pulvinar. Ut vulputate est sed nisl mattis lacinia. Aliquam mollis mauris id dictum tempus. Donec a imperdiet purus, sed iaculis lectus. Nunc ligula enim, feugiat in vulputate vitae, viverra sit amet nibh. Pellentesque sit amet nulla vel dolor dapibus cursus. </p> </article> </section> <header> <h1>One Page CSS3</h1> <nav> <ul> <li id="link-home"><a href="#home">Home</a></li> <li id="link-company"><a href="#company">Empresa</a></li> <li id="link-service"><a href="#service">Serviços</a></li> <li id="link-contact"><a href="#contact">Contato</a></li> </ul> </nav> </header> </body> </html>
Explicando o código acima:
- Na linha 6 e 7, é adicionado o normalize.css para padronizar os estilos das tags e o arquivo style.css, onde iremos estilizar a nossa página;
- Na linha de 10 a 20, 21 a 31, 32 a 42. 43 a 53 contém a mesma estrutura, onde cada section representaria uma página, um id representado essa página e dentro dela uma article, para definir o espaço que ficará o conteúdo;
- Na linha 54 a 64, definimos o header. Ele está no final da página, pois queremos deixar o item marcado quando for clicar no link. E para isso usaremos o seletor ~ (Elemento1 ~ Elemento2), que irá selecionar o Elemento2 precedido pelo Elemento1. Um outro item importante na definição dos links de navegação é que passamos a referência da seção com ID que queremos mostrar. No link da home, no href, temos #home e assim sucessivamente. Definimos um id para cada li para deixar marcado o link correspondente à seção.
Agora vamos criar o arquivo style.css.
body{
background: url(../images/background.jpg) no-repeat fixed center top;
}
header{
width:20%;
background:#fff;
position: absolute;
left:0;
top:5%;
z-index: 5;
}
header h1{
text-align: center;
}
nav ul{
list-style:none;
margin:5px 0;
padding:0;
}
nav a{
display:block;
border:1px solid #e5e5e5;
border-left:0;
border-right:0;
margin:3px 0;
color:#333;
padding:5px 0;
text-decoration: none;
}
.box{
position:absolute;
top:5%;
right:10px;
width:70%;
height:70%;
background:#fff;
}
.box h2{
font-size:20px;
padding:10px;
}
.box p{
font-size:12px;
padding:10px;
}
.content{
min-width: 100%;
height: 98%;
position: absolute;
margin-left:-101%;
-webkit-transition: margin-left .8s ease-in-out;
-moz-transition: margin-left .8s ease-in-out;
-o-transition: margin-left .8s ease-in-out;
transition: margin-left .8s ease-in-out;
}
.content:target{
margin-left:0;
}
#home{
margin-left:0;
}
#home:target ~ header #link-home a,
#company:target ~ header #link-company a,
#service:target ~ header #link-service a,
#contact:target ~ header #link-contact a{
background: #333;
color: #fff;
}
Explicação do código acima:
- Na linha 1 a 3, definimos um background na tag body;
- Na linha 4 a 11, definimos o estilo da tag header;
- Uma largura de 20%;
- Cor de fundo branco;
- Posição absoluta;
- Encostado à esquerda;
- 5% afastado do topo;
- z-index 5, para sobrepor aos outros elementos;
- Na linha 12 a 14, centralizamos o título;
- Na linha 15 a 19, configuramos a lista dentro da tag nav;
- Removemos os bullets;
- Definimos que a margem do topo e da base serão de 5px;
- Zeramos o padding;
- Na linha 20 a 29, configurações do Link na lista;
- Mudamos o display para block para ocultar 100%;
- Uma borda de 1px do estilo sólido;
- Removemos a borda da esquerda e da direita;
- Demos uma margin de 3px do topo e da base;
- Demos um padding de 5px do topo e da base;
- Removemos o underline;
- Na linha 30 a 37, definimos o box que ficará o conteúdo;
- Afastamos de 5% do topo;
- Afastamos de 10px da direita;
- Definimos a largura 70%;
- Definimos a altura de 70%;
- Definimos um background;
- Na linha 38 a 41, configuramos o título h2, o tamanho e o padding;
- Na linha 42 a 45, configuramos os parágrafos, o tamanho e o padding;
- Na linha 46 a 55, definimos a classe .content, onde configuramos a animação do conteúdo;
- Definimos a largura minima de 100%;
- Definimos a Altura de 98%;
- Posição será absoluta;
- Definimos que margem à esquerda será – 101%;
- Definimos transition (propriedade, tempo, e tipo de transição)
- Na linha 56 a 58, definimos a pseudo classe :target, onde é coloca a margem a esquerda para 0 (zero) para criar o efeito voltando a posição normal;
- Na linha 59 a 61, definimos id#home fique na sua posição normal. Assim, ao acessar o site, ela irá aparecer por padrão;
- Na linha 62 a 68, definimos o elemento que ficará marcado ao clicar em um link. Nesse caso, será o link precedido (~) por item já selecionado usando a pseudo classe :target.
Você pode ver o efeito funcionando no link abaixo:
https://www.mxcursos.com/blog/exemplos/onepage
Para baixar o código, acesse o link abaixo:
https://github.com/davidchc/tutorial-criando-onepage-html5-css3
Ah e se você quiser se aperfeiçoar em desenvolvimento de sites, aprender a criar sites responsivos, aprender Bootstrap, CSS3, HTML5, Javascript, jQuery entre outros, não deixe de conhecer nossos cursos online de Desenvolvimento Front-End.
Espero que tenham gostado.
Um abraço e até a próxima.
