Make Kendo UI Menu Center or Right Aligned

Since the Kendo UI Menu doesn’t have the options to make it center or right aligned, we can use jQuery to manipulate the position.

Default (Left Aligned)

Stucture of the rendered list:

<ul class="pages t-widget t-reset t-header t-menu t-menu-horizontal">
	<li class="t-state-hover t-item t-state-default t-first">
		<span class="t-link"><b>1</b></span>
	</li>
	<li class="t-item t-state-default">
		<a href="/page/2" class="t-link">2</a>
	</li>
	<li class="t-item t-state-default">
		<a href="/page/3" class="t-link">3</a>
	</li>
	<li class="t-item t-state-default">
		<a href="/page/4" class="t-link">4</a>
	</li>
	<li class="t-item t-state-default">
		<a href="/page/5" class="t-link">5</a>
	</li>
	<li class="t-item t-state-default">
		<a href="/page/6" class="t-link">6</a>
	</li>
	<li class="t-item t-state-default">
		<a href="/page/7" class="t-link">7</a>
	</li>
	<li class="t-item t-state-default t-last">
		<a href="/page/8" class="t-link">8</a>
	</li>
</ul>

Right Aligned (reverse)

$("ul.pages").kendoMenu();
$("li.t-item").css('float','right');

Center Aligned

$("ul.pages").kendoMenu();
var liswidth=0;
$("ul.pages li").each(function(){liswidth+=$(this).outerWidth();});
$("ul.pages").wrapInner('<div style="margin:auto; width:'+liswidth+'px;" />');

Right Aligned

$("ul.pages").kendoMenu();
var liswidth=0;
$("ul.pages li").each(function(){liswidth+=$(this).outerWidth();});
$("ul.pages").wrapInner('<div style="float:right; width:'+liswidth+'px;" />');

Small Modifications

Make sure the first item has the left border:

$("ul.pages").kendoMenu();
var liswidth=1;
$("ul.pages li").each(function(){liswidth+=$(this).outerWidth();});
$("ul.pages").wrapInner('<div style="margin:auto; width:'+liswidth+'px;" />');
$("ul.pages li.t-first").css('border-left-width','1px');

No related posts.