No JS: Tabs that scale down to menu

index.html

<!-- TAB CONTROLLERS -->
<input id="panel-1-ctrl"
       class="panel-radios" type="radio" name="tab-radios" checked>
<input id="panel-2-ctrl"
       class="panel-radios" type="radio" name="tab-radios">
<input id="panel-3-ctrl"
       class="panel-radios" type="radio" name="tab-radios">
<input id="panel-4-ctrl"
       class="panel-radios" type="radio" name="tab-radios">
<input id="panel-5-ctrl"
       class="panel-radios" type="radio" name="tab-radios">
<input id="nav-ctrl"
       class="panel-radios" type="checkbox" name="nav-checkbox">

<header id="introduction">
  <h1>No JS: Tabs That Scale Down to Menu</h1>
</header>

<!-- TABS LIST -->
<ul id="tabs-list">
    <!-- MENU TOGGLE -->
    <label id="open-nav-label" for="nav-ctrl"></label>
    <li id="li-for-panel-1">
      <label class="panel-label"
             for="panel-1-ctrl">Radio Toggles</label>
    </li><!--INLINE-BLOCK FIX
 --><li id="li-for-panel-2">
      <label class="panel-label"
             for="panel-2-ctrl">Input :checked</label>
    </li><!--INLINE-BLOCK FIX
 --><li id="li-for-panel-3">
      <label class="panel-label"
             for="panel-3-ctrl">The Tabs</label>
    </li><!--INLINE-BLOCK FIX
 --><li id="li-for-panel-4">
      <label class="panel-label"
             for="panel-4-ctrl">Tab :hover</label>
    </li><!--INLINE-BLOCK FIX
 --><li id="li-for-panel-5" class="last">
      <label class="panel-label"
             for="panel-5-ctrl">Menu</label>
    </li>
    <label id="close-nav-label" for="nav-ctrl">Close</label>
</ul>

<!-- THE PANELS -->
<article id="panels">
  <div class="container">
    <section id="panel-1">
      <main>
        <h1>Radio Toggles</h1>
        <p>In this demo, <code>labels</code> for hidden <code>radios</code> toggle the content. This is based on the behavior in which clicked <code>labels</code> for a <code>radio</code> or <code>checkbox</code> input will check that <code>input</code>.</p> 
<pre>&lt;input id="radio-1" type="radio" name="demo-radios"&gt;
&lt;input id="radio-2" type="radio" name="demo-radios"&gt;</pre>
        #radio-1: <input id="radio-1" type="radio" name="demo-radios"> #radio-2: <input id="radio-2" type="radio" name="demo-radios">
<pre>&lt;label for="radio-1"&gt;Toggle #radio-1&lt;/label&gt;
&lt;label for="radio-2"&gt;Toggle #radio-2&lt;/label&gt;</pre>
        <label for="radio-1" class="demo-label">Toggle #radio-1</label>
        <label for="radio-2" class="demo-label">Toggle #radio-2</label>
        <p>Click one of the labels above and see its effect on the radios above it.</p>
        <p>The radios for this pen's tabs are displayed semi-transparently at the top of this demo page.</p>
      </main>
    </section>
    <section id="panel-2">
      <main>
        <h1>Input :checked</h1>
        <p>In CSS, you can query based on the <code>:checked</code> selector for <code>radios</code> and <code>checkboxes</code> to style siblings down the DOM scope. To do this, we can use the <code>~</code>. It will select same-level siblings after the given selector. Because the tab <code>labels</code> in this demo are nested and not immediate siblings, we will need to select their topmost parent that is at the same level as our <code>input</code>.</p>
        <p>To demonstrate, we will do a simplified version of this with a checkbox:</p>
        <pre><strong>&lt;!-- invisible input and its label --&gt;</strong>
&lt;input id="demo-child-toggle" type="checkbox"&gt;
&lt;label for="demo-child-toggle"&gt;Toggle #demo-child&lt;/label&gt;

<strong>&lt;-- parent to select first via "~" --&gt;</strong>
&lt;div id="demo-parent"&gt;
  <strong>&lt;-- child to select through parent --&gt;</strong>
  &lt;div id="demo-child"&gt;#demo-child&lt;/div&gt;
&lt;/div&gt;</pre>
        <p>and in our CSS:</p>
        <pre><strong>/* hiding our checkbox */</strong>
