Heute möchte ich euch mal zeigen, wie ihr einen One Pager Webseite erstellen könnt der oben in der Navigation so aussieht als ob er aus Tabs besteht. Und das Beste ist – es läuft alles ohne Javascript sondern nur mit CSS und HTML.

Video

HTML

<header>
        <nav>
            <a href="#css">CSS</a>
            <a href="#html">HTML</a>
            <a href="#js">JS</a>
            <a href="#php">PHP</a>
            <a href="#sql">SQL</a>
        </nav>
    </header>
    <section id="css">
        <h2>CSS</h2>
        <p>Cascading Style Sheets</p>
    </section>

    <section id="html">
        <h2>HTML</h2>
        <p>HyperText Markup Language</p>
    </section>

    <section id="js">
        <h2>JS</h2>
        <p>JavaScript</p>
    </section>

    <section id="php">
        <h2>PHP</h2>
        <p>Hypertext Preprocessor </p>
    </section>

    <section id="sql">
        <h2>SQL</h2>
        <p>Structured Query Language</p>
    </section>

CSS

:root {
    --black: #383838;
    --sect-1: #003049;
    --sect-2: #d62828;
    --sect-3: #f77f00;
    --sect-4: #fcbf49;
    --sect-5: #eae2b7;
}


html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    transition: all 500ms ease 0s;
}

header {
    width: 100%;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 65px;
    background: linear-gradient(0deg, #fff0 0px, var(--black) 1px 100%);
    display: flex;
    text-align: center;
    transition: all 500ms ease 0s;
}

a {
    width: 100%;
    z-index: 1;
    color: #fff;
    text-decoration: none;
    padding: 16px 10px;
    position: relative;
    font-size: 1.5rem;
    border: 2px solid #000;
    border-top-width: 0px;
    border-bottom-width: 4px;

}

a:first-child {
    border-left-width: 0;
}

a:last-child {
    border-left-width: 0;
}

nav:after {
    position: absolute;
    content: "";
    width: 20vw;
    height: 100%;

    background: linear-gradient(90deg, var(--sect-1) 0 calc(20vw - 3px),
            var(--sect-2) 0 calc(40vw - 3px),
            var(--sect-3) 0 calc(60vw - 3px),
            var(--sect-4) 0 calc(80vw - 3px),
            var(--sect-5) 0 100vw);

    bottom: 0;
    left: 0;
    animation: progress linear;
    animation-timeline: scroll(root);
    z-index: -1;
}

@keyframes progress {
    100% {
        width: 100%;
    }
}

section {
    --bg: var(--sect-1);
    height: 100vh;
    background-color: var(--bg);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    padding-top: 30px;
    align-content: center;
}

h2,
p {
    margin: 0;
    width: 100%;
    text-align: center;
}

p {
    font-size: 1.3rem;
}

#css {
    --bg: var(--sect-1);
}

#html {
    --bg: var(--sect-2);
}

#js {
    --bg: var(--sect-3);
}

#php {
    --bg: var(--sect-4);
}

#sql {
    --bg: var(--sect-5);
}