PDA

View Full Version : problem in creating submenus



san_crazy
03-29-2009, 10:57 AM
I was searching across the internet for javascript code snippet to create horizontal menu/submenu and found also but after then I thought why shouldn't I create myself?
then I used this logic, for your ease I have made few lines bold where the calling is made.
please run this code in your browser

CSS:



<style type="text/css">
.top_x_menu
{
position:absolute;
width:700px; height:28px;
margin-left:75px; margin-top:120px;

}
.top_x_menu table
{
width:100%; height:100%;
}
.top_x_menu table tr
{
border:solid 1px black;

}
.top_x_menu table td
{
border-right:solid 1px #E08721;

}
.tx_menu_item
{
display:block;
font-family:verdana;
font-size:11px;
width:100%; height:100%;
text-align:center;
text-decoration:none;
color:#961C13;
}
</style>




Javascript:



<script language="javascript">

function create_sub_menu(rowCount,leftPos,rootmItem,menuContainer)
{
var srcHolder = document.getElementById(menuContainer);
var srcTable = document.createElement("table");
var sub_menu_items = new Array(rowCount);
var smenu_url = new Array(rowCount);
var tmpRow = null;
var tmpCell = null;

for(i=0;i<7;i++)
{
sub_menu_items[i] = document.createElement("a");
sub_menu_items[i].style.display = "block";
sub_menu_items[i].style.width = "100%";
sub_menu_items[i].style.height = "100%";
sub_menu_items[i].style.fontFamily = "verdana";
sub_menu_items[i].style.fontSize = "10px";
sub_menu_items[i].style.textDecoration="none";
sub_menu_items[i].style.color = "black";
}
if(rootmItem == "aboutus")
{

smenu_url[0] = "http://gargi_collg/";
smenu_url[1] = "http://gargi_collg/";
smenu_url[2] = "http://gargi_collg/";
smenu_url[3] = "http://gargi_collg/";
smenu_url[4] = "http://gargi_collg/";
smenu_url[5] = "http://gargi_collg/";
smenu_url[6] = "http://gargi_collg/";

sub_menu_items[0].innerHTML = "The Society";
sub_menu_items[1].innerHTML = "Vision";
sub_menu_items[2].innerHTML = "Core Values";
sub_menu_items[3].innerHTML = "Mission";
sub_menu_items[4].innerHTML = "Chairman's Message";
sub_menu_items[5].innerHTML = "Director's Message";
sub_menu_items[6].innerHTML = "Mandatory Disclosure";
}

if(rootmItem == "faculties")
{
smenu_url[0] = "http://gargi_collg/";
smenu_url[1] = "http://gargi_collg/";
smenu_url[2] = "http://gargi_collg/";
}
if(rootmItem == "college")
{
smenu_url[0] = "http://gargi_collg/";
smenu_url[1] = "http://gargi_collg/";
smenu_url[2] = "http://gargi_collg/";
smenu_url[3] = "http://gargi_collg/";
smenu_url[4] = "http://gargi_collg/";
smenu_url[5] = "http://gargi_collg/";
}

if(IsValidNumber(rowCount) && (srcHolder != null) && (srcHolder.canHaveChildren))
{
srcHolder.innerHTML = "";
srcHolder.style.width = "150px";
srcHolder.style.height = 20*rowCount+30;
srcHolder.style.position = "absolute";
srcHolder.style.marginLeft = leftPos;
srcHolder.style.marginTop = "147px";

srcTable.style.border = "solid";
srcTable.style.borderWidth = "1px";
srcTable.style.borderColor = "#EDA44B";
srcTable.style.backgroundColor = "#E0C2A1";
srcTable.style.height = "100%";
srcTable.style.width = "100%";
srcTable.style.position = "absolute";
srcTable.style.marginTop = "0px";

srcHolder.appendChild(srcTable);
for(i=0; i<rowCount; i++)
{
tmpRow = AppendRow(srcTable)
for(j=0; j<1; j++)
{
tmpCell = AppendCell(tmpRow);
}
sub_menu_items[i].href = smenu_url[j];

tmpCell.appendChild(sub_menu_items[i]);
}
srcTable.onMouseOut = "Del_sub_menu('sub_menus1')" ;

}
}

function AppendRow(srcTable)
{
if(srcTable != null)
{
return srcTable.insertRow();
}
else
{
alert("Error while creating table. Cause: Container Table is null!");
}
}

function AppendCell(srcRow)
{
if(srcRow != null)
{
return srcRow.insertCell();
}
else
{
alert("Error while creating table. Cause: Container row is null!");
}
}

function IsValidNumber(ipNum)
{
if(isNaN(ipNum))
{
alert("Invalid Number!");
return false;
}
else if(ipNum < 1)
{
alert("Number should be greater than 0!");
return false;
}
else
{
return true;
}
}

function del_sub_menu(menuContainer)
{
var srcHolder = document.getElementById(menuContainer);

while(srcHolder.childNodes.length)
srcHolder.removeChild(srcHolder.firstChild);

}
</script>



HTML:



<body>
<div class="top_x_menu">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<a class="tx_menu_item" href="index.html" target="_self"><b>Home</b></a>
</td>
<td>
<a class="tx_menu_item" OnMouseOver="create_sub_menu(6,139,'aboutus','sub_menus1')" OnMouseOut="del_sub_menu('sub_menus1')" href="/about_us/aim.html" href="#" target="_self">About Us</a>
</td>
<td>
<a class="tx_menu_item" href="career.html" target="_self">Career</a>
</td>
<td>
<a class="tx_menu_item" href="courses.html" target="_self">Courses</a>
</td>
<td>
<a class="tx_menu_item" href="/faculties/charman_prof.html" target="_self">Faculties</a>
</td>
<td>
<a class="tx_menu_item" href="/college/campus.html" target="_self">College</a>
</td>
<td>
<a class="tx_menu_item" href="downloads.html" target="_self">Get In</a>
</td>
<td style="border:none;" >
<a class="tx_menu_item" href="contact_us.html" target="_self">Contact Us</a>
</td>
</tr>
</table>
</div>
<div id="sub_menus1">
</div>
<div id="sub_menus2">
</div>
<div id="sub_menus3">
</div>
</body>


The problem is, when mouse over occurs every thing goes fine the submenu is created but when I try to move over this submenu to navigate to the target links then it desappear because the mouse switch to another element and rootItem's OnMouseOut event occurs.

I have been trying far a long time to fix this problem but I am still not successful.

hope you help me: