cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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 lang="en" class="no-js">
This HTML5 CSS3 Navigation Example works as
   1. Use hidden input tags, not part of any
      form, to track the currently selected
      menu item. These must be in the same
      scope as the section tags (for
   2. Use labels linked to the input tags
      (via their "for" attribute). These are
      clickable by the end-users so be sure
      to theme them with a cursor or
      something to indicate their
   3. Use sections (in the same scope as the
      input tags) for indicating the actual
   4. Hide all of the sections by default.
   5. Using CSS selections; select both the
      :checked input tag with the
      appropriate section (by id) and set
      to display.

The page is initially rendered with no
visible content and with no sub-menus

As the user clicks on the nav items, the
input radio list selection changes. As this
changes, the CSS rules are re-applied which
then render the newly selected items etc

Of course you can style this completely
differently than in this proof-of-concept-
example (aka: programmer art :).

Author: Kevin C. Krinke <kevin@krinke.ca>
  <meta charset="utf-8">
  <title>HTML5 CSS3 Menu</title>

    Hidden input radio tags, these are not
    part of any form and are used to track
    the currently selected menu item.
  <input type="radio" name="content-menu" id="nav-item-0-0" />
  <input type="radio" name="content-menu" id="nav-item-0-1" />
  <input type="radio" name="content-menu" id="nav-item-0-2" />
  <input type="radio" name="content-menu" id="nav-item-1-0" />
  <input type="radio" name="content-menu" id="nav-item-1-1" />
  <input type="radio" name="content-menu" id="nav-item-1-2" />
  <input type="radio" name="content-menu" id="nav-item-2-0" />
  <input type="radio" name="content-menu" id="nav-item-2-1" />
  <input type="radio" name="content-menu" id="nav-item-2-2" />
    HTML5 has these handy extra tags for
    organizing menus and content. We're
    going to use them here appropriately.
        This is the main nav menu. This
        should always be visible and should
        contain one label for each of the
        top-level items in our navigation
        <li><label for="nav-item-0-0">Nav Item #0-0</label></li>
        <li><label for="nav-item-1-0">Nav Item #1-0</label></li>
        <li><label for="nav-item-2-0">Nav Item #2-0</label></li>
    <nav class="subnav item-0">
        <li><label for="nav-item-0-1">Nav Item #0-1</label></li>
        <li><label for="nav-item-0-2">Nav Item #0-2</label></li>
    <nav class="subnav item-1">
        <li><label for="nav-item-1-1">Nav Item #1-1</label></li>
        <li><label for="nav-item-1-2">Nav Item #1-2</label></li>
    <nav class="subnav item-2">
        <li><label for="nav-item-2-1">Nav Item #2-1</label></li>
        <li><label for="nav-item-2-2">Nav Item #2-2</label></li>
  <section id="content-item-0-0">This is content-item-0-0</section>
  <section id="content-item-0-1">This is content-item-0-1</section>
  <section id="content-item-0-2">This is content-item-0-2</section>
  <section id="content-item-1-0">This is content-item-1-0</section>
  <section id="content-item-1-1">This is content-item-1-1</section>
  <section id="content-item-1-2">This is content-item-1-2</section>
  <section id="content-item-2-0">This is content-item-2-0</section>
  <section id="content-item-2-1">This is content-item-2-1</section>
  <section id="content-item-2-2">This is content-item-2-2</section>

              /* hide all input tags associated with out nav menu */

input[name="content-menu"] {
  display: none;

/* hide all sections by default */

section {
  display: none;
  margin: 1em;
  padding: 1em;

/* default styling for labels */

label {
  display: inline-block;

/* labels are clickable, give indication */

label:hover {
  cursor: pointer;

/* default nav menu style */

nav {
  width: 100%;
  background: black;
  color: white;
  padding: 0.25em;

/* default sub-nav menu style */

nav.subnav {
  display: none;
  background: #222222;
  color: #888888;

/* header nav list style */

header nav ul {
  padding: 0;
  margin: 0;
  text-align: center;

/* header nav list item style */

header nav ul li {
  display: inline;
  padding: 0 0.5em 0 0.5em;
  border-left: 1px solid #888888;

/* first nav list item style (no left border)*/

li:first-of-type {
  border-left: none;

/* When a nav item is clicked, show the associated content.
   This works because the selector is for the nav-item being
   :checked and the section is selected by specific ID.

#nav-item-0-0:checked ~ #content-item-0-0,
#nav-item-0-1:checked ~ #content-item-0-1,
#nav-item-0-2:checked ~ #content-item-0-2,
#nav-item-1-0:checked ~ #content-item-1-0,
#nav-item-1-1:checked ~ #content-item-1-1,
#nav-item-1-2:checked ~ #content-item-1-2,
#nav-item-2-0:checked ~ #content-item-2-0,
#nav-item-2-1:checked ~ #content-item-2-1,
#nav-item-2-2:checked ~ #content-item-2-2 {
  display: inline-block;

/* When a nav item is clicked, make sure it's corresponding
   sub-nav menu is displayed.

#nav-item-0-0:checked ~ header nav.subnav.item-0,
#nav-item-0-1:checked ~ header nav.subnav.item-0,
#nav-item-0-2:checked ~ header nav.subnav.item-0,
#nav-item-1-0:checked ~ header nav.subnav.item-1,
#nav-item-1-1:checked ~ header nav.subnav.item-1,
#nav-item-1-2:checked ~ header nav.subnav.item-1,
#nav-item-2-0:checked ~ header nav.subnav.item-2,
#nav-item-2-1:checked ~ header nav.subnav.item-2,
#nav-item-2-2:checked ~ header nav.subnav.item-2 {
  display: inline-block;

/* When a nav item is clicked, visually display the selection
   with a dotted underline for the selected nav item.

#nav-item-0-0:checked ~ header label[for="nav-item-0-0"],
#nav-item-0-1:checked ~ header label[for="nav-item-0-1"],
#nav-item-0-2:checked ~ header label[for="nav-item-0-2"],
#nav-item-1-0:checked ~ header label[for="nav-item-1-0"],
#nav-item-1-1:checked ~ header label[for="nav-item-1-1"],
#nav-item-1-2:checked ~ header label[for="nav-item-1-2"],
#nav-item-2-0:checked ~ header label[for="nav-item-2-0"],
#nav-item-2-1:checked ~ header label[for="nav-item-2-1"],
#nav-item-2-2:checked ~ header label[for="nav-item-2-2"] {
  text-decoration: underline;
  font-style: italic;

/* When a sub nav menu item is clicked, make sure it's
   parent menu item remains underlined as well. You could
   combine this block with the above block if both have
   the same styles applied. Separating the two allows for
   customizing the selected sub-nav menu item indication.

#nav-item-0-1:checked ~ header label[for="nav-item-0-0"],
#nav-item-0-2:checked ~ header label[for="nav-item-0-0"],
#nav-item-1-1:checked ~ header label[for="nav-item-1-0"],
#nav-item-1-2:checked ~ header label[for="nav-item-1-0"],
#nav-item-2-1:checked ~ header label[for="nav-item-2-0"],
#nav-item-2-2:checked ~ header label[for="nav-item-2-0"] {
  text-decoration: underline;
Loading ..................