vijay1440 Posted December 27, 2005 Share Posted December 27, 2005 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 Link to comment Share on other sites More sharing options...
manojdubey Posted December 27, 2005 Share Posted December 27, 2005 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> Link to comment Share on other sites More sharing options...
vijay1440 Posted December 27, 2005 Author Share Posted December 27, 2005 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}> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now