Advanced User Interface Controls and Components
Determines whether left-to-right or right-to-left layout is active.
A Boolean value. The default is false, stating that items in Menu are arranged in left-to-right layout.
Supported in: v1.0.
In this example we are showing swap between left-to-right abd right-to-left layout in Menu. By clicking on 'Right to Left' check box, the Menu will change its layout from ltr to rtl and vice-versa.
var $bar = null;
$(document).ready(function() {
$bar = $('#menu').menu({
rtl: true
});
});
function toggleRTL(elem){
$bar.menu("option", "rtl", elem.checked);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.menu.css" />
<link rel="stylesheet" href="css/themes/theme-blue.css" />
<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.widget.min.js""></script>
<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.menu.min.js"></script>
</head>
<body>
<div class="block">
<div id="menu" class="widget">
<ul>
<li><span>MenuItem1</span></li>
<li><span>MenuItem2</span>
<ul>
<li><span>MenuItem21</span></li>
<li>><span>MenuItem22</span></li>
<li ><span>MenuItem23</span></li>
<ul>
<li><span>MenuItem231</span></li>
<li ><span>MenuItem232</span>
<ul>
<li><span>MenuItem2321</span></li>
<li><span>MenuItem2322</span></li>
</ul>
</li>
<li><span>MenuItem233</span></li>
</ul>
</li>
<li><span>MenuItem24</span></li>
</ul>
</li>
<li ><span>MenuItem3</span></li>
<ul>
<li><span>MenuItem31</span></li>
<li><span>MenuItem32</span></li>
<li><span>MenuItem33</span></li>
</ul>
</li>
</ul>
</div>
<div class="control-panel">
<form name="frm">
<label><input type="checkbox" name="checkRTL" checked="checked" onclick="toggleRTL(this)" /> Right to Left</label><br />
</form>
</div>
<div style="clear: both; height: 1px;"></div>
</div>
</body>
</html>
.block
{
position: relative;
margin: 0 auto 0 0;
width: 550px;
}
.control-panel
{
float: right;
font-size: 0.8em;
white-space: nowrap;
width: 100px;
}
.widget
{
float: left;
font-size: 0.75em;
width: 400px;
height: 400px;
}
A sample which shows how to display Menu with all items aligned to the right side.