<!-- warning bad html follows as 5 extra links are manually added to create the sliding effect-->
<div class="wrap">
  <h1>Testing Sliding Tabs</h1>
  <nav class="nav">
    <div class="navwrap link0"> <a class="navlink active" href="#section1">Section 1</a> <a class="navlink"
        href="#section2">Section
        2</a> <a class="navlink" href="#section3">Section 3</a> <a class="navlink" href="#section4">Section 4</a> <a
        class="navlink" href="#section5">Section 5</a> <a class="navlink extra active" href="#section1">Section 1</a> <a
        class="navlink extra" href="#section2">Section 2</a> <a class="navlink extra" href="#section3">Section 3</a> <a
        class="navlink extra" href="#section4">Section 4</a> <a class="navlink extra" href="#section5">Section 5</a>
    </div>
  </nav>

  <main class="content">
    <section id="section1" class="section section1 sectionActive">
      <h2>Section 1</h2>
      <p>The sky calls to us tendrils of gossamer clouds birth gathered by gravity, birth, billions upon billions of
        brilliant syntheses? Take root and flourish realm of the galaxies! A still more glorious dawn awaits? Hypatia
        intelligent beings descended
        from astronomers something incredible is waiting to be known, finite but unbounded worldlets Apollonius of Perga
        kindling the energy hidden in matter as a patch of light white dwarf, ship of the imagination Euclid cosmic
        ocean. Across the centuries?
        Rings of Uranus vastness is bearable only through love of brilliant syntheses galaxies cosmic fugue a mote of
        dust suspended in a sunbeam at the edge of forever.</p>
    </section>
    <section id="section2" class="section section2">
      <h2>Section 2</h2>
      <p>Gathered by gravity. Radio telescope. Globular star cluster permanence of the stars not a sunrise but a
        galaxyrise ship of the imagination! Billions upon billions star stuff harvesting star light laws of physics two
        ghostly white figures in coveralls
        and helmets are soflty dancing. Globular star cluster worldlets? Courage of our questions, Jean-François
        Champollion. Cosmic fugue encyclopaedia galactica, realm of the galaxies Vangelis, bits of moving fluff dream of
        the mind's eye cosmic fugue
        globular star cluster intelligent beings, venture. Sea of Tranquility hydrogen atoms circumnavigated, rich in
        mystery hydrogen atoms.</p>
    </section>
    <section id="section3" class="section section3">
      <h2>Section 3</h2>
      <p>From which we spring hearts of the stars descended from astronomers quasar the only home we've ever known. Rig
        Veda a mote of dust suspended in a sunbeam! Permanence of the stars another world Drake Equation, billions upon
        billions laws of physics
        astonishment Drake Equation as a patch of light Euclid? Something incredible is waiting to be known!
        Extraordinary claims require extraordinary evidence science the carbon in our apple pies. Rig Veda courage of
        our questions. Cambrian explosion
        emerged into consciousness hydrogen atoms decipherment Euclid kindling the energy hidden in matter shores of the
        cosmic ocean a billion trillion, two ghostly white figures in coveralls and helmets are soflty dancing Cambrian
        explosion.</p>
    </section>
    <section id="section4" class="section section4">
      <h2>Section 4</h2>
      <p>Take root and flourish of brilliant syntheses star stuff harvesting star light. Two ghostly white figures in
        coveralls and helmets are soflty dancing Apollonius of Perga. The carbon in our apple pies extraordinary claims
        require extraordinary evidence
        cosmos. Gathered by gravity the ash of stellar alchemy science concept of the number one. Billions upon
        billions. Orion's sword. Science rings of Uranus rogue. Vanquish the impossible, Flatland, gathered by gravity
        two ghostly white figures in
        coveralls and helmets are soflty dancing, a billion trillion! Stirred by starlight shores of the cosmic ocean?
        Kindling the energy hidden in matter Flatland another world cosmic ocean courage of our questions are creatures
        of the cosmos. Tesseract
        tendrils of gossamer clouds and billions upon billions upon billions upon billions upon billions upon billions
        upon billions.</p>
    </section>
    <section id="section5" class="section section5">
      <h2>Section 5</h2>
      <p>Kindling the energy hidden in matter. Globular star cluster ship of the imagination dream of the mind's eye
        star stuff harvesting star light, dream of the mind's eye venture consectetur realm of the galaxies laws of
        physics, from which we spring
        Euclid, a very small stage in a vast cosmic arena adipisci velit! Another world qui dolorem ipsum quia dolor sit
        amet. Hypatia preserve and cherish that pale blue dot Hypatia rogue billions upon billions extraplanetary, light
        years rich in heavy
        atoms extraordinary claims require extraordinary evidence. Kindling the energy hidden in matter a very small
        stage in a vast cosmic arena emerged into consciousness!</p>
      <p> years rich in heavy
        atoms extraordinary claims require extraordinary evidence. Kindling the energy hidden in matter a very small
        stage in a vast cosmic arena emerged into consciousness!</p>
    </section>
  </main>
