Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                h1 WIN Nav Ribbon Bar

.nav-ribbon
    .nav-ribbon-item.on.one
        h2.nav-ribbon-item-title 
            a.nav-ribbon-item-trigger(href="#")
                | <svg class="nav-ribbon-item-title-svg" width="41" height="53" viewBox="9 11 41 53" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M23.916 53.506c-3.4 0-6.19-2.79-6.19-6.19V32.282h-.885c-3.398 0-6.19-2.792-6.19-6.19v-8.844c0-3.4 2.792-6.19 6.19-6.19h26.53c.223 0 .47.027.692.027l-.165.138-10.944 9.313c-2.653 2.24-4.616 6.522-4.616 9.977v22.993h-4.42z" fill="#BA2C2B"/><path d="M33.422 62.985c-1.243 0-1.547-1.41-1.547-2.404V30.514c0-2.432 1.492-5.693 3.37-7.296L46.19 13.93c.498-.44 1.16-.855 1.824-.855 1.244 0 1.548 1.41 1.548 2.404v30.067c0 2.432-1.492 5.693-3.372 7.296L35.246 62.13c-.497.44-1.16.855-1.824.855z" fill="#EF4E45"/></g></svg>
                span.nav-ribbon-item-title-text Mercer Market Data
        .nav-ribbon-item-description 
            ul
                li 
                    a.nav-ribbon-item-link(href="#") One list item A
                li One list item B
                li One list item C
    .nav-ribbon-item.two
        h2.nav-ribbon-item-title 
            a.nav-ribbon-item-trigger(href="#")
                | <svg class="nav-ribbon-item-title-svg" width="53" height="43" viewBox="24 11 53 43" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="#5885BD"><path d="M50.9 42.523H35.457c-.423 0-.752.33-.752.753v1.504c0 .424.33.753.752.753h16.555c.423 0 .752-.33.752-.753v-.474c-.675-.536-1.3-1.133-1.864-1.783zM47.845 36.503H35.457c-.423 0-.752.33-.752.753v1.505c0 .424.33.753.752.753h13.448c-.464-.948-.822-1.956-1.06-3.01zM47.507 33.494h-12.05c-.423 0-.752-.33-.752-.753v-1.504c0-.423.33-.752.752-.752h12.37c-.21.956-.32 1.95-.32 2.968v.042z"/><path d="M60.62 19.6v-6.343c0-1.246-1.01-2.257-2.258-2.257H37.294c-1.247 0-2.987.73-3.857 1.6L26.1 19.934c-.87.87-1.598 2.61-1.598 3.857V50.88c0 1.247 1.01 2.258 2.257 2.258H58.36c1.247 0 2.258-1.01 2.258-2.258v-3.575c-.923-.054-1.823-.198-2.69-.422v3.245H27.834v-24.08h9.782c1.246 0 2.257-1.01 2.257-2.256V14.01h18.06v6.012c.865-.224 1.765-.368 2.688-.422zm-24.36-5.402c-.4.14-.8.353-.964.517l-7.36 7.36c-.165.165-.376.565-.517.964h8.84v-8.842z"/></g><path d="M74.702 31.28c0-6.355-5.18-11.51-11.565-11.51v11.51h11.565z" fill="#7ED321"/><path d="M64.025 33.198l8.208 8.183c2.123-2.082 3.433-4.99 3.433-8.182h-11.64z" fill="#EF4E45"/><path d="M61.21 33.108v-11.42c-6.386 0-11.566 5.156-11.566 11.51 0 6.355 5.18 11.51 11.565 11.51 3.207 0 6.128-1.304 8.222-3.417L61.21 33.11z" fill="#FBAE17"/></g></svg>
                span.nav-ribbon-item-title-text Diagnostic Report
        .nav-ribbon-item-description
            p Two's description
            ul
                li Two list item A
                li Two list item B
                li Two list item C
                li Two list item D
    .nav-ribbon-item.three
        h2.nav-ribbon-item-title 
            a.nav-ribbon-item-trigger(href="#") 
                | <svg class="nav-ribbon-item-title-svg" width="52" height="37" viewBox="24 10 52 37" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M75.398 40.648c0-5.318-1.247-13.482-8.14-13.482-.73 0-3.813 3.27-8.424 3.27-4.61 0-7.694-3.27-8.423-3.27-6.893 0-8.14 8.164-8.14 13.482 0 3.81 2.54 6.093 6.282 6.093h20.564c3.74 0 6.282-2.28 6.282-6.092zm-7.53-21.01c0-4.99-4.046-9.036-9.034-9.036S49.8 14.65 49.8 19.637s4.046 9.035 9.034 9.035 9.035-4.047 9.035-9.035z" fill="#5885BD"/><g fill="#C98313"><path d="M47.892 20.264c0-1.173-.96-2.133-2.133-2.133h-4.694V16c0-.707-.574-1.28-1.28-1.28h-7.68c-.706 0-1.28.573-1.28 1.28v2.133h-4.693c-1.173 0-2.133.96-2.133 2.134v5.12h23.892v-5.12zm-15.36-2.133v-1.705h6.827v1.706h-6.827zM37.653 26.664H34.24v1.707h3.413"/><path d="M46.996 26.664h-8.064v2.133c0 .467-.386.854-.853.854h-4.267c-.467 0-.854-.386-.854-.853v-2.133H24v6.4c0 1.173.96 2.133 2.133 2.133h15.01c.624-3.805 2.21-7.562 5.853-8.533z"/></g></g></svg>
                span.nav-ribbon-item-title-text My Jobs
        .nav-ribbon-item-description 
            p Three's description
            ol
                li Three list item A
                li Three list item B
                li Three list item C
                li Three list item D
    .nav-ribbon-item.four
        h2.nav-ribbon-item-title 
            a.nav-ribbon-item-trigger(href="#") 
                | <svg class="nav-ribbon-item-title-svg" width="54" height="50" viewBox="24 10 54 50" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="#7ED321"><path d="M73 17.314c0-3.777-3.08-6.857-6.857-6.857s-6.857 3.08-6.857 6.857 3.08 6.857 6.857 6.857S73 21.09 73 17.315zM76.43 33.627c0-2.17.08-9.456-3.323-9.456-.562 0-3.348 2.278-6.964 2.278-1.232 0-2.41-.214-3.563-.616.08.59.134 1.18.134 1.768 0 2.437-.776 4.848-2.17 6.857 2.786.08 5.304 1.286 7.1 3.43h3.588c2.68 0 5.197-1.287 5.197-4.26z"/></g><g fill="#5885BD"><path d="M61 27.6c0-5.68-4.607-10.286-10.286-10.286-5.678 0-10.285 4.607-10.285 10.286 0 5.68 4.606 10.286 10.284 10.286C56.394 37.886 61 33.28 61 27.6z"/><path d="M69.57 51.52c0-6.054-1.418-15.35-9.266-15.35-.91 0-4.233 3.725-9.59 3.725s-8.678-3.724-9.59-3.724c-7.847 0-9.267 9.296-9.267 15.35 0 4.34 2.866 6.937 7.152 6.937h23.41c4.285 0 7.15-2.598 7.15-6.937z"/></g><g fill="#C45F24"><path d="M42.143 17.314c0-3.777-3.08-6.857-6.857-6.857s-6.857 3.08-6.857 6.857 3.08 6.857 6.856 6.857c3.777 0 6.857-3.08 6.857-6.856zM40.884 34.457c-1.393-2.01-2.17-4.42-2.17-6.857 0-.59.054-1.18.134-1.768-1.152.402-2.33.616-3.562.616-3.616 0-6.402-2.277-6.965-2.277-3.4 0-3.32 7.287-3.32 9.457 0 2.973 2.518 4.26 5.196 4.26h3.59c1.794-2.144 4.312-3.35 7.098-3.43z"/></g></g></svg>
                span.nav-ribbon-item-title-text My Employees
        .nav-ribbon-item-description 
            p Four's description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus perferendis consectetur, recusandae aperiam officia qui vel facilis enim, magni aliquid laudantium, maiores ipsam voluptatibus blanditiis minus in et earum reiciendis?
    .nav-ribbon-item.five
        h2.nav-ribbon-item-title 
            a.nav-ribbon-item-trigger(href="#") 
                | <svg class="nav-ribbon-item-title-svg" width="49" height="54" viewBox="24 9 49 54" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M32.186 45.167h-2.02c-2.562 0-4.666-2.105-4.666-4.667v-6.667c0-2.562 2.104-4.666 4.667-4.666h.666v-14c0-2.563 2.105-4.667 4.667-4.667h14.667c2.562 0 4.666 2.104 4.666 4.667v1.523H42.186c-2.563 0-4.667 2.105-4.667 4.667v14h-.668c-2.562 0-4.666 2.104-4.666 4.667v5.143z" fill="#5885BD"/><path d="M40.357 53.833h-1.524c-2.562 0-4.666-2.104-4.666-4.666V42.5c0-2.563 2.104-4.667 4.666-4.667h.667v-14c0-2.562 2.104-4.666 4.667-4.666h14.666c2.563 0 4.667 2.104 4.667 4.666v1.772H50.357c-2.562 0-4.667 2.104-4.667 4.666v14h-.666c-2.563 0-4.667 2.106-4.667 4.668v4.895z" fill="#7ED321"/><path d="M52.586 27.833c-2.563 0-4.667 2.105-4.667 4.667v14h-.668c-2.562 0-4.666 2.104-4.666 4.667v6.666c0 2.563 2.104 4.667 4.666 4.667h20c2.563 0 4.667-2.104 4.667-4.667V32.5c0-2.563-2.105-4.667-4.668-4.667H52.586z" fill="#EF4E45"/></g></svg>
                span.nav-ribbon-item-title-text My Library
        .nav-ribbon-item-description 
            p Five's description
    .nav-ribbon-item.six
        h2.nav-ribbon-item-title 
            a.nav-ribbon-item-trigger(href="#")
                | <svg class="nav-ribbon-item-title-svg" width="51" height="43" viewBox="24 12 51 43" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M68.034 20.246c-.014-2.26-.808-4.188-2.38-5.784-1.59-1.61-3.526-2.417-5.815-2.417-2.29 0-4.238.806-5.85 2.417-1.595 1.596-2.4 3.524-2.415 5.784h2.24c.016-1.607.612-2.998 1.787-4.173 1.19-1.19 2.603-1.786 4.237-1.786s3.035.595 4.202 1.786c1.152 1.175 1.736 2.566 1.75 4.173h2.242zm-6.005 0c-.632-.47-1.362-.706-2.19-.706-.83 0-1.567.235-2.213.706h4.402z" fill="#5A81C0"/><path d="M68.034 20.246h.193c3.692 0 6.724 3.032 6.724 6.724v21.133c0 3.693-3.03 6.725-6.723 6.725H31.724c-3.692 0-6.724-3.032-6.724-6.725V19.286c0-3.693 3.032-6.724 6.724-6.724h9.606c3.692 0 6.724 3.03 6.724 6.724v.96h3.52v18.696c0 1.634.596 3.047 1.786 4.237s2.604 1.786 4.238 1.786c1.634 0 3.035-.596 4.203-1.787 1.168-1.19 1.752-2.604 1.752-4.238v-15.69c0-1.027-.362-1.903-1.086-2.626-.14-.14-.286-.267-.437-.38h3.763v.064h2.24v-.064zm-10.407 0h-3.81v18.696c0 1.027.372 1.914 1.12 2.66.747.75 1.634 1.122 2.66 1.122 1.028 0 1.904-.373 2.628-1.12.723-.748 1.085-1.635 1.085-2.662v-15.69c0-.42-.14-.77-.42-1.05-.28-.28-.63-.42-1.05-.42-.42 0-.783.14-1.086.42-.304.28-.456.63-.456 1.05v14.22h-2.24V23.25c0-1.027.373-1.903 1.12-2.626.144-.14.294-.267.45-.38z" fill="#5885BD"/></g></svg>
                span.nav-ribbon-item-title-text Attachments
        .nav-ribbon-item-description 
            p Six's description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus perferendis consectetur, recusandae aperiam officia qui vel facilis enim, magni aliquid laudantium, maiores ipsam voluptatibus blanditiis minus in et earum reiciendis?
            p Six's description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus perferendis consectetur, recusandae aperiam officia qui vel facilis enim, magni aliquid laudantium, maiores ipsam voluptatibus blanditiis minus in et earum reiciendis?
              
            
