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

我对我的个人网站布局有个想法。我想在左侧堆叠菜单项（宽度为10％），内容在右侧。通过'垂直算盘'（原来的计算器上有一个棒上的珠子），我希望菜单项显示为每个盒子设置的高度不同的颜色框。因为它们是一组高度，所以会有很大一部分空白空间（根据您选择的菜单进行着色）。“垂直手风琴”设计与HTML5/CSS3？

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

到网站第一次访问：

点击 '第2页' 后：

（我这样一个优秀的艺术家MSPAINT，我知道）

我有没有输给任何人然而？ :)

我需要调整这个过程与JavaScript？我不是要求某人为我编写代码（尽管显然是受欢迎的），但我不知道从W3Schools.com被折磨到什么时候开始，我对HTML5/CSS3中的新功能有业余知识。看起来很简单，因为这很难开始？

任何帮助，非常感谢！ :)

来源

2014-06-16 mattshu

它与您所描述的不完全相同，但如果我正确理解您的要求，他们称为手风琴的导航元素应该非常接近？几个实现可以在这里找到http://designscrazed.net/html5-css3-accordion-tabs/ – fvu

我会用这个弹性框布局，但它不是非常向后兼容。 – Akxe

fvu：感谢您的链接。那里有趣的概念。我认为将其称为'手风琴'设计更适合我的需要。 Akxe：哦，我发现这个寻找flexbox布局。如果我无法从内容中分离出菜单项，我将以此作为最后的手段。感谢关键字。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes#Holy_Grail_Layout_example – mattshu

为您创建一个小提琴：

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; 
}

来源

2014-06-17 08:56:05

不错的工作，你完全是他想要的:) – KunJ

非常感谢你！ – mattshu

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

回答

相关问题