Z-site proto

by Vladimir

HTML

<div class="slide">
<h1>Главная</h1>
</div>
<div class="slide">
<h1>Персонал</h1>
</div>
<div class="slide">
    <div class="slide">
        <h1>Услуги</h1>
        <span class="right">Просмотр &gt;</span>
    </div>
    <div class="subslide">
        <span class="left">&lt;К списку услуг</span>
        <div class='subsubslide'><h1>Услуга А</h1></div>
        <div class='subsubslide'><h1>Услуга Б</h1></div>
        <div class='subsubslide'><h1>Услуга В</h1></div>
        <div class='subsubslide'><h1>Услуга Г</h1></div>
    </div>
</div>
<div class="slide">
<h1>Контакты</h1>
</div>

CSS

h1 {
    color:#008;
    font-size:30px;
}
.noscroll {
    overflow: hidden;
    width:100%;
    height: 600px;
}
.slide,
.subsubslide {
    width:100%;
    overflow:hidden;
    height:600px;
    background: #FDD;
    position:relative;
}
.subsubslide:nth-child(2n),
.slide:nth-child(2n) {
    background: #DFD;
}
span {
    font-size:50px;
}
.subslide {
    width:100%;
    height:600px;
    position: absolute;
    left:100%;
    background:red;
    overflow-y: scroll;
    top:0;
}

JavaScript

$('.right').click(function()
                  {
                      $('.slide .slide').css('margin', '0 0 0 -100%');
                      $('.slide .subslide').css('left', 0);
                      $('body').addClass('noscroll').scrollTop(1200);
                  });

$('.left').click(function()
                  {
                      $('.slide .slide').css('margin', '0 0 0 0');
                      $('.slide .subslide').css('left', '-100%');
                      $('body').removeClass('noscroll');
                  });