Hello,

I want to use the ARI menu on the RIGHT hand side of a website with the sub menus expanding to the left over the content. Like:-


1. Is this possible?

2. If yes, can I achieve this with a CSS change or would it require a rework of the code?

Cannot see any RTL options in the settings.

Regards

Ian.

Hello,

The extension doesn't support this ability.

Regards,
ARI Soft

I have a feeling this can be done in css by using floating as well as negative margins.

Edit:

Altered the code on my own site in the developer's tool to make it look like this:
Used ARI ext menu over there for parts of the site.

Hi Mazfer,

Thanks for that. Looks like the way I want to make my menu work. Can you point me to the CSS you changed?

The developer tool? Is that a browser extension or another ARI mod to develop this code?

I use firebug so can probably trace the CSS but a shortcut would be much appreciated, thanks.

Ian.

The developer tool in Chrome is equal to firebug in firefox, so yes.. it's a browser feature.


The following code is done based on a fresh install of the ARI ext menu.

---
.ux-menu {
display: block;
width: 200px; /*width + display to prevent the menu items from lining up next to each other*/
float: right; /*will push the element to the right-hand side of its parent element*/
}


.ux-menu li {
width: 200px; /*needs to be the same width as in .ux-menu*/
display: block;
float: right;
height: 35px; /*set a height to prevent the gap appearing when hovering the item*/
}



.ux-menu li .ux-menu-sub {
position: absolute; /*default setting for the module*/
left: -200px !important; /*pushes the sub-menu to the left*/
top: 0 !important; /*pushes the sub-menu to the top of its parent item*/
}

---

Hope that helps.


edit: in addition you can play around with css3 transition effects to make it look more like the submenu actually "flys out" from its parent item.