Skip to content

Instantly share code, notes, and snippets.

@hucklesby
Created October 15, 2013 02:50

Revisions

  1. hucklesby created this gist Oct 15, 2013.
    64 changes: 64 additions & 0 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    /**
    * Full-width vertically centered menu bar
    * Addendum to solutions from Roger Johansson
    * http://www.456bereastreet.com/archive/201310/full-width_justified_vertically_centered_navbar/
    */
    body {
    margin: 3em 0 0;
    background-color: #f0f0f0;
    color: #000;
    }

    .nav-main ul {
    display:table; /* Make the ul behave like a table */
    border-collapse:collapse; /* Collapse touching borders */
    width:100%; /* Make it full-width */
    margin:0 0 20px; /* Some bottom margin (also resets browser default margin for ul in case there isn’t already a reset for that) */
    padding:0; /* Remove any browser default padding */
    list-style:none; /* No list bullets, please */
    }

    .nav-main li {
    display:table-cell; /* Make the li elements behave like table cells */
    width:1%; /* By giving them a small width they will magically be stretched to fill the width of the table */
    border:1px solid #ddd;
    background:#eee;
    vertical-align:middle; /* Vertically center their content */
    text-align:center; /* Horizontally center their content */
    }

    .nav-main a {
    display:block;
    padding:10px;
    color:#000;
    text-decoration:none;
    }

    .nav-main a:hover,.nav-main a:focus {
    outline:none;
    color:#fff;
    background:#000;
    }

    .nav-main.active li:hover {
    cursor:pointer;
    }

    .nav-main.active li:hover,.nav-main.active li.focus {
    background:#000;
    }

    .nav-main.active li:hover a {
    color:#fff;
    }

    /* Following code added to make all links full height */

    .nav-main li {
    overflow-y: hidden;
    }

    .nav-main a {
    padding: 2.5em .5em;
    margin: -2em 0;
    }
    13 changes: 13 additions & 0 deletions dabblet.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    <!-- content to be placed inside <body>…</body> -->
    <div class="nav-main" role="navigation">
    <ul>
    <li><a href="#void">Home</a></li>
    <li><a href="#void">Section two</a></li>
    <li><a href="#void">Section three</a></li>
    <li><a href="#void">Another section</a></li>
    <li><a href="#void">A section with a longer name</a></li>
    <li><a href="#void">Section six</a></li>
    <li><a href="#void">This is section seven</a></li>
    <li><a href="#void">Section 8</a></li>
    </ul>
    </div>
    1 change: 1 addition & 0 deletions dabblet.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // alert('Hello world!');
    1 change: 1 addition & 0 deletions settings.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}