Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 12, 2015 18:44
Show Gist options
  • Save anonymous/a0962f33ad6823fa8768 to your computer and use it in GitHub Desktop.
Save anonymous/a0962f33ad6823fa8768 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist May 12, 2015.
    13 changes: 13 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    <div class="dropdown">
    <input type="checkbox" name="foo-input" id="foo-input" class="expand-input" autocomplete="off" />
    <label for="foo-input" class="expand-label">Foo Menu - Click here to toggle</label>
    <nav class="expand-block">
    <ul>
    <li><a href="">Foo 1</a></li>
    <li><a href="">Foo 2</a></li>
    <li><a href="">Foo 3</a></li>
    <li><a href="">Foo 4</a></li>
    <li><a href="">Foo 5</a></li>
    </ul>
    </nav>
    </div>
    56 changes: 56 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    .dropdown {}

    .expand-label {
    background: #e7e7e7;
    }

    .expand-block {
    opacity: 0;
    transition: all .4s linear;
    position: relative;
    overflow: hidden;
    z-index: 10;
    height: 0;
    }

    .expand-input:checked ~ .expand-label {
    background-color: #ffe7e7;
    }

    .expand-input:checked ~ .expand-block {
    opacity: 1;
    height: initial;
    }

    /* The CSS Below is irrelevant */

    .expand-label {
    display: block;
    padding: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
    }

    .expand-input {
    display: none;
    }

    .expand-block ul {
    padding-left: 0;
    margin: 0;
    }

    .expand-block li {
    border: 1px solid #ccc;
    list-style: none inside;
    }

    .expand-block a {
    display: block;
    text-decoration: none;
    padding: 10px;
    }

    .expand-block li + li {
    margin-top: 2px;
    }
    7 changes: 7 additions & 0 deletions xGVGVy.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    xGVGVy
    ('-' * 6)


    A [Pen](http://codepen.io/anon/pen/xGVGVy) by [Captain Anonymous](http://codepen.io/anon) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/anon/pen/xGVGVy/license).