slider menu

by abenrob

HTML

<div class="summary-block">
    <a href="#" class="summary-more-info">more info</a>
    <div class="summary-container">
        <div class="summary-columns">
            <h4>Lovely spam!!!</h4>
            <h4>Wonderful spam!!!</h4>
        </div>
        <div class="summary-columns">
            <h4>More spam!!!</h4>
            <h4>Delicious spam!!!</h4>
        </div>
    </div>
    <div class="summary-container">
        <div class="summary-columns">
            <h4>Lovely spam!!!</h4>
            <h4>Wonderful spam!!!</h4>
        </div>
    </div>
</div>
<div class="summary-block-strip"></div>
<div class="summary-trigger">
</div>
spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam...

CSS

body {
    margin: 0 !important;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    overflow-x:hidden;
    background-color: darkgrey;
}
h4 {
    margin: 5px 0;
}
.summary-container {
    padding: 10px;
    border-bottom:3px solid black;
    margin: 10px;
}
.summary-columns {
    display: inline-block;
    padding: 10px 0;
    width: 170px;
    margin-right:5px;
}
.summary-trigger {
    position: absolute;
    height: 120px;
    width:32px;
    right: 5px;
    top:62px;
    -moz-border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    cursor: pointer;
    background-color:#fff;
}
.summary-block {
    position: absolute;
    right: -400px;
    width: 405px;
    height: 100%;
    background-color:#fff;
}
.summary-block-strip{
    position: absolute;
    right: 0;
    width: 20px;
    right: -10px;
    height: 100%;
    background-color:#fff;
}
.summary-block a {
    margin-lefT: 10px;
}

JavaScript

var state = 'closed';
var slideAction = function(target,direction,distance){
    if (direction == 'out'){
        op = '+='
    }else if (direction == 'in'){
        op = '-='
    }
    target.animate({ 'right': op+distance+'px' }, 'slow' );
};
$(".summary-trigger" ).click(function() {
    if (state == 'closed') {
        slideAction($(".summary-block" ),'out',200);
        slideAction($(".summary-trigger" ),'out',200);
        slideAction($(".summary-block-strip" ),'out',5);
        state = 'open';
    }
    else if (state == 'open') {
        slideAction($(".summary-block" ),'in',200);
        slideAction($(".summary-trigger" ),'in',200);
        slideAction($(".summary-block-strip" ),'in',10);
        state = 'closed';
    }
    else if (state == 'full') {
        slideAction($(".summary-block" ),'in',400);
        slideAction($(".summary-trigger" ),'in',400);
        slideAction($(".summary-block-strip" ),'in',10);
        state = 'closed';
    }
});

$(".summary-more-info" ).click(function() {
    if (state == 'open') {
        slideAction($(".summary-block" ),'out',200);
        slideAction($(".summary-trigger" ),'out',200);
        state = 'full';
        $('.summary-more-info').html('less info');
    } 
    else if (state == 'full') {
        slideAction($(".summary-block" ),'in',200);
        slideAction($(".summary-trigger" ),'in',200);
        state = 'open';
        $('.summary-more-info').html('more info');
    }
});