Arabic right-to-left multi-level dropdown menu

I have developed an Arabic (right to left) multi-level dropdown menu based on “jQuery Multi Level CSS Menu #1” posted by Dynamic Drive.

HTML code

<DIV id=myjquerymenu class=jquerycssmenu>
<UL>

<LI><A href="#">بند رئيسي</A></LI>
<LI><A href="#">بند رئيسي</A></LI>
<LI><A href="#">بند رئيسي</A>
<UL>

<LI><A href="#">بند فرعي</A></LI>
<LI><A href="#">بند فرعي</A></LI>
<LI><A href="#">بند فرعي</A></LI>
<LI><A href="#">بند فرعي</A></LI>

</UL>
</LI>
<LI><A href="#">بند رئيسي</A> </LI>
<LI><A href="#">بند رئيسي</A>
<UL>

<LI><A href="#">بند فرعي</A> </LI>
<LI><A href="#">بند فرعي</A>
<UL>

<LI><A href="#">بند فرعي</A> </LI>
<LI><A href="#">بند فرعي</A> </LI>
<LI><A href="#">بند فرعي</A>
<UL>

<LI><A href="#">بند فرعي</A> </LI>
<LI><A href="#">بند فرعي</A> </LI>

</UL>
</LI>
<LI><A href="#">بند فرعي</A></LI>

</UL></LI>

</UL>
</LI>
<LI><A href="#">بند رئيسي</A> </LI>
<LI><A href="#">بند رئيسي</A> </LI>

</UL><BR style="CLEAR: left"></DIV>

CSS Code:

.jquerycssmenu {
	BORDER-BOTTOM: black 1px solid; PADDING-LEFT: 15px; FONT: bold 12px Verdana
}
.jquerycssmenu UL {
	PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
.jquerycssmenu UL LI {
	POSITION: relative; DISPLAY: inline; FLOAT: left
}
.jquerycssmenu UL LI A {
	BORDER-BOTTOM: #778 0px solid; BORDER-LEFT: #778 1px solid; PADDING-BOTTOM: 4px; PADDING-LEFT: 7px; PADDING-RIGHT: 7px; DISPLAY: block;
DIRECTION: rtl; BACKGROUND: url(tintblue.gif) white repeat-x center top; COLOR: #2d2b2b; BORDER-TOP: #778 1px solid; MARGIN-RIGHT: 3px;
BORDER-RIGHT: #778 1px solid; TEXT-DECORATION: none; PADDING-TOP: 5px
}
.jquerycssmenu UL LI A:hover {
	BACKGROUND-IMAGE: url(tintbluedark.gif)
}
.jquerycssmenu UL LI UL {
	POSITION: absolute; DISPLAY: block; VISIBILITY: hidden; BORDER-TOP: black 1px solid; LEFT: 0px
}
.jquerycssmenu UL LI UL LI {
	DISPLAY: list-item; FLOAT: none
}
.jquerycssmenu UL LI UL LI UL {
	TOP: 0px
}
.jquerycssmenu UL LI UL LI A {
	BORDER-BOTTOM: black 1px solid; PADDING-BOTTOM: 4px; MARGIN: 0px; PADDING-LEFT: 5px;
WIDTH: 160px; PADDING-RIGHT: 5px;
FONT: 13px Verdana; DIRECTION: rtl; BACKGROUND: white;
BORDER-TOP-WIDTH: 0px; COLOR: black;
PADDING-TOP: 4px
}
.jquerycssmenu UL LI UL LI A:hover {
	BACKGROUND: #eff9ff; COLOR: black
}
.downarrowclass {
	POSITION: absolute; TOP: 7px; LEFT: 5px
}
.rightarrowclass {
	POSITION: absolute; TOP: 5px; LEFT: 5px
}

JavaScript Code:

var arrowimages={down:[‘downarrowclass’, ‘arrow-down.gif’, 25], right:[‘rightarrowclass’, ‘arrow-right.gif’]}

var jquerycssmenu={

fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds

isRTL : true, //For arabic (or right-to-left) templates set it to True;

buildmenu:function(menuid, arrowsvar){

jQuery(document).ready(function($){

var $mainmenu=$(“#”+menuid+”>ul”)

var $headers=$mainmenu.find(“ul”).parent()

$headers.each(function(i){

var $curobj=$(this)

var $subul=$(this).find(‘ul:eq(0)’)

this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}

this.istopheader=$curobj.parents(“ul”).length==1? true : false

$subul.css({top:this.istopheader? this._dimensions.h+”px” : 0})

$curobj.children(“a:eq(0)”).css(this.istopheader? {paddingLeft: arrowsvar.down[2]} : {}).append(

‘<img src=”‘+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])

+'” class=”‘ + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])

+ ‘” style=”border:0;” />’

)

$curobj.hover(

function(e){

var $targetul=$(this).children(“ul:eq(0)”)

this._offsets={left:$(this).offset().left, top:$(this).offset().top}

var menuleft=this.istopheader? this._dimensions.subulw – this._dimensions.w -15 : this._dimensions.w

if(jquerycssmenu.isRTL)

menuleft=(this._offsets.left<this._dimensions.subulw)? (this.istopheader? -(this._dimensions.subulw – this._dimensions.w) : this._dimensions.subulw ) : -menuleft

else

menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw + this._dimensions.w : -this._dimensions.w) : menuleft

$targetul.css({left:menuleft+”px”}).fadeIn(jquerycssmenu.fadesettings.overduration)

},

function(e){

$(this).children(“ul:eq(0)”).fadeOut(jquerycssmenu.fadesettings.outduration)

}

) //end hover

}) //end $headers.each()

$mainmenu.find(“ul”).css({display:’none’, visibility:’visible’})

}) //end document.ready

}

}

//build menu with ID=”myjquerymenu” on page:

jquerycssmenu.buildmenu(“myjquerymenu”, arrowimages)

 

Files

Click here to download all files.