100% Pure CSS Animated Drop-Down Info-Bar - Demonstrating the info-bar with multiple tabs.

This page demonstrates the Pure CSS Info-Bar, except with multiple nested tabs.

This uses a very similar CSS to the multiple-tabs example, except because we place the info-panels inside each other in the markup, we need to adjust the widths and positions slightly. That's about it!

The overall efffect is not only pleasing, but makes for good navigation - all the previous tabs are visible with the panels expanded - you can easily switch back to another tab.

Drawing this with the tabs on the right would seem to be more logical, but this is only a demo!

Here is the CSS..

highlighted source generated dynamically with corz distro machine..

/*
    Pure CSS Animated Drop-Down Info-Bar
    Multi-Tab Version

    (c) 2013->tomorrow! ~ cor + corz.org ;o)

    This stylesheet is freely released under the creative commons license:
    <http://creativecommons.org/licenses/by-nc-sa/1.0/>
*/

.site-notice-bar::before, .site-notice-bar {
    transition: all 300ms ease-out;
    position: relative;
    display: block;
    background-color: #f9e7aa;
    color: #E8910D;
    border: solid .2rem #fbb627;
    font-weight: bold;
    font-size: 110%;
}

.site-notice-bar {
    width: 90%;
    padding: 1rem;
    margin: 10rem auto 3rem;
    border: solid .2rem #FFC44D;
    border-radius: .5rem;
    -khtml-opacity: 1;
    opacity: 1;
}

.site-notice-bar > p {
    margin: 1rem;
}

@media screen and (min-width: 921px) {

    .site-notice-bar::before, .site-notice-bar {
        position: absolute;
        border-top: none;
        border-radius: 0; /* reset corners */
        padding: 0;
    }

    .site-notice-bar::before {
        content: attr(data-tab-text);
        margin-top: 12rem;
        padding: .5rem 1rem;
        cursor: pointer;
        left: -.2rem;
        z-index: 100;
        display: block;
        border-bottom-left-radius: .5rem;
        border-bottom-right-radius: .5rem;
    }

    .site-notice-bar {
        top: 0;
        margin-top: -12.2rem; /* .2rem added to remove visible border */
        height: 12rem;
        width: 50%;
        left: 25%;
        z-index: 101;
        -khtml-opacity: 0.66;
        width: 80rem;
        opacity: 0.66;
    }

    .site-notice-bar:hover {
        margin: 0;
        -khtml-opacity: 1;
        opacity: 1;
    }

    .tab-two, .tab-three  {
        left: -10.2rem;
        width: 90.2rem;
        top: -.2rem;
    }

    .tab-three  {
        width: 100.4rem;
    }
    .tab-one::before, .tab-two::before, .tab-three::before {
        width: 8rem;
        text-align: center;
    }

}

back to the main page

Make Big Fun Now!

;o) corz.org

Pure CSS Info-Bar (Multi-Tab Nested Tabs Demo)