HTML5 / CSS3的“垂直手风琴”设计？

Question

我对我的个人网站布局有一个想法。 我想在左侧堆叠菜单项（宽度约10％），在右侧显示内容。 通过“垂直算盘”（带有杆子上的珠子的原始计算器），我希望菜单项显示为各种颜色的框，每个框的高度都固定。 由于它们是设定的高度，因此将有很大一部分空白空间（根据您选择的菜单显示颜色）。

使用新的HTML5 / CSS3，我想知道如何创建菜单，以便在选择一个项目时，该特定项目（及其上方的项目）向上滑动并堆叠到顶部，同时进行更改根据相应菜单项的颜色，其下方空白区域的颜色。 选择堆叠在顶部的菜单项时，堆叠在其下方的菜单项将向下移动到其原始位置。

首次访问该网站：

点击“ Page2”后：

（我知道我是一位非常出色的MSPaint艺术家。）

我失去任何人了吗？ :)

我是否需要使用Javascript调整此过程？

我并不是要有人为我编写代码（尽管显然很受欢迎），因为W3Schools.com倍受皱眉，而且我对HTML5 / CSS3的新功能一无所知，所以我不知道从哪里开始。 看起来像这样简单的东西很难开始吗？

任何帮助是极大的赞赏！ :)

Answer 1

为您创建小提琴：

http://jsfiddle.net/M8bQH/

请根据您的需要调整宽度/高度和颜色！

HTML：

<div id="container">
    <div id="sideBar">
        <ul id="myMenu">
            <li class="topic1 activeItem">Home</li>
            <li class="topic2">Page 2</li>
            <li class="topic3">Page 3</li>
        </ul>
    </div>
    <div class="mainContent activeContent">
        Content1
    </div>
    <div class="mainContent">
        Content2
    </div>
    <div class="mainContent">
        Content3
    </div>
</div>

JavaScript（需要jQuery！）

$('#myMenu li').click(function(){
    // Set active menu item
    $('#myMenu li').removeClass('activeItem');
    $(this).addClass('activeItem');

    // Set active content according to item
    $('.mainContent').removeClass('activeContent');
    $('.mainContent').eq($(this).index()).addClass('activeContent');

    // Adapt background color of content according to item
    $('.mainContent.activeContent').css('background-color', $(this).css('background-color'));
});

CSS：

#container {
    width: 800px;
    height: 600px;
}

#myMenu {
    list-style-type:none;
    padding: 0;
    margin: 0;
}

#myMenu li {
    width: 100px;
    height:48px;
    border-bottom: 5px solid black;
    -webkit-transition: height linear 0.5s; /* For Safari 3.1 to 6.0 */
    transition: height linear 0.5s;
}
#myMenu li:last-child {
    border-bottom: 0px;
}
#sideBar {
    width: 100px;
    height: 600px;
    float:left;
    border-right: 5px solid black;
}

.mainContent {
    width: 700px;
    height: 100%;
    background-color: gray;
    display: none;
}

.topic1 {
    background-color: gray;
}
.topic2 {
    background-color: #33CCFF;
}
.topic3 {
    background-color: #99FF00;
}

.activeItem {
    height: 494px !important;
}

.activeContent {
    display: block !important;
}