用于旋转下拉菜单的 Jquery/Javascript答案

【问题标题】：Jquery/Javascript for rotating a dropdown menu用于旋转下拉菜单的 Jquery/Javascript
【发布时间】：2012-09-20 10:14:33
【问题描述】：

我需要一个下拉菜单以逆时针旋转 90 度出现 - 以便下拉选择“按钮”文本垂直显示，然后选项同样以旋转、侧向的方式滑出，并带有垂直文本。（上下文：用户需要从图表的 Y 轴的多个选项中选择一个标题 - 并且下拉菜单需要存在于标题最终将出现的位置，同样旋转。）

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 解决方案。

谢谢

【问题讨论】：

附加评论：我正在为图形本身使用 JS 框架 - Highcharts JS。所以如果你想告诉我去搜索 Highcharts API - 很公平 - 我会这样做，但是，你知道，欢迎任何帮助。塔

标签： javascript jquery html css rotation

【解决方案1】：

当旋转效果应用于optgroup元素时，它似乎适用于FX15，

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 引入的样式）

【讨论】：

谢谢 Fabrizio，我会试一试的。（现在需要睡觉——但会在早上看）
非常感谢..但不是很有效。如您的 jsbin 链接所示，optgroup 未位于选择按钮下方。. 不太清楚重置 optgroup 的样式是什么意思。我可以向 optgroup 添加填充或边距，但这只会影响 optgroup 框中的选项文本，而不是 optgroup 框本身的定位。
此外，单击选项似乎并不完全可靠：有时有效，有时无效。这很可能是特定于浏览器的问题，（尽管它似乎也发生在 Safari 中） - 然而，Firefox 是我的主要目标受众浏览器，所以这对我没有帮助..
还有其他 JS 选项/框架吗？也许是拉斐尔？ ..我会有一个侦察员..

【解决方案2】：

这是一个浏览器错误：https://bugzilla.mozilla.org/show_bug.cgi?id=455164

【讨论】：

如下 - 这很可能是特定于浏览器的问题，（尽管它似乎也发生在 Safari 中） - 但是，Firefox 是我的主要目标受众浏览器，所以这对我没有帮助.
好吧，如果它是一个错误，除了从 div 和无序列表中创建自己的 select 类元素之外，您真的无能为力。