New DS Interface

by nathanziarek

HTML

<div class="container">
    <div class="menu-button"></div>
    <div class="sidebar">
        <a href="http://en.wikipedia.org/wiki/Nasz_Dziennik">Nasz Dziennik</a>
        <a href="http://en.wikipedia.org/wiki/Responsive_web_design">Responsive Web Design</a>
        <a href="http://en.wikipedia.org/wiki/Mike_Flynn_(American_football)">Mike Flynn (American football)</a>
    </div>
    <div class="content">
        <div class="menu">
        
    </div>
        <iframe frameborder="0" width="836" height="466" src="http://en.wikipedia.org/wiki/Responsive_web_design"></iframe>
    </div>
</div>

CSS

.container {
    width: 836px;
    height: 506px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -418px;
    margin-top: -253px;
    box-shadow: 0 0 50px rgba(0,0,0,.5);
    background: #333;
    overflow: hidden
}
.menu {
    width: 100%;
    height: 40px;
    background: #777;
}
.sidebar {
    position: absolute;
    top: 0;
    -webkit-transform: scale(1.2);
    opacity: 0;
    -webkit-filter: blur(2px);
    -webkit-transition: -webkit-transform 600ms ease, -webkit-filter 600ms linear, opacity 600ms ease;
    z-index: 100;
    background: #333;
    height: 446px;
    width: 160px;
    padding: 40px 20px 20px 20px;
}
.content {
    position: absolute;
    top: 0;
    left: -0;
    width: 100%;
    height: 466px;
    -webkit-transition: -webkit-transform 500ms ease, -webkit-filter 500ms linear, opacity 500ms ease, left ease 200ms;
    z-index: 50;
    background: #222;
}

.open .content {
    -webkit-transform: scale(.85);
    -webkit-filter: blur(10px);
    opacity: .8;
}

.open .sidebar {
    -webkit-transform: scale(1);
    -webkit-filter: blur(0px);
    opacity: .9;
    left: 0;
}
.menu-button:before {
    width: 20px;
    height: 4px;
    border-radius: 2px;
    background: white;
    display: block;
    content: "";
    position: absolute;
    top: -6px;
    -webkit-transition: top 300ms linear, -webkit-transform 300ms linear 300ms;
}
.menu-button {
    width: 20px;
    height: 4px;
    border-radius: 2px;
    background: white;
    position: absolute;
    -webkit-transition: background 300ms linear, -webkit-transform 300ms linear;
    margin: 8px 0;
    z-index: 150;
    top: 10px;
    left: 10px;
}
.menu-button:after {
    width: 20px;
    height: 4px;
    border-radius: 2px;
    background: white;
    content: "";
    display: block;
    position: absolute;
    bottom: -6px;
    -webkit-transition: bottom 300ms linear, -webkit-transform 300ms linear 300ms;
}

.open .menu-button {
    background: transparent;
}
.open...

JavaScript

$(".menu-button").click( function() {
    $(".container").toggleClass("open");
});

$.ready( function() {
    
})

$("a").click( function() {
    $("iframe").attr({src: $(this).attr('href')});
    $(".container").toggleClass("open");
    return false;
})