Help With This Menu

[Maisara-WD]

Hican you tell me how to make the submenu display to the left direction of the item that activates it, and not to the right as in the code:that's the style:

<style>.rightnav_menu{	width: 152px;	height: 294px;	direction: rtl;	text-align: right;	clear: both;	margin: 0px;	float: right;	background-color: #cae9eb;}.rightnav_menu ul{	margin: 0;	padding: 0;	list-style-type: none;	font-family: Tahoma, Geneva, sans-serif;	font-size: 10pt;	font-weight: bold;	width: 152px;}.rightnav_menu ul li{	position: relative;}.rightnav_menu ul li a{	display: block;	overflow: auto;	color: #DCDBF9;	text-decoration: none;	padding: 6px;}.rightnav_menu ul li a:link, .rightnav_menu ul li a:visited, .rightnav_menu ul li a:active{	background-color: #012D58;}.rightnav_menu ul li a:hover{	background-color: #000000;}.rightnav_menu ul li ul{	position: absolute;	width: 152px;	top: 0;	visibility: hidden;}* html .rightnav_menu ul li { float: left; height: 1%; }* html .rightnav_menu ul li a { height: 1%; }</style>

that's the script:

<script type="text/javascript">//Nested Side Bar Menu (Mar 20th, 09)//By Dynamic Drive: http://www.dynamicdrive.com/style/var menuids=["sidebarmenu"] //Enter id(s) of each Side Bar Menu's main UL, separated by commasfunction initsidebarmenu(){for (var i=0; i<menuids.length; i++){  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")	for (var t=0; t<ultags.length; t++){	ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item  else //else if this is a sub level submenu (ul)	ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it	ultags[t].parentNode.onmouseover=function(){	this.getElementsByTagName("ul")[0].style.display="block"	}	ultags[t].parentNode.onmouseout=function(){	this.getElementsByTagName("ul")[0].style.display="none"	}	}  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars  ultags[t].style.visibility="visible"  ultags[t].style.display="none"  }  }}if (window.addEventListener)window.addEventListener("load", initsidebarmenu, false)else if (window.attachEvent)window.attachEvent("onload", initsidebarmenu)</script>

That's the HTML Code:

<div class="rightnav_menu">  <ul id="sidebarmenu">	<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>			<li><a href="#">المكتبات</a></li>			<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>		<ul>			<li><a href="#">جداول الامتحانات</a></li>			<li><a href="#">نتائج الامتحانات</a></li>			<li><a href="#">الغياب اليومي</a></li> 		</ul>	</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>			<li><a href="#">الزي المدرسي</a></li>			</ul>		</li>	<li><a href="#">روابط تهمك</a></li>	<li><a href="#">الطلبة المتفوقون</a></li>	<li><a href="#">أرسل رأيك</a></li>	<li><a href="#">اتصل بنا</a></li>  </ul></div>

I'll be so greatful...I think the solution is in that lin:

ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"

Thanks in advance

[justsomeguy]

ultags[t].style.left=(ultags[t-1].getElementsByTagName("a")[0].offsetWidth - parseInt(ultags[t].style.width, 10))+"px"

[Maisara-WD]

Thanks manbutI'm sorry it didn't work

[justsomeguy]

What did it do? It should have aligned the right edge of the item with the left edge of the parent. Do you have an example of this online?

Edited August 14, 2009 by justsomeguy

[Maisara-WD]

http://www.anashare.com/get.aspx?download=166

before your change

http://www.anashare.com/get.aspx?download=167

After your change

[dsonesuk]

try adding "-"+ likeultags[t].style.left="-"+ultags[t].parentNode.offsetWidth+"px"ultags[t].style.left="-"+ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px";There is a problem with how the menu is displayed in IE7 still.

Edited August 14, 2009 by dsonesuk

[Maisara-WD]

I replaced the line justsomeguy told me to add, by your two lines but it did'nt work, it didn't even show sub menues, but it puts the folder items at their correct place at the right.. except the first one :)such a strange result ha

[dsonesuk]

all browsers including IE6 show this, which is what i think you want.But IE7 still produces this befroe and after changesbelow is code used<script type="text/javascript">/*<![CDATA[*//*---->*///Nested Side Bar Menu (Mar 20th, 09)//By Dynamic Drive: http://www.dynamicdrive.com/style/var menuids=["sidebarmenu"] //Enter id(s) of each Side Bar Menu's main UL, separated by commasfunction initsidebarmenu(){for (var i=0; i<menuids.length; i++){ var ultags=document.getElementById(menuids).getElementsByTagName("ul") for (var t=0; t<ultags.length; t++){ ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle" if (ultags[t].parentNode.parentNode.id==menuids) //if this is a first level submenu ultags[t].style.left="-"+ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item else //else if this is a sub level submenu (ul) ultags[t].style.left="-"+ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"; //position menu to the right of menu item that activated it ultags[t].parentNode.onmouseover=function(){ this.getElementsByTagName("ul")[0].style.display="block" } ultags[t].parentNode.onmouseout=function(){ this.getElementsByTagName("ul")[0].style.display="none" } } for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars ultags[t].style.visibility="visible" ultags[t].style.display="none" } }}if (window.addEventListener)window.addEventListener("load", initsidebarmenu, false)else if (window.attachEvent)window.attachEvent("onload", initsidebarmenu)/*--*//*]]>*/</script>

[dsonesuk]

to fix the IE7 problem change this:.rightnav_menu ul li a{ display: block; overflow: auto; color: #DCDBF9; text-decoration: none; padding: 6px;}to this:.rightnav_menu ul li a{ display: block; width: 140px;; color: #DCDBF9; text-decoration: none; padding: 6px; }

[Maisara-WD]

Thank you very very muchbut IE7 still show the error, although I used the CSS trick above

[dsonesuk]

sorry i missed a line:change .rightnav_menu ul li{ position: relative;}to this:.rightnav_menu ul li{ position: relative; float:right;}

[Maisara-WD]

OH THANK U VVVVVVV Muchit now works