Pull down menus

[vijay1440]

Hi! Please tell me how to create PULL-DOWN menus in html and I also saw Anchors in those menus.Please tell about that also.Thanks much,Vijay

[manojdubey]

Dear Vijay In Html in real we don`t have anything called Menus. Rather we use the <div> or<layer> element itself as menus and use their visibility attribute for this reason.Below I am Providing you a sample code may be this may help you create one. If need more help please do mail me at manoj.dubey@hcl.inThe below code I have used to display a color menu inside a select box.You can customize it as per your needWith RegardsManoj DubeySample code

<style type="text/css">#dropmenudiv{position:absolute;border:1px solid black;border-bottom-width: 0;font:normal 8px Verdana;line-height:10px;z-index:100;}#dropmenudiv a{width: 100%;display: block;text-indent: 3px;border-bottom: 1px solid black;padding: 1px 0;text-decoration: none;font-weight: bold;}#dropmenudiv a:hover{ /*hover background color*/background-color: yellow;}.red{background-color:red;}.green{background-color:green;}.blue{background-color:blue;}.yellow{background-color:yellow;}</style><script type="text/javascript">/************************************************ AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit [url="http://www.dynamicdrive.com/"]http://www.dynamicdrive.com/[/url] for full source code***********************************************///Contents for menu 1var menu1=new Array()menu1[0]='<input type="button" style=" background-color:yellow;width:80px; font-size:8px;border:0px;" onClick="f1(1)" value="Yellow">'menu1[1]='<input type="button" style=" background-color:Blue;width:80px; font-size:8px;border:0px;" onClick="f1(4)" value="Blue">'menu1[2]='<input type="button" style=" background-color:green;width:80px; font-size:8px;border:0px;" onClick="f1(2)" value="green">'menu1[3]='<input type="button" style=" background-color:red;width:80px; font-size:8px; border:0px;" onClick="f1(3)" value="red">'		var menuwidth='10px' //default menu widthvar menubgcolor='lightyellow'  //menu bgcolorvar disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)var hidemenu_onclick="yes" //hide menu when user clicks within menu?/////No further editting neededvar ie4=document.allvar ns6=document.getElementById&&!document.allif (ie4||ns6)document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')function f1(val){	if(val==3)		document.forms[0].t1.className='red';	else if(val==1)		document.forms[0].t1.className='yellow';	else if(val==4)		document.forms[0].t1.className='blue';	else if(val==2)		document.forms[0].t1.className='green';}function getposOffset(what, offsettype){var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;var parentEl=what.offsetParent;while (parentEl!=null){totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}return totaloffset;}function showhide(obj, e, visible, hidden, menuwidth){if (ie4||ns6)dropmenuobj.style.left=dropmenuobj.style.top=-500if (menuwidth!=""){ dropmenuobj.widthobj=dropmenuobj.styledropmenuobj.widthobj.width=menuwidth}if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")obj.visibility=visibleelse if (e.type=="click")obj.visibility=hidden}function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function clearbrowseredge(obj, whichedge){var edgeoffset=0if (whichedge=="rightedge"){var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15dropmenuobj.contentmeasure=dropmenuobj.offsetWidthif (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth}else{var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffsetvar windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18dropmenuobj.contentmeasure=dropmenuobj.offsetHeightif (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeightif ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge}}return edgeoffset}function populatemenu(what){if (ie4||ns6)dropmenuobj.innerHTML=what.join("")}function dropdownmenu(obj, e, menucontents, menuwidth){if (window.event) event.cancelBubble=trueelse if (e.stopPropagation) e.stopPropagation()clearhidemenu()dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudivpopulatemenu(menucontents)if (ie4||ns6){showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)dropmenuobj.x=getposOffset(obj, "left")dropmenuobj.y=getposOffset(obj, "top")dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"}return clickreturnvalue()}function clickreturnvalue(){if (ie4||ns6) return falseelse return true}function contains_ns6(a,  {while (b.parentNode)if ((b = b.parentNode) == a)return true;return false;}function dynamichide(e){if (ie4&&!dropmenuobj.contains(e.toElement))delayhidemenu()else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))delayhidemenu()}function hidemenu(e){if (typeof dropmenuobj!="undefined"){if (ie4||ns6)dropmenuobj.style.visibility="hidden"}}function delayhidemenu(){if (ie4||ns6)delayhide=setTimeout("hidemenu()",disappeardelay)}function clearhidemenu(){if (typeof delayhide!="undefined")clearTimeout(delayhide)}if (hidemenu_onclick=="yes")document.onclick=hidemenu</script></HEAD><BODY><input type="button" readOnly name="t1"  style="font-family: Tahoma; font-size: 8px; border-style:ridge; font-weight: normal; width:80px; border-color: #FFFFFF;"onClick="dropdownmenu(this, event, menu1, '80px'),document.forms[0].t1.focus();"> </body>

[vijay1440]

Thank you very much Manoj!Regards ,Vijay

Dear Vijay In Html in real we don`t have anything called Menus. Rather we use the <div> or<layer> element itself as menus and use their visibility attribute for this reason.Below I am Providing you a sample code may be this may help you create one. If need more help please do mail me at manoj.dubey@hcl.inThe below code I have used to display a color menu inside a select box.You can customize it as per your needWith RegardsManoj DubeySample code<style type="text/css">#dropmenudiv{position:absolute;border:1px solid black;border-bottom-width: 0;font:normal 8px Verdana;line-height:10px;z-index:100;}#dropmenudiv a{width: 100%;display: block;text-indent: 3px;border-bottom: 1px solid black;padding: 1px 0;text-decoration: none;font-weight: bold;}#dropmenudiv a:hover{ /*hover background color*/background-color: yellow;}.red{background-color:red;}.green{background-color:green;}.blue{background-color:blue;}.yellow{background-color:yellow;}</style><script type="text/javascript">/************************************************ AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit [url="http://www.dynamicdrive.com/"]http://www.dynamicdrive.com/[/url] for full source code***********************************************///Contents for menu 1var menu1=new Array()menu1[0]='<input type="button" style=" background-color:yellow;width:80px; font-size:8px;border:0px;" onClick="f1(1)" value="Yellow">'menu1[1]='<input type="button" style=" background-color:Blue;width:80px; font-size:8px;border:0px;" onClick="f1(4)" value="Blue">'menu1[2]='<input type="button" style=" background-color:green;width:80px; font-size:8px;border:0px;" onClick="f1(2)" value="green">'menu1[3]='<input type="button" style=" background-color:red;width:80px; font-size:8px; border:0px;" onClick="f1(3)" value="red">'  var menuwidth='10px' //default menu widthvar menubgcolor='lightyellow'  //menu bgcolorvar disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)var hidemenu_onclick="yes" //hide menu when user clicks within menu?/////No further editting neededvar ie4=document.allvar ns6=document.getElementById&&!document.allif (ie4||ns6)document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')function f1(val){	if(val==3)  document.forms[0].t1.className='red';	else if(val==1)  document.forms[0].t1.className='yellow';	else if(val==4)  document.forms[0].t1.className='blue';	else if(val==2)  document.forms[0].t1.className='green';}function getposOffset(what, offsettype){var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;var parentEl=what.offsetParent;while (parentEl!=null){totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}return totaloffset;}function showhide(obj, e, visible, hidden, menuwidth){if (ie4||ns6)dropmenuobj.style.left=dropmenuobj.style.top=-500if (menuwidth!=""){ dropmenuobj.widthobj=dropmenuobj.styledropmenuobj.widthobj.width=menuwidth}if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")obj.visibility=visibleelse if (e.type=="click")obj.visibility=hidden}function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function clearbrowseredge(obj, whichedge){var edgeoffset=0if (whichedge=="rightedge"){var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15dropmenuobj.contentmeasure=dropmenuobj.offsetWidthif (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth}else{var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffsetvar windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18dropmenuobj.contentmeasure=dropmenuobj.offsetHeightif (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeightif ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge}}return edgeoffset}function populatemenu(what){if (ie4||ns6)dropmenuobj.innerHTML=what.join("")}function dropdownmenu(obj, e, menucontents, menuwidth){if (window.event) event.cancelBubble=trueelse if (e.stopPropagation) e.stopPropagation()clearhidemenu()dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudivpopulatemenu(menucontents)if (ie4||ns6){showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)dropmenuobj.x=getposOffset(obj, "left")dropmenuobj.y=getposOffset(obj, "top")dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"}return clickreturnvalue()}function clickreturnvalue(){if (ie4||ns6) return falseelse return true}function contains_ns6(a,  {while (b.parentNode)if ((b = b.parentNode) == a)return true;return false;}function dynamichide(e){if (ie4&&!dropmenuobj.contains(e.toElement))delayhidemenu()else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))delayhidemenu()}function hidemenu(e){if (typeof dropmenuobj!="undefined"){if (ie4||ns6)dropmenuobj.style.visibility="hidden"}}function delayhidemenu(){if (ie4||ns6)delayhide=setTimeout("hidemenu()",disappeardelay)}function clearhidemenu(){if (typeof delayhide!="undefined")clearTimeout(delayhide)}if (hidemenu_onclick=="yes")document.onclick=hidemenu</script></HEAD><BODY><input type="button" readOnly name="t1"  style="font-family: Tahoma; font-size: 8px; border-style:ridge; font-weight: normal; width:80px; border-color: #FFFFFF;"onClick="dropdownmenu(this, event, menu1, '80px'),document.forms[0].t1.focus();"> </body>

<{POST_SNAPBACK}>