#demo-child-toggle {
  display: none;  
}
<strong>/* selecting the child */</strong>
#demo-child-toggle:checked ~ #demo-parent #demo-child {
  color: #c0392b;
  font-weight: bold;
  text-transform: uppercase;
}</pre>
        <hr>
        <input id="demo-child-toggle" type="checkbox">
        <label class="demo-label" for="demo-child-toggle">Toggle #demo-child</label>
        <div id="demo-parent">
          <div id="demo-child">#demo-child</div>
        </div>
        <hr>
        <p>As you can see, we can control the style of content that comes after a hidden input by toggling it via its label.</p>
        <p>At this point you can probably get the picture for how we can conditionally display the tabbed panel content in this pen.</p>
      </main>
    </section>
    <section id="panel-3">
      <main>
        <h1>The Tabs</h1>
        <p>Here is the basic form of a tab in this demo:</p>
<pre>&lt;li id="li-for-panel-1"&gt;
  &lt;label class="panel-label" for="panel-1-ctrl"&gt;CSS Radio Toggles&lt;/label&gt;
&lt;/li&gt;</pre>
        <p>For the "active" tab to cover the bottom border, the child <code>label</code> gets an additional 2 pixels of <code>padding-top</code> while its parent <code>li</code> gets a <code>translateY(1px)</code>. This not only covers the bottom border, but gives an ever-so-subtle "moving toward you" effect by shifting the title down <code>1px</code>.</p>
        
<pre>#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
  transform: translate3d(0, 1px, 0);
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
  padding-top: 26px; <strong>/* instead of "24px" */</strong>
}</pre>
      </main>
    </section>
    <section id="panel-4">
      <main>
        <h1>Tab :hover</h1>
        <p>When designing the <code>:hover</code> and "active" states I had a dilemma.</p>
<pre>&lt;li id="li-for-panel-1"&gt;
  &lt;label class="panel-label" for="panel-1-ctrl"&gt;CSS Radio Toggles&lt;/label&gt;
&lt;/li&gt;</pre>
        <p>Each tab <code>li</code> has a <code>border-right</code>. But when the additional <code>border-top</code> appears, we dont want the lighter <code>border-right</code> to be shown all the way to the top. The fix for this is to cancel the <code>border-right</code> on both the <code>:hover</code> and "active" state as well as style the <code>li</code>'s next sibling's <code>border-left</code>.</p>
        <p>To do this, we can use a combination of the siblings after <code>~</code> and sibling next <code>+</code> selectors:</p>
        <pre><strong>/* remove the right border on "active" state */</strong>
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
  border-right: none;
}
<strong>/* add left to next sibling */</strong>
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {
  border-left: 1px solid #dfdfdf;
}</pre>
      </main>
    </section>
    <section id="panel-5">
      <main>
        <h1>Menu</h1>
        <p>On small screens, the tabs fold down into an expandable menu. To trigger the menu, I use a <code>checkbox</code> (note that it appears at the top of the screen on smaller screen sizes). There are two labels that trigger this checkbox. One opens and the other closes the menu. The one that opens is absolutely positioned invisibly over the "active" menu item. The closing label is at the bottom of the open menu.</p>
        <p>The best way I have found to show and hide content without using absolute positioning is to use a combination of <code>max-height</code> and <code>opacity</code>. When "inactive", the content has a <code>max-height: 0</code> and <code>opacity: 0</code>.</p>
        <p>It also has a <code>transition: opacity</code> when I don't know the future height (this panel's content for example) and <code>transition: opacity, max-height</code> when I do know the future height (like the menu). When "active", the <code>max-height</code> and <code>opacity</code> get positive values and the content will transition in. I'm sure flexbox could get me around this hack, but this works for now.</p>   
      </main>
    </section>
  </div>
</article>

No JS: Tabs that scale down to menu.markdown

No JS: Tabs that scale down to menu

A tab-to-menu layout that doesn't use javascript. Modern browser compatible.

A Pen by Jake Albaugh on CodePen.

License.

style.scss

#@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400|Inconsolata);

/////////////////
// VARIABLES
/////////////////

$tab-count: 5;
$menu-item-height: 46px;

$color-primary-light: #e74c3c;
$color-primary-dark: #c0392b;
$color-text: #444444;

$color-border: #dfdfdf;
$color-border-top: $color-primary-dark;

$color-label-bg-inactive: #ecf0f1;
$color-label-bg-active: white;
$color-label-active: $color-border-top;
$color-label-inactive: #bdc3c7;

