best method for horizontal web display?

Question

I have a new project in front of me and I have to create a horizontal display of 7 pages. The middle page would be the main page and to the left and to the right there would be 3 other pages. Its my first time with a horizontal display.

What method would be the best and most direct way?! Do people have ideas for this?!

Thanks for the help

Answer 1

Maybe this will get you started:

CSS

html,
body
{
    height:100%;
}
body
{
    margin:0;
    padding:0;
    overflow:auto;
}
ul
{
    margin:0;
    padding:0;
}
ul li
{
    margin:0;
    padding:0;
    list-style-type:none;
    float:left;
}
ul li.page-1,
ul li.page-3,
ul li.page-5,
ul li.page-7
{
    background-color:#655;
}
ul li.page-2,
ul li.page-4,
ul li.page-6
{
    background-color:#855;
}
.clearfix:after
{
    clear:both;
    content:'.';
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    visibility:hidden
}
.clearfix
{
    display:block;
    zoom:1
}​

jQuery

var width=$(window).width();

$('body').css('width',(width*7)+'px').scrollLeft((width*3));

$('ul li').css({'width':width+'px','height':$(document).height()+'px'});

​ HTML

<ul class="clearfix">
    <li class="page-1">
        page 1
    </li><li class="page-2">
        page 2
    </li><li class="page-3">
        page 3
    </li><li class="page-4">
        page 4 (current)
    </li><li class="page-5">
        page 5
    </li><li class="page-6">
        page 6
    </li><li class="page-7">
        page 7
    </li>
</ul>​

DEMO

Edit:

In order to navigate to the prev/next page add this:

jQuery

$('.prev').click(function()
{
    i=$(this).parent('li').index()-1;

    $('body').animate({scrollLeft:(width * i)});

    return false;
});

$('.next').click(function()
{
    i=$(this).parent('li').index()+1;

    $('body').animate({scrollLeft:(width * i)});

    return false;
});

HTML

<ul class="clearfix">
    <li class="page-1">
        page 1
        <a href="#" class="next">Next</a>
    </li><li class="page-2">
        page 2
        <a href="#" class="prev">Prev</a> &middot; <a href="#" class="next">Next</a>    
    </li>
    ....
    <li class="page-7">
        page 7
        <a href="#" class="prev">Prev</a>
    </li>
</ul>​

DEMO 2