I am the first Panel!

The second tab only appears once you activate this panel.

Panel Two!

Tab three will only appear when I am active!

I just happen to be drawn to the left of the previous tab, but I don't have to be.

Panel Three!

I am the inner-most panel, but as you can see, I don't have to look that way!

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

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)

Welcome to corz.org!

If something isn't working, I'm probably improving it, try again in a minute. If it's still not working, please mail me!