$btn-border-top-thickness: 6px;

$tab-padding: 24px;
$tab-transition-duration: 200ms;
$tab-base-border-style: 1px solid $color-border;
$tab-trans-border-style: 1px solid transparent;

$panel-transition-duration: 600ms;
$main-padding: 48px 24px;
$menu-padding: 12px 24px;

/////////////////
// ELEMENTS
/////////////////

// global list style
ul#tabs-list {
  list-style: none;
  text-align: center;
  border-bottom: $tab-base-border-style;
  margin: 0;
  padding: 0;
}

// global label style
label.panel-label {
  user-select: none;
  display: block;
  width: 100%;
  color: $color-label-inactive;
  cursor: pointer;
  background-color: $color-label-bg-inactive;
  transition-property: background-color, color;
  transition-duration: $tab-transition-duration;
  // hover style
  &:hover {
    color: $color-label-active;
  }
}

// global panel style
#panels {
  background-color: $color-label-bg-active;
  .container {
    margin: 0 auto;
    width: 90%;
  }
  section {
    header {
      label.panel-label {
        padding: $menu-padding;
        box-sizing: border-box;
      }
    }
    main {
      box-sizing: border-box;
      max-height: 0;
      opacity: 0;
      transition: opacity $panel-transition-duration;
      overflow-y: hidden;
    }
  }
}

/////////////////
// MIXINS
/////////////////

// tabs list style
@mixin tabs-list-style {
  text-align: center;
  border-bottom: $tab-base-border-style;
  // li child
  li {
    display: inline-block;
    text-align: center;
    font-size: 0.875em;
    width: 100% / $tab-count - 2%;
    box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
    border-right: $tab-base-border-style;
    position: relative;
    // hover
    &:hover {
      transition: none;
      border-right: none;
      // conditional transborder on last li
      &.last {
        border-right: $tab-trans-border-style;
      }
      & + li {
        border-left: $tab-base-border-style;
      }
    }
    // tab labels
    label.panel-label {
      position: relative;
      padding: $tab-padding 0;
      &::after {
        content: "";
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 100%;
        background-color: $color-border-top;
        height: 0;
        transition-property: height;
        transition-duration: $tab-transition-duration;
      }
      &:hover {
        padding-top: $tab-padding + 1;
        &::after {
          height: $btn-border-top-thickness;
        }
      }
    }
  }
}

// global active label styles
@mixin active-label {
  background-color: $color-label-bg-active;
  color: $color-border-top;
}

// active tab label style
@mixin active-tab-label {
  &::after {
    height: $btn-border-top-thickness;
  }
  // add extra pixel for shifting li downward over border
  padding-top: $tab-padding + 2;
}

// active tab li style
@mixin active-tab-li-style {
  pointer-events: none;
  cursor: default;
  // shift down over border. label has extra pixel in padding.
  transform: translate3d(0, 1px, 0);
  box-shadow: none;
  border-right: none;
  // conditional transborder on last li
  &.last {
    border-right: $tab-trans-border-style;
  }
  // next li border-left
  & + li {
    border-left: $tab-base-border-style;
  }
  label.panel-label {
    @include active-label;
    @include active-tab-label;
  }
}

// active menu label style
@mixin active-menu-label {
  background-color: $color-label-active;
  color: $color-label-bg-active;
}

// active menu li style
@mixin active-menu-li-style {
  max-height: $menu-item-height;
  opacity: 1;
  label.panel-label {
    @include active-label;
    @include active-menu-label;
  }
}

// active panel style
@mixin active-panel-style {
  main {
    max-height: initial;
    opacity: 1;
    padding: $main-padding;
  }
}

// panel toggling
@for $i from 1 through $tab-count {
  #panel-#{$i}-ctrl:checked ~ #panels #panel-#{$i} {
    @include active-panel-style;
  }
}

/////////////////
// MEDIA QUERIES
/////////////////

