1

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.

1 Resposta 1

3

Cara basta vc trocar o margin-top por margin-left e trocar a medida de VH por VW, pois agora o movimento é de acordo com a largura da tela e não altura... E tb precisa colocar display:flex na div .section, dessa forma os elementos dentro dessa div vão se alinhar na horizontal um ao lado do outro. Isso já resolve a questão da navegação andar na horizontal.

Agora a parte de deixar a label com um estado "ativo" quado clicado vc precisa que o input esteja antes dos labels pois o CSS só funciona de cima para baixo, logo eu coloquei os inputs como a primeira coisa no HTML, e no CSS eu posso fazer assim

#home:checked ~ .links [for="home"] {
    background-color: green;
} 

Dessa forma eu consigo pegar exatamente a label que foi clicada com o input:checked correspondente que está acima dela. Esse código poderia ser otimizado, mas deixei tudo individualmente apenas para fica mais didático e te ajudar a entender o que foi feito.

inserir a descrição da imagem aqui

Segue o código da imagem

* {
    margin: 0px;
    padding: 0px;
}

body {
    width: 100vw;
    height: 100vh;
    font-family: arial;
    font-size: 12px;
    background-color: red;
}

.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;
}

[name="grupo"] {
    display: none;
}

.scroll {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.sections {
    transition: all 0.4s;
    display: flex;
}

#sobre:checked ~ .scroll .sections {
    margin-left: -100vw;
}

#atuacao:checked ~ .scroll .sections {
    margin-left: -200vw;
}

#portifolio:checked ~ .scroll .sections {
    margin-left: -300vw;
}

#contato:checked ~ .scroll .sections {
    margin-left: -400vw;
}

#home:checked ~ .links [for="home"] {
    background-color: green;
}
#sobre:checked ~ .links [for="sobre"] {
    background-color: green;
}

#atuacao:checked ~ .links [for="atuacao"] {
    background-color: green;
}

#portifolio:checked ~ .links [for="portifolio"] {
    background-color: green;
}

#contato:checked ~ .links [for="contato"] {
    background-color: green;
}
<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">

<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">

    <section class="sections">

        <section class="bloco" id="sec_home">sec_home</section>

        <section class="bloco" id="sec_sobre">sec_sobre</section>

        <section class="bloco" id="sec_atuacao">sec_atuacao</section>

        <section class="bloco" id="sec_portifolio">sec_portifolio</section>

        <section class="bloco" id="sec_contato">sec_contato</section>

    </section>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .