Material Design CSS Only Tabs

By Elijah Townsend

How do I use This?

Material Design CSS Only Tabs using Mobile Nav Bar

HTML

<div class="md-tabs">
  <div class="mobile-nav-bar title-bar">
    <div class="title-bar-left">
      <button class="menu-icon" type="button"></button>
    </div>
    <div class="title-bar-center">
      <span class="title-bar-text">Material Design Tabs</span>
    </div>
    <div class="title-bar-right">
      <button class="menu-icon" type="button"></button>
    </div>
  </div>

  <ul class="tabs" data-responsive-accordion-tabs="tabs small-accordion medium-tabs large-tabs" id="collapsing-tabs" data-allow-all-closed="true" data-multi-expand="true">
    <li class="tabs-title is-active"><a href="#panel1c" aria-selected="true">Tab 1</a></li>
    <li class="tabs-title"><a href="#panel2c">Tab 2</a></li>
    <li class="tabs-title"><a href="#panel3c">Tab 3</a></li>
    <li class="tabs-title"><a href="#panel4c">Tab 4</a></li>
    <div class="slide"></div>
  </ul>

  <div class="tabs-content" data-tabs-content="collapsing-tabs">
    <div class="tabs-panel is-active" id="panel1c">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet pulvinar enim. Donec mattis metus a hendrerit aliquam. Nulla facilisi. Etiam facilisis, nisi eu varius gravida, tellus odio blandit mauris, et egestas neque sapien sit amet massa.
        Morbi ullamcorper, metus nec dictum faucibus, mauris dolor semper purus, quis tincidunt sapien nibh ut tellus. Suspendisse at lectus ac dolor commodo malesuada in non elit. Donec nibh nulla, vehicula a quam quis, luctus interdum est.
      </p>
    </div>
    <div class="tabs-panel" id="panel2c">
      <p>Nunc ipsum massa, venenatis sed fringilla ut, elementum eu sapien. In eget dolor volutpat, fringilla metus et, dignissim lectus. Proin interdum sit amet odio ut varius. Nam id quam lacus. Aenean et tellus a sapien pulvinar sollicitudin. Mauris posuere
        tellus urna, non fermentum urna scelerisque in. Nulla scelerisque est leo, non tempus purus laoreet in. Aliquam erat volutpat. Nunc nulla eros, blandit quis nunc vel, luctus fermentum nisi. Phasellus ullamcorper gravida facilisis.</p>
    </div>
    <div class="tabs-panel" id="panel3c">
      <p>Donec ornare, ex quis volutpat vulputate, dui eros fermentum tellus, id eleifend velit diam non leo. Aliquam convallis vestibulum elementum. Phasellus facilisis tempus nisi eget lobortis. Duis magna sem, placerat vel tellus sed, auctor laoreet enim.
        Integer sit amet libero rutrum, vestibulum massa at, volutpat leo. Proin id ex porta, hendrerit erat sed, fringilla urna. Phasellus hendrerit consequat arcu non pretium. Proin vel velit vitae nisl aliquet rutrum. Maecenas quis lectus sit amet
        mi fermentum pulvinar. Mauris fermentum tortor id ipsum tristique sollicitudin.</p>
    </div>
    <div class="tabs-panel" id="panel4c">
      <p>Fusce justo velit, pulvinar eu sem eu, fringilla sodales urna. Mauris mollis aliquet nibh. Suspendisse porttitor, nisi a egestas iaculis, augue metus semper tortor, eget tristique leo enim mollis libero. Integer et lacus non ipsum finibus pharetra
        sit amet quis ipsum. Mauris vitae elementum lorem. Quisque vel mauris magna. Duis non nisl neque. Suspendisse posuere magna id risus sodales bibendum.</p>
    </div>
  </div>
</div>

$primary-blue: #1779BA;
$accent-green: #3ADB76;

.md-tabs {
  background-color: $primary-blue;

  > {
    .mobile-nav-bar {
      background-color: $primary-blue;
      margin-bottom: 15px;

      .title-bar-text {
        font-size: 26px;
      }

      a {
        color: $white;
      }
    }

    .tabs {
      margin: 0;
      border: 0;
      background: $primary-blue;
      list-style-type: none;
      display: table;
      width: 100%;

      > .tabs-title {
        display: table-cell;
        width: 25%;
        text-align: center;
        display: inline-block;

        &.is-active {
          > a {
            color: $accent-green;
            background-color: transparent;
            outline: none;
          }

          &:nth-of-type(1) ~ .slide {
            left: calc((100% / 4) * 0);
          }

          &:nth-of-type(2) ~ .slide {
            left: calc((100% / 4) * 1);
          }

          &:nth-of-type(3) ~ .slide {
            left: calc((100% / 4) * 2);
          }

          &:nth-of-type(4) ~ .slide {
            left: calc((100% / 4) * 3);
          }
        }

        > a {
          color: $white;
          font-size: 16px;

          &:hover,
          &:focus {
            background: transparent;
          }
        }
      }
    }
  }
}

