Horizontal navigation (fullpage) with CSS

Question

I wanted to help to know if you can do a full page site navigation using only CSS with the idea that I have in mind. I saw a video lesson where using inputs of type radio and Labels to make the transition of the sections vertically with margin-top. I wanted to know some way to put the sections side by side and not one below the other, as indicated in the video, and make the transition horizontally. Follow the short code I copied from the video lesson.

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

Another thing. I modified the Labels (appearance) to look like I wanted and added a different style to change with the Hover (mouse). In this example, would the label related to the display be stylized with the appearance of the Hover? Type, Section Contact being displayed, the Contact label is set to the same settings as the Hover and returns to normal when switching from Section.

Thanks for your attention.

Answer 1

Face just you change the margin-top for margin-left and exchange the measure of VH for VW, because now the movement is according to the width of the screen and not height... and tb need to put display:flex in div .section, that way the elements within that div will line up horizontally next to each other. This already solves the issue of horizontal navigation.

Now the part about leaving the label with an "active" state when clicked you need the input be before the labels because CSS only works from top to bottom, so I put inputs as the first thing in HTML, and in CSS I can do so

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

That way I can get exactly the label that was clicked with the input:checked correspondent who is above her. This code could be optimized, but I left it all individually just to get more didactic and help you understand what was done.

Follow the image code

* {
    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>