JSFiddle - React, Tailwind, and code Playground
HTML
<div id="tudo">
<header id="menu">
<nav>
<a href="#conteudo1">Link 1</a>
<a href="#conteudo2">Link 2</a>
<a href="#conteudo3">Link 3</a>
<a href="#conteudo4">Link 4</a>
</nav>
</header>
<div id="container">
<section id="conteudo1" class="um">
<h1>Conteúdo do link 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec neque nisi. Sed vulputate dui est, ac euismod magna imperdiet sit amet. Curabitur cursus ante ac turpis auctor, at scelerisque augue dictum. Aenean elit quam, gravida ut efficitur quis, aliquet in leo. Praesent sed egestas ex. Curabitur sit amet libero vitae erat fringilla efficitur id non orci. Aliquam enim leo, pellentesque eu feugiat in, malesuada ac dui.
Donec at arcu nec ipsum cursus tristique. Quisque ac molestie tortor. Nulla ultricies arcu sit amet turpis dictum, id sollicitudin nulla consequat. Pellentesque in porttitor libero. Nulla quis magna eget felis dapibus mollis. Donec lectus risus, sollicitudin sed ultricies eu, feugiat commodo turpis. Quisque faucibus elit ac suscipit vulputate.
Aenean nec efficitur libero. Ut auctor egestas ipsum, facilisis congue diam finibus ut. Ut varius at neque ac pharetra. Proin vehicula tristique dui sit amet facilisis. Nunc sollicitudin nisl ac nisi dapibus rutrum. In id nibh ac metus hendrerit blandit sed at tortor. Nunc eget nisl at nisl iaculis imperdiet id id odio. Vestibulum risus leo, ultrices volutpat eros non, suscipit varius justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque vel sodales risus, tincidunt maximus purus. In aliquam erat mattis imperdiet dictum.
Aenean nec efficitur libero. Ut auctor egestas ipsum, facilisis congue diam finibus ut. Ut varius at neque ac pharetra. Proin vehicula tristique dui sit amet facilisis. Nunc sollicitudin nisl ac nisi dapibus rutrum. In id nibh ac metus hendrerit blandit sed at tortor....
CSS
/*Este atributo é um CSS Reset simples serve para limpar e padronizar todos os elementos */
*{margin: 0; padding: 0;}
/*Regras do elemento body */
body{
/*tipo de fonte utilizada*/
font-family: verdana;
}
/*Regras do elemento <header>*/
#menu{
/*Largura*/
width: 17%;
/*cor de fundo*/
background: green;
/*espaçamento interno*/
padding: 10px;
/*Posião fixa*/
position: fixed;
}
/*Regras do elemento <nav> que é filho de <header>*/
#menu nav{
/*altura da linha, serve para centralizar o texto dentro do elemento*/
line-height: 50px;
width: 100%;
background: red;
}
/*Regras do elemento <a> filho de <nav>*/
#menu nav a{
/*Determina como é mostrado. no caso é block.. ou seja, a nível de bloco*/
display: block;
}
/*Regras do elemento <div id="tudo"> */
#tudo{
/*Neste caso, foi definido para tabela serve, para contornar um problema que o elemento aparenta estar fora.*/
display: table;
width: 100%;
background: blue;
}
/*Regras do elemento <div id="container"> */
#container{
/*flutuando no lado direito*/
float: right;
width: 79%;
padding: 10px;
background: gray;
}
/*Regras do elemento <section> */
section{
/*define a margem superior*/
margin-top: 10px;
}
/*Regras do elemento <h1> filho de <section>*/
section h1{
/*deixa os os títulos centralizados*/
text-align: center;
}
/*classe para adicionar uma cor diferente em cada section para usar classes é preciso por um . na frente do nome ou colocar um elemento.nome Diferente de usar ID que usa #(jogo da velha)*/
/*O RGBA() é uma função do CSS 3 que permite definir as cores e a transparência. as cores são (R)Red (G)Green (B)Blue, o (A) é de alfa, ele é uma escala de 0 a 1, ou seja 0, 0.1, 0.2, 0.3. 0.4, 0.5(50% de transparência), 0.6, 0.7, 0.8, 0.9 e 1 */
section.um{background: rgba(116, 44, 44, 0.5);}
section.dois{background: rgba(116, 186, 44, 0.5);}
section.tres{background: rgba(255, 186, 44,...
JavaScript
/* Este é um exemplo explicando como aplicar a técnica de âncoras usando HTML 5. A leitura é designada para leigos/iniciantes de forma bem simples e objetiva possível.
Aqui neste lugar no JSFiddle seria para acrescentar códigos em javascript/jQuery e etc. Como não vou explicar sobre javascript/jQuery vou usar para explicar a estrutura HTML e os atributos CSS.
A técnica de utilizar âncoras para navegar entre seções dentro do website, é uma tendência atual(2015), na qual ao invés de criar uma página diferente para cada conteúdo, adicionaremos todo o conteúdo dos links dentro da mesma página.
Basicamente a estrutura estará dentro das tags <html> e <body>
Antes de explicar quero dar uma rápida introdução da árvore de elementos e suas relações que são essenciais para compreender a estrutura montada.
O elemento pai é aquele que engloba os elementos.
Um elemendo é considerado filho, quando está contido dentro de um elemento.
Um elemento é considerado irmão quando são adjacentes dentro de um elemento.
Vejamos o caso de nossa estrutura:
O elemento <div> cujo ID é "tudo" é filho do elemento <body> que é descentente de HTML e pai do elemento <header>.
O elemento <header>, é pai do elemento <nav>, filho de <div>
<nav> é pai do elemento <a>, os elementos <a> são irmãos adjascentes.
O elemento <div> cujo o ID é "container" é irmão adjascente de <header>
<sections> são filho de <div id="container"> e são irmãos adjascentes.
<h1> que é usado para títulos, é filho de <section>, e irmã adjacente de <p> usado para parágrafos.
Agora que entendemos sobre a estrutura a técnica básica de âncoras usa como valor do atributo href o valor do atributo dos elementos na qual quer saltar.
No nosso exemplo temos 4 elementos <section> cada um tendo como valor de ID é respectivamente: contedo1, conteudo2, conteudo3, conteudo4.
Então, se queremos linkar o quarto ítem do menu para seu respectivo conteúdo faríamos assim:
<a href="#conteudo4">Conteúdo 4</a>
veja que o valor de href é...