.slide {
  background: $accent-green;
  width: calc(100% / 4);
  height: 4px;
  position: relative;
  left: 0;
  top: 52px;
  transition: left 0.3s ease-out;
}

@include breakpoint(small only) {
  .slide {
    width: 0;
    height: 0;
  }

  .md-tabs {
    > .accordion {
      margin-left: 0;
      list-style-type: none;

      > .accordion-item > .accordion-title {
        position: relative;
        display: block;
        padding: 1.25rem 1rem;
        border: 0;
        font-size: 0.75rem;
        line-height: 1;
        background: $primary-blue;
        color: $white;

        &:hover {
          background-color: $primary-blue;
          color: $accent-green;
          outline: none;
        }
      }
    }

    > .accordion > {
      .is-active.accordion-item > a.accordion-title {
        border-bottom: 4px solid $accent-green;
        color: $accent-green;
      }

      .accordion-item > .accordion-content {
        display: none;
        padding: 1rem;
        border: 1px solid #e6e6e6;
        border-top: 0px;
        background-color: #fefefe;
        color: #0a0a0a;
      }
    }
  }

  > .accordion > .accordion-item > .accordion-title:focus {
    background-color: $primary-blue;
    color: $accent-green;
    outline: none;
  }
}

.md-tabs {
  background-color: #1779BA;
}

.md-tabs > .mobile-nav-bar {
  background-color: #1779BA;
  margin-bottom: 15px;
}

.md-tabs > .mobile-nav-bar .title-bar-text {
  font-size: 26px;
}

.md-tabs > .mobile-nav-bar a {
  color: #fefefe;
}

.md-tabs > .tabs {
  margin: 0;
  border: 0;
  background: #1779BA;
  list-style-type: none;
  display: table;
  width: 100%;
}

.md-tabs > .tabs > .tabs-title {
  display: table-cell;
  width: 25%;
  text-align: center;
  display: inline-block;
}

.md-tabs > .tabs > .tabs-title.is-active > a {
  color: #3ADB76;
  background-color: transparent;
  outline: none;
}

.md-tabs > .tabs > .tabs-title.is-active:nth-of-type(1) ~ .slide {
  left: calc((100% / 4) * 0);
}

.md-tabs > .tabs > .tabs-title.is-active:nth-of-type(2) ~ .slide {
  left: calc((100% / 4) * 1);
}

.md-tabs > .tabs > .tabs-title.is-active:nth-of-type(3) ~ .slide {
  left: calc((100% / 4) * 2);
}

.md-tabs > .tabs > .tabs-title.is-active:nth-of-type(4) ~ .slide {
  left: calc((100% / 4) * 3);
}

.md-tabs > .tabs > .tabs-title > a {
  color: #fefefe;
  font-size: 16px;
}

.md-tabs > .tabs > .tabs-title > a:hover, .md-tabs > .tabs > .tabs-title > a:focus {
  background: transparent;
}

.slide {
  background: #3ADB76;
  width: calc(100% / 4);
  height: 4px;
  position: relative;
  left: 0;
  top: 52px;
  transition: left 0.3s ease-out;
}

@media screen and (max-width: 39.9375em) {
  .slide {
    width: 0;
    height: 0;
  }
  .md-tabs > .accordion {
    margin-left: 0;
    list-style-type: none;
  }
  .md-tabs > .accordion > .accordion-item > .accordion-title {
    position: relative;
    display: block;
    padding: 1.25rem 1rem;
    border: 0;
    font-size: 0.75rem;
    line-height: 1;
    background: #1779BA;
    color: #fefefe;
  }
  .md-tabs > .accordion > .accordion-item > .accordion-title:hover {
    background-color: #1779BA;
    color: #3ADB76;
    outline: none;
  }
  .md-tabs > .accordion > .is-active.accordion-item > a.accordion-title {
    border-bottom: 4px solid #3ADB76;
    color: #3ADB76;
  }
  .md-tabs > .accordion > .accordion-item > .accordion-content {
    display: none;
    padding: 1rem;
    border: 1px solid #e6e6e6;
    border-top: 0px;
    background-color: #fefefe;
    color: #0a0a0a;
  }
  > .accordion > .accordion-item > .accordion-title:focus {
    background-color: #1779BA;
    color: #3ADB76;
    outline: none;
  }
}

Material Design CSS Only Tabs

By Elijah Townsend

Ecommerce Footer

Sticky Social Bar

Mobile App Bottom Bar

Material Design CSS Only Tabs

By Elijah Townsend

Similar Building Blocks

Ecommerce Footer

Sticky Social Bar

Mobile App Bottom Bar