slider menu

by abenrob

HTML

<div class="block">
    <h4>Lovely spam!!!</h4>
    <h4>Wonderful spam!!!</h4>
</div>
<div class="trigger">
    <div class="stack rotate">
        more spam
    </div>
</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;
}
.rotate {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.stack {
    margin: 45px -25px;
}
.trigger {
    position: absolute;
    left: 0px;
    top:50%;
    margin-top: -54px; /*half height*/
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    background-color:#abc;
    opacity:0.8;
    filter:alpha(opacity=60); /* For IE8 and earlier */
}
.block {
    position: absolute;
    left: -200px;
    width: 200px;
    height: 100%;
    background-color:#abc;
    opacity:0.8;
    filter:alpha(opacity=60); /* For IE8 and earlier */
}
.block h4 {
    margin: 10px;
}
}

JavaScript

var open = 0;
$(".trigger" ).click(function() {
    if (open == 0) {
        $(".block" ).animate({ "left": "+=200px" }, "slow" );
        $(".trigger" ).animate({ "left": "+=200px" }, "slow" );
        open = 1;
    }
    else if (open == 1) {
        $(".block" ).animate({ "left": "-=200px" }, "slow" );
        $(".trigger" ).animate({ "left": "-=200px" }, "slow" );
        open = 0;
    }
});