2014-06-16 111 views
0

我對我的個人網站佈局有個想法。我想在左側堆疊菜單項(寬度爲10%),內容在右側。通過'垂直算盤'(原來的計算器上有一個棒上的珠子),我希望菜單項顯示爲每個盒子設置的高度不同的顏色框。因爲它們是一組高度,所以會有很大一部分空白空間(根據您選擇的菜單進行着色)。「垂直手風琴」設計與HTML5/CSS3?

利用新的HTML5/CSS3,我想知道如何創建菜單,以便當您選擇一個項目時,該特定項目(及其上面的項目)向上滑動並堆疊到頂部,同時根據相應菜單項的顏色更改其下方空白空間的顏色。當選擇堆疊在頂部的菜單項目時,堆疊在其下方的項目將移回原始位置。

到網站第一次訪問: http://imgur.com/mLStvJL

點擊 '第2頁' 後: http://imgur.com/aD9b2hj

(我這樣一個優秀的藝術家MSPAINT,我知道)

我有沒有輸給任何人然而? :)

我需要調整這個過程與JavaScript?我不是要求某人爲我編寫代碼(儘管顯然是受歡迎的),但我不知道從W3Schools.com被折磨到什麼時候開始,我對HTML5/CSS3中的新功能有業餘知識。看起來很簡單,因爲這很難開始?

任何幫助,非常感謝! :)

+1

它與您所描述的不完全相同,但如果我正確理解您的要求,他們稱爲手風琴的導航元素應該非常接近?幾個實現可以在這裏找到http://designscrazed.net/html5-css3-accordion-tabs/ – fvu

+0

我會用這個彈性框佈局,但它不是非常向後兼容。 – Akxe

+0

fvu:感謝您的鏈接。那裏有趣的概念。我認爲將其稱爲'手風琴'設計更適合我的需要。 Akxe:哦,我發現這個尋找flexbox佈局。如果我無法從內容中分離出菜單項,我將以此作爲最後的手段。感謝關鍵字。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes#Holy_Grail_Layout_example – mattshu

回答

2

爲您創建一個小提琴:

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

不錯的工作,你完全是他想要的:) – KunJ

+0

非常感謝你! – mattshu