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旋转下拉菜单

回答

相关问题