Jquery/Javascript旋轉下拉菜單

我需要一個下拉菜單出現旋轉90度逆時針 - 使下拉選擇「按鈕」文本垂直出現，然後這些選項同樣以側向旋轉的方式滑出垂直文本。（上下文：用戶需要從圖形的Y軸的多個選項中選擇一個標題 - 並且下拉標題需要存在於標題最終要去的地方，同樣旋轉。）Jquery/Javascript旋轉下拉菜單

html目前簡單如下：

<select id="title" > 
<option value="title-0">Choose a chart title</option> 
<option value="title-1">title 1</option> 
<option value="title-2">title 2</option> 
<option value="title-3">title 3</option> 
</select>

我知道這裏有CSS3的東西。我已經提到： Need Jquery code for rotate a whole div 所以我已經試過CSS像這樣或類似：

.box_rotate { 
-webkit-transform: rotate(90deg); /* Saf3.1+, Chrome */ 
-moz-transform: rotate(90deg); /* FF3.5+ */ 
-ms-transform: rotate(90deg); /* IE9 */ 
-o-transform: rotate(90deg); /* Opera 10.5 */ 
transform: rotate(90deg); 
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
M11=6.123233995736766e-17, M12=-1, M21=1, M22=6.123233995736766e-17, sizingMethod='auto expand'); 
zoom: 1; 
}

會發生什麼事是 - 至少在Firefox 15 - 選擇「按鈕」被旋轉，但是下拉選項，當菜單被激活時，保持在他們本來應該保持的水平位置 - （並且下拉鍊接不起作用）。

我已經嘗試將旋轉類分別應用於選項標記，或選擇標記或全部封閉的div。這似乎並沒有解決問題。

顯然，有很多插件能夠爲jQuery添加旋轉支持。（根據前面提到的SO問題）。我見過的人似乎只適用於圖像或簡單的div元素 - 沒有任何實際適用於整個下拉菜單。

任何想法？ .. Javascript/jQuery解決方案將是首選。

感謝

來源

2012-09-28 Andrew Vw

額外的評論：我正在使用一個JS框架圖本身 - Highcharts JS。所以，如果你想告訴我去拖網Highcharts API - 夠公平的 - 我會這樣做，但是，你知道，任何幫助歡迎。 Ta –

似乎它適用於FX15當旋轉效果應用於optgroup元素，

http://jsbin.com/ifatiy/1/edit

<select> 
    <optgroup> 
     <option value="title-0">Choose a chart title</option> 
     <option value="title-1">title 1</option> 
     <option value="title-2">title 2</option> 
     <option value="title-3">title 3</option> 
    </optgroup> 
</select>

，但你可能還需要指定的高度（和復位引用了optgroup的風格）

來源

2012-09-28 14:05:07 fcalderan

感謝Fabrizio，我會放手一搏。（現在需要睡覺 - 但將在早上看看它） –

非常感謝..但不太工作。正如你的jsbin鏈接所顯示的，optgroup不在選擇按鈕下面。通過重置optgroup的樣式，不太清楚你的意思。我可以向optgroup添加填充或邊距，但這隻會影響optgroup框中的選項文本，而不會影響optgroup框定位本身。 –

此外，單擊選項似乎不是完全可靠的：有時可行，有時不可行。這可能是一個特定於瀏覽器的問題（雖然它似乎也發生在Safari中） - 但是，Firefox是我的主要目標受衆瀏覽器，所以這對我沒有幫助.. –

這是一個瀏覽器bug：https://bugzilla.mozilla.org/show_bug.cgi?id=455164

來源

2012-09-28 14:05:12 epascarello

如下 - 這可能是一個瀏覽器的具體問題，（雖然它似乎也發生在Safari中） - 但是，Firefox是我的主要目標受衆瀏覽器，所以，不幫不了我。 –

那麼，如果它是一個錯誤，除了使自己的選擇元素超出divs和無序列表之外，你真的無能爲力。 – epascarello

我會放棄它。謝謝。 –

Jquery/Javascript旋轉下拉菜單

回答

相關問題