Skip to content

Instantly share code, notes, and snippets.

@SindhujaD

SindhujaD/Social-App-Menu.markdown

Created January 16, 2014 02:41
Download ZIP

Revisions

  1. SindhujaD created this gist Jan 16, 2014.
    8 changes: 8 additions & 0 deletions Social-App-Menu.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    Social App Menu
    ---------------
    Front end animation based on the work of CreativeDash.
    http://dribbble.com/shots/1230861-Social-Feed-iOS-7-CSS

    A [Pen](http://codepen.io/matthoiland/pen/vHFCk) by [Matt Hoiland](http://codepen.io/matthoiland) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/matthoiland/pen/vHFCk/license).
    37 changes: 37 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    <html>
    <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>

    <div class="background">
    <div class="circle"></div>
    <div class="iphone">
    <div class="screen">
    <div class="menu">
    <ul>
    <li><a href="">Home</a></li>
    <li><a href="">What's New</a></li>
    <li><a href="">Popular</a></li>
    <li><a href="">Activity</a></li>
    <li><a href="">Chat</a></li>
    <li><a href="">Around Me</a></li>
    <li><a href="">Help Center</a></li>
    <li><a href="">Logout</a></li>
    </ul>
    </div>
    <div class="status"></div>
    <div class="content ">
    <div class="button"></div>
    </div>
    </div>
    </div>
    </div>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="menu.js"></script>
    </body>
    </html>
    61 changes: 61 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@

    /* Define Click Event for Mobile */
    if( 'ontouchstart' in window ){ var click = 'touchstart'; }
    else { var click = 'click'; }




    /* Reveal Menu */
    $('div.button').on(click, function(){
    if( !$('div.content').hasClass('inactive') ){
    // Remove circle
    $('div.circle').remove();

    // Slide and scale content
    $('div.content').addClass('inactive');
    setTimeout(function(){ $('div.content').addClass('flag'); }, 100);

    // Change status bar
    $('div.status').fadeOut(100, function(){
    $(this).toggleClass('active').fadeIn(300);
    });

    // Slide in menu links
    var timer = 0;
    $.each($('li'), function(i,v){
    timer = 40 * i;
    setTimeout(function(){
    $(v).addClass('visible');
    }, timer);
    });
    }
    });



    /* Close Menu */
    function closeMenu() {
    // Slide and scale content
    $('div.content').removeClass('inactive flag');

    // Change status bar
    $('div.status').fadeOut(100, function(){
    $(this).toggleClass('active').fadeIn(300);
    });

    // Reset menu
    setTimeout(function(){
    $('li').removeClass('visible');
    }, 300);
    }

    $('div.content').on(click, function(){
    if( $('div.content').hasClass('flag') ){
    closeMenu();
    }
    });
    $('li a').on(click, function(e){
    e.preventDefault();
    closeMenu();
    });
    162 changes: 162 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,162 @@
    /* Basic Reset and General */
    * {
    margin: 0px;
    padding: 0px;
    }
    html, body {
    min-width: 435px;
    min-height: 1000px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    div.background {
    position: absolute;
    top: 0px; left: 0px;
    min-width: 435px;
    min-height: 1000px;
    height: 100%; width: 100%;
    background: #408dce url('http://creativeda.sh/sandbox/social_menu/img/background.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    div.circle {
    height: 77px; width: 77px;
    background: url('http://creativeda.sh/sandbox/social_menu/img/circle.png');
    position: absolute;
    top: 50%; left: 50%;
    z-index: 200;
    margin: -328px 0px 0px -180px;
    pointer-events: none;
    animation: pulse 5s infinite;
    -webkit-animation: pulse 1.5s infinite;
    opacity: 0;
    }
    @keyframes pulse {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    }
    @-webkit-keyframes pulse {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    }




    /* The Device */

    div.iphone {
    height: 810px; width: 435px;
    position: absolute;
    margin: auto;
    top: 0px; bottom: 80px; left: 0px; right: 0px;
    background: url('http://creativeda.sh/sandbox/social_menu/img/iphone.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    div.screen {
    height: 568px; width: 320px;
    position: absolute;
    top: 119px; left: 59px;
    overflow: hidden;
    position: relative;
    }


    /* Content */
    div.menu {
    position: absolute;
    height: 100%; width: 100%;
    background: url('http://creativeda.sh/sandbox/social_menu/img/blur.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    div.menu ul {
    width: 600px;
    list-style: none;
    margin: 95px 0px 0px 75px;
    }
    div.menu li {
    font-family: 'HelveticaNeue-UltraLight', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', sans-serif;
    font-weight: 200;
    font-size: 19px;
    line-height: 19px;
    margin-bottom: 28px;

    -webkit-transition: all 400ms ease-in-out, opacity 1000ms ease;
    -moz-transition: all 400ms ease-in-out, opacity 1000ms ease;
    -ms-transition: all 400ms ease-in-out, opacity 1000ms ease;
    -o-transition: all 400ms ease-in-out, opacity 1000ms ease;
    transition: all 400ms ease-in-out, opacity 1000ms ease;
    -webkit-transform: translate3d(-150px, 0px, 0px) scale(0.2);
    opacity: 0;
    }
    div.menu li.visible {
    -webkit-transform: translate3d(0px, 0px, 0px) scale(1);
    opacity: 1;
    }
    div.menu li a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    }

    div.status {
    position: absolute;
    top: 0px; left: 0px;
    z-index: 200;
    height: 20px; width: 100%;
    background: url('http://creativeda.sh/sandbox/social_menu/img/status_black.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
    div.status.active {
    background-image: url('http://creativeda.sh/sandbox/social_menu/img/status_white.png');
    }

    div.content {
    position: absolute;
    top: 0px; left: 0px;
    height: 568px; width: 320px;
    background: #fff url('http://creativeda.sh/sandbox/social_menu/img/screen.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-backface-visibility: hidden;
    }
    div.content.inactive {
    cursor: pointer;
    -webkit-transform: translate3d(160px, 0px, 0px) scale(0.5);
    -moz-transform: translate3d(160px, 0px, 0px) scale(0.5);
    -ms-transform: translate3d(160px, 0px, 0px) scale(0.5);
    transform: translate3d(160px, 0px, 0px) scale(0.5);
    }


    div.button {
    width: 30px; height: 30px;
    position: absolute;
    top: 23px; left: 3px;
    cursor: pointer;
    }