爲您創建一個小提琴:
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;
}
它與您所描述的不完全相同,但如果我正確理解您的要求,他們稱爲手風琴的導航元素應該非常接近?幾個實現可以在這裏找到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