RTL Support

[muscatian]

I have successfully implemented RTL Menu only I am stuck with arrow image direction, can some one please guide me, what css property I need to change

I have change as I found in documentation following css properties for RTL but I cound not get the arrows on left side of menu.

/* Sub menu indicators
===================*/

	.sm-clean a span.sub-arrow {
		position:absolute;
		left:12px;
		top:50%;
		margin-top:-3px;
		/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
		width:0;
		height:0;
		overflow:hidden;
		border-width:4px; /* tweak size of the arrow */
		border-style:solid dashed dashed dashed;
		border-color:#555 transparent transparent transparent;
	}
	.sm-clean-vertical a span.sub-arrow,
 	.sm-clean ul a span.sub-arrow {
		left:15px;
		top:50%;
		margin-top:-5px;
		border-width:5px;
		border-style:dashed dashed dashed solid;
		border-color:transparent #555 transparent transparent;
	}

/* Sub menu indicators
===================*/

	.sm-clean a span.sub-arrow,
	.sm-clean ul a span.sub-arrow {
		top:50%;
		margin-top:-9px;
		left:auto;
		right:6px;
		margin-right:0;
		width:17px;
		height:17px;
		font:normal 16px/16px monospace !important;
		text-align:center;
		border:0;
		text-shadow:none;
		background:rgba(255,255,255,0.6);
		-moz-border-radius:50px;
		-webkit-border-radius:50px;
		border-radius:50px;
	}
	/* Hide sub indicator when item is expanded - we enable the item link when it's expanded */
	.sm-clean a.highlighted span.sub-arrow {
		display:none !important;
	}

[admin]

Hi,

To swap the arrows, you would need to edit these from the defaults:

/* Sub menu indicators
===================*/

	.sm-clean a span.sub-arrow {
		position:absolute;
		left:12px;
		top:50%;
		margin-top:-3px;
		/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
		width:0;
		height:0;
		overflow:hidden;
		border-width:4px; /* tweak size of the arrow */
		border-style:solid dashed dashed dashed;
		border-color:#555 transparent transparent transparent;
	}
	.sm-clean-vertical a span.sub-arrow,
 	.sm-clean ul a span.sub-arrow {
		right:15px;
		top:50%;
		margin-top:-5px;
		border-width:5px;
		border-style:dashed solid dashed dashed;
		border-color:transparent #555 transparent transparent;
	}

This would move the main and sub menu arrows to the left side of the item and also change the sub menu arrow point direction to the left.

And then if you want to be perfect, it would be nice to also swap the padding-right for padding-left declaration in all the a.has-submenu rules.

Cheers!

[Author]

Posts