ASP+JS Implementation Level two Drop-down menu

<script type= "Text/javascript" >





var expandfirstitemautomatically = false; Expand the menu item automatically?


var initmenuidtoexpand = false; Id of menu item that should is initially expanded. The ID is defined in the <li> tag.


var expandmenuitembyurl = true; Menu'll automatically expand by url-i.e. If the ' the ' of the ' menu item is ' in ' current location, it'll expand








var initialmenuitemalwaysexpanded = true; Not implemented yet





var dhtmlgoodies_slmenuobj;


var divtoscroll = false;


var ultoscroll = false;


var divcounter = 1;


var otherdivstoscroll = new Array ();


var divtohide = false;


var parentdivtohide = new Array ();


var ultohide = false;


var offsetopera = 0;


if (navigator.userAgent.indexOf (' Opera ') >=0) offsetopera=1;


var slidemenuheightofcurrentbox = 0;


var objectstoexpand = new Array ();


var initexpandindex = 0;


var alwaysexpaneditems = new Array ();





function Popmenustoshow ()


{


var obj = Divtoscroll;


var endarray = new Array ();


while (obj && obj.tagname!= ' body ') {


if (obj.tagname== ' DIV ' && obj.id.indexOf (' Slidediv ') >=0) {


var objfound =-1;


for (Var no=0;no<otherdivstoscroll.length;no++) {


if (otherdivstoscroll[no]==obj) {


Objfound = no;


}


}


if (objfound>=0) {


Otherdivstoscroll.splice (objfound,1);


}


}


obj = Obj.parentnode;


}


}





function Showsubmenu (e,inputobj)


