jQuery手風琴列表中的角度元素？

Question

我想使用類似jQuery的手風琴菜單，但觸發元素成角度。我猜這是不可能的，但是我想我會看到有沒有人曾經嘗試過。

一些不太理想的想法：

1. 去老派，並與影像地圖的工作。儘管如此，我還沒有使用過多年的圖像地圖，因此需要進行一些測試以確定是否有可能。
2. 對每個導航元素使用多個目標區域並將它們置於交錯佈局中。雖然很哈克和臃腫。
3. 使用花式瀏覽器的旋轉功能。這實際上看起來不太糟糕，但對大多數用戶來說顯然不可見。也不確定這將如何影響內容領域 - 但可以探索。

讓我知道是否需要澄清。

這裏是概念的草圖： concept sketch http://img158.yfrog.com/img158/3122/slgu.jpg

Answer 1

我只是指向一個jQuery插件，完成這項任務相當不錯（Diagonal Accordion）。我還沒有測試它，但它看起來只限於45°角度，這有點令人失望，但仍然非常酷。

Answer 2

是的，我相信這是可以做到。從我的頭頂上思考這是你會做的。首先爲按鈕創建角度圖像。把這些圖像按順序放在HTML標記上，每個圖像之間都有一個div元素。所以標記會是這樣的。

<img id="bttnOne" src="buttnImg1" onclick="openContent('bttnContentOne');" /> 
<div id="bttnContentOne" style="display: none"> 
    content1 content1 content1 
</div> 

<img id="bttnTwo" src="buttnImg2" onclick="openContent('bttnContentTwo');" /> 
<div id="bttnContentTwo" style="display: none"> 
    content2 content2 content2 
</div> 

您將需要調整CSS以使這些適合正確。在元素上留下的浮點數可以很好地工作。現在你已經有了HTML，你需要創建一個我稱之爲openContent的函數。如果你願意，你可以傳遞被點擊的按鈕的id到那個函數，或者你可以想出一個更好的方法來做到這一點。

的openContent功能將類似於以下，

function openContent(eleId) { 
    $('.activeContent').slideUp('fast');       //Close the currently opened content tab 
    $('#' + eleId).slideDown('slow').class('activeContent');  //Open the new one and set the class 
} 

現在，我不是正面的了slideDown看起來正確的，如果它需要向右滑動，或左。如果沒有，那麼你可以嘗試使用動畫功能來左右滑動。這是一個非常粗略的例子，它可以做到這一點，所以不要期望這個代碼能夠工作，但主要的思考過程是正確的。

希望這會有所幫助！

都市報

（編者）

有一兩件事，我個人不喜歡這個例子是怎樣的文字也顯示對角線。我相信用長方形的盒子「看」對角線會更好。這是一個粗略的草圖ASCII :)

--------------------------- 
|  /| content content | 
| /| content content | 
| /| content content | 
| / |     | 
|/ |     | 
|/ |     | 
|/  |     | 
--------------------------- 

我不喜歡那個特定的實施另一件事是所有的擴展爲您創建div標籤。這一點效率很低。希望將來我們能夠輕鬆完成這些類型的事情。不過現在，如果你想要的內容實際上是對角線的實現，你將需要所有的div標籤來獲得它。