Pure CSS, equal-width navigation tabs.

by drawcard

HTML

<ul class="tabs  primary-nav">
    <li class="tabs__item">
        <a href="#" class="tabs__link">Home</a>
    </li>
    <li class="tabs__item">
        <a href="#" class="tabs__link">About</a>
    </li>
    <li class="tabs__item">
        <a href="#" class="tabs__link">Work</a>
    </li>
    <li class="tabs__item">
        <a href="#" class="tabs__link">Contact</a>
    </li>
</ul>

CSS

/**
 * Tabs object.
 *
 * 1. Tables (kinda) for layout!
 * 2. This is the magic bit; make all children occupy equal width.
 * 3. Required to make the tabs fill their container.
 * 4. Make each tab pack up horizontally.
 * 5. Ensure the hit area covers the whole tab.
 */
.tabs {
    margin:  0;
    padding: 0;
    list-style: none;
    display: table; /* [1] */
    table-layout: fixed; /* [2] */
    width: 100%; /* [3] */
}

    .tabs__item {
        display: table-cell; /* [4] */
    }

        .tabs__link {
            display: block; /* [5] */
        }


/**
 * Primary nav. Extends `.tabs`.
 *
 * 1. Stop tabs’ corners leaking out beyond our 4px round.
 */
.primary-nav {
    text-align: center;
    border-radius: 4px;
    overflow: hidden; /* [1] */
}

        .primary-nav a {
            padding: 1em;
            background-color: #BADA55;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
        }

        .primary-nav a:hover {
            background-color: #A3C43B;
        }
















































html {
    font: 0.75em/1.5 sans-serif;
}

JavaScript

/**
 * Using only CSS, we can make a tabbed navigation whose tabs always
 * occupy an equal share of the available width. No JS to interrogate
 * the DOM, no server-side logic to count through items, no inline styles.
 *
 * Try commenting out, or adding, an `li` in the markup above. The tabs
 * should always fit the available horizontal room in equal amounts.
 */