</div>
<footer class="footer">
  <p>Footer content goes here</p>
</footer>
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
}
h1 {
  text-align: center;
  padding: 1em 0;
  margin: 0;
}
.footer{background:#666;color:#f9f9f9;text-align:center;padding:20px;}
.wrap {
  background: #f9f9f9;
  color: #000;
  max-width: 980px;
  margin: auto;
  position: relative;
}
.nav {
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
}
.navwrap {
  display: flex;
}
/* warning this assumes 5 elements (links) at 20% each and would need to be changed if more or less links/elements were used*/
.nav a {
  background: #ccc;
  color: #000;
  text-decoration: none;
  border: 1px solid #000;
  flex: 1 0 20%;
  padding: 10px;
  text-align: center;
  width: 20%;
  opacity: 0.7;
  transition: all 0.5s ease;
}
.nav a:hover {
  background: #000;
  color: #fff;
}
a.navlink.active {
  background: red;
  color: #fff;
  font-weight: bold;
  font-size: larger;
  opacity: 1;
  transform: scale(1.3);
  position: relative;
  z-index: 2;
}
.section {
  position: absolute;
  left: -100vw;
  top: 0;
  transition: left 1s ease, opacity 1.5s ease;
  padding: 10px;
  max-width: 980px;
  opacity: 0;
}
.sectionActive {
  position: relative;
  left: 0;
  opacity: 1;
}
.content {
  position: relative;
  overflow: hidden;
}
.navwrap {
  transform: translateX(0);
  transition: transform 1s ease-in-out;
}
.navwrap.link0,
.navwrap.link5 {
  transform: translateX(-60%);
}
.navwrap.link1,
.navwrap.link6 {
  transform: translateX(-80%);
}
.navwrap.link2,
.navwrap.link7 {
  transform: translateX(-100%);
}
.navwrap.link3,
.navwrap.link8 {
  transform: translateX(-20%);
}
.navwrap.link4,
.navwrap.link9 {
  transform: translateX(-40%);
}

/* you wuld need to rethink the smaller screen versions and change layout to a better format*/
/* this is just a rough idea*/
@media screen and (max-width: 580px) {
  .nav,
  .nav a {
    display: block;
    margin-bottom: -1px;
  }
  .nav a.extra {
    display: none;
  }
  .navwrap {
    flex-direction: column;
  }
  .nav .navwrap {
    transform: none;
  }
  .nav a {
    flex: 1 0 100%;
    width: 100%;
    padding:6px; 
    max-width: calc(100% - 60px);
    margin: auto;
  }
  .nav a.navlink.active{transform:scale(1.1);}
}
// the js assumes too much and should be refactored to cater for the number of links automatically and not have the html populated with extra links from the start.

// This is just a proof of concept and not meant as a final solution
(function() {
  const items = document.querySelectorAll(".navlink");
  const navwrap = document.querySelector(".navwrap");
  const sections = document.querySelectorAll(".section");

  items.forEach((item, index) => {
    item.addEventListener("click", event => {
      event.preventDefault();
      var activeTab = item.getAttribute("href");
      adjustActiveClass();
      adjustSectionClass();

      document.querySelector(activeTab).classList.add("sectionActive");
      navwrap.classList.add("link" + index);
      item.classList.add("active");
      if (index > 4) {
        items[index - 5].classList.add("active");
      } else {
        items[index + 5].classList.add("active");
      }
    });
  });

  function adjustActiveClass() {
    items.forEach((item, index) => {
      item.classList.remove("active");
      navwrap.classList.remove("link" + index);
    });
  }

  function adjustSectionClass() {
    sections.forEach((section, index) => {
      section.classList.remove("sectionActive");
    });
  }
})();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.