!

CSS

              
                $clr1: #3F699E;
$clr2: #EDEDED;

$clr-title: $clr1;
$clr-background: $clr2;

body {
    
    color: $clr1;
    font: normal 16px/24px arial, sans-serif;
    margin: 4rem;
    
}

a {
    color: $clr1;
    text-decoration: none;
}

.nav-ribbon {
    
    display: flex;
    flex-direction: row;
    
}

.nav-ribbon-item {
    
    background: $clr-background;
    display: flex;
    flex: 0 1 12%;
    flex-direction: column;
    margin: 0 0.5rem 0 0;
    transition: all 300ms ease-out;
    
    p, ul, ol {
        
        margin: 0;
        padding: 0;
        
    }
    
    li {
        
        margin: 0 0 0 1.25rem;
        padding: 0;
        
    }
    
    .nav-ribbon-item-title {
        
        align-items: center;
        display: flex;
        flex: 1 1 auto;
        font-size: 1rem;
        margin: 0;
        padding: 0.5rem;
        
    }
    
    .nav-ribbon-item-trigger {
        
        color: $clr-title;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        text-decoration: none;
        
    }
    
    .nav-ribbon-item-title-svg {
        
        align-self: center;
        flex: 0 1 auto;
        transition: all 250ms ease-out;
        
    }
    
    .nav-ribbon-item-title-text {
        
        align-self: center;
        flex: 0 1 auto;
        text-align: center;
        transition: all 250ms ease-out;
        
    }
    
    .nav-ribbon-item-description {
        
        flex: 1 1 auto;
        margin: 0;
        max-height: 0;
	    overflow: hidden;
        padding: 0;
        transition: all 250ms ease-out;
        
    }
    
    &.on {
        
        flex: 1 1 auto;
        
        .nav-ribbon-item-title {
            
            flex: 0 1 auto;
            
        }
        
        .nav-ribbon-item-trigger {
        
            flex-direction: row;
            justify-content: flex-start;
            
        }
        
        .nav-ribbon-item-title-svg {
            
            align-self: flex-start;
            transform: scale(0.65) translateY(-0.65rem);
            
        }

        .nav-ribbon-item-title-text {
            
            align-self: flex-start;
            flex: 1 1 auto;
            margin-left: 0.25rem;
            text-align: left;
            
        }
        
        .nav-ribbon-item-description {
        
            max-height: 6rem;
            overflow: auto;
            padding: 0.5rem;

        }
        
    }
    
}
              
            
!

JS

              
                $(".nav-ribbon-item-trigger").click(function (event) {
    
    $(".nav-ribbon-item").removeClass("on");
    $(this).parents(".nav-ribbon-item").addClass("on");
    
    event.preventDefault();
    
});


              
            
!
999px

Console