I am in need of a unique solution for a dropdown menu that appears rotated 90 degrees anticlockwise. The goal is to have the dropdown select "button" text displayed vertically, with the options sliding out in a similarly rotated, sideways manner featuring vertical text. This specific customization is necessary as users must choose a title from various options for the Y axis of a graph, and the dropdown itself needs to align where the final title will be placed, also rotated.
The current HTML code for this setup is quite simple:
<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>
While I am aware of CSS3 capabilities that could achieve this effect, I have already referred to resources like: Need Jquery code for rotate a whole div I have attempted using CSS like this or variations thereof:
.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;
}
In my testing, especially on Firefox 15, I noticed that while the select "button" did rotate as intended, the dropdown options remained in their default horizontal orientation even when activated (and the links within the dropdown were nonfunctional).
Various attempts to apply the rotate class separately to option tags, the select tag, or an enclosing div did not resolve the issue.
Despite claims of numerous plugins offering jQuery rotate support, most only cater to images or basic div elements without addressing the complexities of a complete dropdown menu rotation.
If you have any innovative ideas or suggestions, particularly utilizing JavaScript/jquery, please share them.
Thank you