{





if (this && this.tagname) inputobj = This.parentnode;


if (inputobj && inputobj.tagname== ' LI ') {


Divtoscroll = Inputobj.getelementsbytagname (' DIV ') [0];


for (Var no=0;no<otherdivstoscroll.length;no++) {


if (Otherdivstoscroll[no]==divtoscroll) return;


}


}


Hidinginprocess = false;


if (otherdivstoscroll.length>0) {


if (Divtoscroll) {


if (otherdivstoscroll.length>0) {


Popmenustoshow ();


}


if (otherdivstoscroll.length>0) {


Autohidemenus ();


Hidinginprocess = true;


}


}


}


if (Divtoscroll &&!hidinginprocess) {


Divtoscroll.style.display= ';


otherdivstoscroll.length = 0;


Otherdivtoscroll = Divtoscroll.parentnode;


Otherdivstoscroll.push (Divtoscroll);


while (Otherdivtoscroll && otherdivtoscroll.tagname!= ' body ') {


if (otherdivtoscroll.tagname== ' DIV ' && otherDivToScroll.id.indexOf (' Slidediv ') >=0) {


Otherdivstoscroll.push (Otherdivtoscroll);





}


Otherdivtoscroll = Otherdivtoscroll.parentnode;


}


Ultoscroll = Divtoscroll.getelementsbytagname (' UL ') [0];


if (divToScroll.style.height.replace (' px ', ')/1<=1) scrolldownsub ();


}





return false;


}











function Autohidemenus ()


{


if (otherdivstoscroll.length>0) {


Divtohide = Otherdivstoscroll[otherdivstoscroll.length-1];


parentdivtohide.length=0;


var obj = DivToHide.parentNode.parentNode.parentNode;


while (obj && obj.tagname== ' DIV ') {


if (obj.id.indexOf (' Slidediv ') >=0) Parentdivtohide.push (obj);


obj = Obj.parentNode.parentNode.parentNode;


}


var tmpheight = (divToHide.style.height.replace (' px ', ')/1-slidemenuheightofcurrentbox);


if (tmpheight<0) tmpheight=0;


if (slidemenuheightofcurrentbox) divToHide.style.height = tmpheight + ' px ';


Ultohide = Divtohide.getelementsbytagname (' UL ') [0];


Slidemenuheightofcurrentbox = Ultohide.offsetheight;


Scrollupmenu ();


}else{


Slidemenuheightofcurrentbox = 0;


Showsubmenu ();


}


}








function Scrollupmenu ()


{





var height = divtohide.offsetheight;


height-=15;


if (height<0) height=0;


DivToHide.style.height = height + ' px ';





for (Var no=0;no<parentdivtohide.length;no++) {


Parentdivtohide[no].style.height = Parentdivtohide[no].getelementsbytagname (' UL ') [0].offsetheight + ' px ';


}


if (height>0) {


SetTimeout (' Scrollupmenu () ', 5);


}else{


Divtohide.style.display= ' None ';


Otherdivstoscroll.length = otherdivstoscroll.length-1;


Autohidemenus ();


}


}





function Scrolldownsub ()


{


if (Divtoscroll) {


var height = divtoscroll.offsetheight/1;


var offsetmove =math.min (ultoscroll.offsetheight-height);


Height = height +offsetmove;


DivToScroll.style.height = height + ' px ';





for (Var no=1;no<otherdivstoscroll.length;no++) {


var tmpheight = otherdivstoscroll[no].offsetheight/1 + offsetmove;


Otherdivstoscroll[no].style.height = tmpheight + ' px ';


}


if (height<ultoscroll.offsetheight) settimeout (' Scrolldownsub () ', 5); else {


Divtoscroll = false;


Ultoscroll = false;


if (objectstoexpand.length>0 && initexpandindex< (objectstoexpand.length-1)) {


initexpandindex++;





Showsubmenu (False,objectstoexpand[initexpandindex]);


}


}


}


}





function Initsubitems (inputobj,currentdepth)


{


divcounter++;


var div = document.createelement (' div '); Creating new Div


Div.style.overflow = ' hidden ';


div.style.position = ' relative ';


Div.style.display= ' None ';


Div.style.height = ' 1px ';


div.id = ' slidediv ' + divcounter;


Div.classname = ' slidemenudiv ' + currentdepth;


InputObj.parentNode.appendChild (DIV); Appending DIV as child element of <LI> which is parent of input <UL>


Div.appendchild (Inputobj); Appending <UL> to the DIV


var menuItem = inputobj.getelementsbytagname (' LI ') [0];


while (MenuItem) {


if (menuitem.tagname== ' LI ') {


var atag = menuitem.getelementsbytagname (' A ') [0];


Atag.classname= ' slmenuitem_depth ' +currentdepth;


var Subul = menuitem.getelementsbytagname (' UL ');


if (subul.length>0) {


Initsubitems (subul[0],currentdepth+1);


}


Atag.onclick = Showsubmenu;


}


MenuItem = menuitem.nextsibling;


}


}





function Initslidedownmenu ()


{


Dhtmlgoodies_slmenuobj = document.getElementById (' Dhtmlgoodies_slidedown_menu ');


dhtmlgoodies_slmenuobj.style.visibility= ' visible ';


var Mainul = dhtmlgoodies_slmenuobj.getelementsbytagname (' UL ') [0];


var mainmenuitem = mainul.getelementsbytagname (' LI ') [0];


Mainitemcounter = 1;


while (Mainmenuitem) {


if (mainmenuitem.tagname== ' LI ') {


var atag = mainmenuitem.getelementsbytagname (' A ') [0];


Atag.classname= ' slmenuitem_depth1 ';


var Subul = mainmenuitem.getelementsbytagname (' UL ');


if (subul.length>0) {


mainmenuitem.id = ' Mainmenuitem ' + mainitemcounter;


Initsubitems (subul[0],2);


Atag.onclick = Showsubmenu;


mainitemcounter++;


}


}


Mainmenuitem = mainmenuitem.nextsibling;


}





if (location.search.indexOf (' mainmenuitemtoslide ') >=0) {


var items = location.search.split (' & ');


for (Var no=0;no<items.length;no++) {


if (Items[no].indexof (' mainmenuitemtoslide ') >=0) {


Values = items[no].split (' = ');


Showsubmenu (False,document.getelementbyid (' Mainmenuitem ' + values[1]));


Initmenuidtoexpand = false;


}


}


}else if (expandfirstitemautomatically>0) {


if (document.getElementById (' Mainmenuitem ' + expandfirstitemautomatically)) {


Showsubmenu (False,document.getelementbyid (' Mainmenuitem ' + expandfirstitemautomatically));


Initmenuidtoexpand = false;


}


}





if (Expandmenuitembyurl)


{


var atags = dhtmlgoodies_slmenuobj.getelementsbytagname (' A ');


for (Var no=0;no<atags.length;no++) {


var Hreftocheckon = Atags[no].href;


if (Location.href.indexOf (Hreftocheckon) >=0 && hreftocheckon.indexof (' # ') <hreftocheckon.length-1) {


Initmenuidtoexpand = false;


var obj = Atags[no].parentnode;


while (obj && obj.id!= ' Dhtmlgoodies_slidedown_menu ') {


if (obj.tagname== ' LI ') {


var Subul = obj.getelementsbytagname (' UL ');


if (initialmenuitemalwaysexpanded) alwaysexpaneditems[obj.parentnode] = true;


if (subul.length>0) {


Objectstoexpand.unshift (obj);


}


}


obj = Obj.parentnode;


}


Showsubmenu (False,objectstoexpand[0]);


Break


}


}


}





if (Initmenuidtoexpand)


{


Objectstoexpand = new Array ();


var obj = document.getElementById (Initmenuidtoexpand)


while (obj && obj.id!= ' Dhtmlgoodies_slidedown_menu ') {


if (obj.tagname== ' LI ') {


var Subul = obj.getelementsbytagname (' UL ');


if (initialmenuitemalwaysexpanded) alwaysexpaneditems[obj.parentnode] = true;


if (subul.length>0) {


Objectstoexpand.unshift (obj);


}


}


obj = Obj.parentnode;


}





Showsubmenu (False,objectstoexpand[0]);


}


}





</script>








<div id= "Dhtmlgoodies_slidedown_menu" >





<%


sql = "SELECT * from P_type where b_type=1"


Set rsclass = Server. CreateObject ("Adodb.recordset")


Rsclass.open sql,conn,1,1





' Big class


If not (RSCLASS.BOF and rsclass.eof) then


%>


<ul>


<% While not rsclass.eof%>


<li>


<a href= "#" onfocus= "This.blur ()" ><img src= "I/b_blue.gif"/><%=rsclass ("name")%></a>


<ul>


<%


' Visit Second class products


sql = "SELECT * from S_p_type where type=" & Rsclass ("id") & "ORDER by sort ASC"


Set Rssmall = Server. CreateObject ("Adodb.recordset")


Rssmall.open sql,conn,1,1


I=1


While not rssmall.eof


%>


<li><a href= "Product.asp?s_type=<%=rssmall (" id ")%>" onfocus= "This.blur ()" >     <img src= "I/b_blue.gif"/><%=rssmall ("name")%></a></li>


<%


I=i+1


Rssmall.movenext


Wend


Set Rssmall = Nothing


%>


</ul>





</li>


<%


Rsclass.movenext


Wend


%>


</ul>





<%


End If


Rsclass.close


Set Rsclass = Nothing


%>


</div>








<script type= "Text/javascript" >


Initslidedownmenu ();


</script>