Off-Canvas Right Menu

Pure CSS. Button triggers right menu to toggle. Slide animation.

by Ken Watanabe

HTML

<link rel="stylesheet" href="http://static.tumblr.com/7elo16l/WZyntdhk7/typography.css">
<input type="checkbox" name="toggle" id="toggle" />
<label for="toggle"></label>
<div class="information">
    <section>
    <p>A Collection Of DesignStudio Activity From London &amp; San Francisco.</p>
<p>Always raw and never too serious, our internal blog is intended to feed us a glimpse into each other's work in progress, activities, and daily lives.</p>
<p>From photos and footage to experimentations and work, we encourage everyone to contribute by emailing content to [email protected].</p>
<p>Give Rich, Ken, or Pete a shout with any suggestions, edits, or deaththreats. Or just become a contributor.</p>
    </section>
</div>

CSS

/*Blog Information*/
    
        .information {
            /*background:#272727;*/
            background:rgba(37, 37, 37, 0.99);
            position: fixed;
            top: 0;
            right: -50%;
            width: 50%;
            height: 100%;
            transition: all 500ms ease-in-out;
            -webkit-transition: all 500ms ease-in-out;
            -moz-transition: all 500ms ease-in-out;
            -o-transition: all 500ms ease-in-out;
            overflow: auto;
            overflow-x: hidden;
            box-sizing: border-box;
            z-index:100000;
            padding:60px 0 0 0;
            margin:0;
            }
        
        .information section {
            margin:20px 20px 20px 40px;
            /*margin:20px 20px 20px 0;*/
            width:425px;
            }
        
        .information p {
            font-size:24px;
            line-height:32px;
            letter-spacing:0.01em;
            font-weight:400;
            color:#fff;
            }
        
        .information p a {
            border-bottom: 2px solid #fff;
            padding-bottom:1px;
            color:#fff;
            }
        
        .information ul {
            font-size:16px;
            line-height:22px;
            font-weight:400;
            color:#fff;
            list-style-type: none;
            }
        
        .information ul a {
            border-bottom: 1px solid transparent;
            padding-bottom: 2px;
            color:#fff;
            }
            
        .information ul a:hover {
            border-bottom: 1px solid #fff;    
            }
        
        #toggle {
            position:fixed;
            top:-100px;
            left:-100px;
            appearance:none;
            }
        
        #toggle + label {
            position:fixed;
            left:20px;
            cursor:pointer;
            color: #272727;
            text-align:left;
            z-index:100000;
            }
        
       ...