// small devices
@media all and (max-width: 767px) {
  // displaying menu nav
  @for $i from 1 through $tab-count {
    #nav-ctrl:checked ~ #tabs-list #li-for-panel-#{$i} {
      max-height: $menu-item-height;
      opacity: 1;
    }
  }
  // "show" open nav label when closed, hide when open
  #open-nav-label {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
    //background: rgba(0,0,0,0.6)
 
  }
  #nav-ctrl:checked ~ #tabs-list #open-nav-label {
    display: none;
  }
  // "show" close nav label when open, hide when closed
  #close-nav-label {
    display: block;
    max-height: 0;
    overflow-y: hidden;
    background-color: $color-text;
    color: $color-label-bg-inactive;
    padding: 0px;
    transition: max-height $tab-transition-duration;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 1px;
  }
  #nav-ctrl:checked ~ #tabs-list #close-nav-label {
    max-height: 36px;
    opacity: 1;
    padding: $menu-padding;
  }
  // tabs list style
  #tabs-list {
    position: relative;
    label.panel-label {
      padding: $tab-padding / 2 0;
    }
    @for $i from 1 through $tab-count {
      #li-for-panel-#{$i} {
        max-height: 0;
        overflow-y: hidden;
        transition: max-height $tab-transition-duration;
      }
    }
  }
  // tab controller triggering menu
  @for $i from 1 through $tab-count {
    #panel-#{$i}-ctrl:checked ~ #tabs-list #li-for-panel-#{$i} {
      @include active-menu-li-style;
    }
  }
  #panels {
    .container {
      width: 100%;
    }
    section header {
      display: block;
    }
  }
}

// big devices
@media all and (min-width: 768px) {
  // tab controller triggering tabs
  @for $i from 1 through $tab-count {
    #panel-#{$i}-ctrl:checked ~ #tabs-list #li-for-panel-#{$i} {
      @include active-tab-li-style;
    }
  }
  // tabs list style
  ul#tabs-list {
    @include tabs-list-style;
  }
  // nav label
  #open-nav-label,
  #close-nav-label {
    display: none;
  }
  // nav checkbox
  #nav-ctrl {
    display: none;
  }
}

// real big devices
@media all and (min-width: 900px) {
  main {
    width: 70%;
    margin: 0 auto;
  }
}

/////////////////
// DEMO STYLES
/////////////////

// radios
.panel-radios {
  $width: 20px;
  $offset: $width / 2;
  $middle: ceil($tab-count / 2);
  //display: none
  position: fixed;
  left: 50%;
  top: 10px;
  width: $width;
  opacity: 0.5;
  z-index: 99;
  // conditionally centering at top of screen (cant have wrapper...ugh math)
  @for $i from 1 through $tab-count {
    @if $i < ceil($tab-count / 2) {
      &:nth-child(#{$i}) {
        transform: translateX(-1 * $width * ($middle - $i) - $offset);
      }
    }
    @if $i == ceil($tab-count / 2) {
      &:nth-child(#{$i}) {
        transform: translateX(-1 * $offset);
      }
    }
    @if $i > ceil($tab-count / 2) {
      &:nth-child(#{$i}) {
        transform: translateX($width * ($i - $middle) - $offset);
      }
    }
  }
  // menu checkbox
  &:nth-child(#{$tab-count + 1}) {
    top: 30px;
    transform: translateX(-1 * $width / 2);
    display: block;
  }
}

// body
body {
  background: $color-primary-light;
  color: $color-text;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
}

//banner
#introduction {
  width: 90%;
  margin: 0 auto;
  padding: $main-padding;
  color: white;
  h1 {
    font-weight: 300;
    text-align: center;
  }
}

// content text formatting
main {
  h1 {
    margin-top: 0;
    font-weight: 300;
    color: $color-primary-dark;
  }
  p {
    line-height: 1.8;
  }
  hr {
    margin: 12px 0;
    border-top: $tab-base-border-style;
  }
}

// demo styles
label.demo-label {
  background-color: $color-primary-dark;
  color: $color-label-bg-active;
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  user-select: none;
  &:hover {
    background-color: $color-primary-light;
  }
}

#demo-child-toggle {
  display: none;
  &:checked ~ #demo-parent #demo-child {
    color: $color-primary-dark;
    font-weight: bold;
    text-transform: uppercase;
  }
}

#demo-parent {
  margin-top: 8px;
}

// styling that code
code,
pre {
  color: $color-primary-dark;
  font-family: Inconsolata, "Andale Mono", Andale, monowidth;
  background-color: $color-label-bg-inactive;
  border: $tab-base-border-style;
  border-radius: 2px;
}

code {
  padding: 2px 6px;
}

pre {
  padding: 12px;
  line-height: 1.6;
  strong {
    color: $color-text;
    font-weight: normal;
  }
}