css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- 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>
            
          
!
            
              @import url(https://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;
  }
}


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console