Queria a ajuda para saber se dá pra fazer uma navegação de site fullpage usando apenas CSS com a idéia que tenho na cabeça. Eu vi uma vídeo aula onde utilizando inputs do tipo radio e labels para fazer a transição das sections verticalmente com margin-top. Eu queria saber algum meio de colocar as sections lado à lado e não uma abaixo da outra, como indicado no vídeo, e fazer a transição horizontalmente. Segue o código resumido que copiei da vídeo aula.
HTML:
<nav class="links">
<label for="home">Home</label>
<label for="sobre">Sobre nós</label>
<label for="atuacao">Atuação</label>
<label for="portifolio">Portifólio</label>
<label for="contato">Contato</label>
</nav>
<div class="scroll">
<input type="radio" name="grupo" id="home" checked="true">
<input type="radio" name="grupo" id="sobre">
<input type="radio" name="grupo" id="atuacao">
<input type="radio" name="grupo" id="portifolio">
<input type="radio" name="grupo" id="contato">
<section class="sections">
<section class="bloco" id="sec_home"></section>
<section class="bloco" id="sec_sobre"></section>
<section class="bloco" id="sec_atuacao"></section>
<section class="bloco" id="sec_portifolio"></section>
<section class="bloco" id="sec_contato"></section>
</section>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
body {
width: 100vw;
height: 100vh;
font-family: arial;
font-size: 12px;
}
.bloco {
width: 100vw;
height: 100vh;
justify-content: center;
align-items: flex-start;
display: flex;
overflow: hidden;
}
.links {
width: 100%;
height: 60px;
position: fixed;
display: flex;
justify-content: flex-end;
align-items: center;
}
.links label {
margin: 10px 10px;
padding: 5px 10px;
border: 1px solid #ffffff;
border-radius: 12px;
cursor: pointer;
transition: all 0.4s;
text-align: center;
font-size: 10px;
color: #ffffff;
text-transform: uppercase;
}
.links label:hover {
color: #000000;
background: #ffffff;
}
.scroll input {
display: none;
}
.scroll {
display: flex;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.sections {
transition: all 0.4s;
}
#sobre:checked ~ .sections {
margin-top: -100vh;
}
#atuacao:checked ~ .sections {
margin-top: -200vh;
}
#portifolio:checked ~ .sections {
margin-top: -300vh;
}
#contato:checked ~ .sections {
margin-top: -400vh;
}
Outra coisa. Eu modifiquei as labels (aparência) para ficar como eu queria e adicionei um estilo diferente para mudar com o hover (mouse). Neste exemplo, teria como a label relacionada a section que está sendo exibida ficar estilizada com a aparência do hover? Tipo, section Contato sendo exibida, a label Contato fica com as configurações iguais do hover e volta ao normal ao trocar de section.
Desde já agradeço a atenção.