gudfry Posted October 9, 2008 Share Posted October 9, 2008 hi to all; Please tell me where to find a good example of multi dropdown list. I want to create a dropdown list menu for state, country and state. thanks' for all, Quote Link to comment Share on other sites More sharing options...
burnside Posted October 9, 2008 Share Posted October 9, 2008 make your own? <select name="state" /> <option value=? />Blah</option> </select /> some thing like that? Quote Link to comment Share on other sites More sharing options...
Wahooka Posted October 9, 2008 Share Posted October 9, 2008 I think it says something else. here you have a drop-down menu like a menu in firefox-browser but not oncklick, its mouseover. Insert the following style sheet and script into the <head> section of your page: <style type="text/css"> #dropmenudiv{ position:absolute; border:1px solid black; border-bottom-width: 0; font:normal 12px Verdana; line-height:18px; 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; } </style> <script type="text/javascript"> //Contents for menu 1 var menu1=new Array() menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>' menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>' menu1[2]='<a href="http://codingforums.com">Coding Forums</a>' menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>' //Contents for menu 2, and so on var menu2=new Array() menu2[0]='<a href="http://cnn.com">CNN</a>' menu2[1]='<a href="http://msnbc.com">MSNBC</a>' menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>' var menuwidth='165px' //default menu width var menubgcolor='lightyellow' //menu bgcolor var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds) var hidemenu_onclick="yes" //hide menu when user clicks within menu? /////No further editting needed var ie4=document.all var ns6=document.getElementById&&!document.all if (ie4||ns6) document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') 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="-500px" if (menuwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=menuwidth } if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else 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=0 if (whichedge=="rightedge"){ var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth } else{ var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up? edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight if ((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=true else if (e.stopPropagation) e.stopPropagation() clearhidemenu() dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv populatemenu(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 false else return true } function contains_ns6(a, b) { 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> Having done the above, all that's left is setting up your link(s) so a menu drops down. The below sample HTML demonstrates two links, one with the menu dropping down onMouseover, and the other, onClick: <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Web Design</a> | <a href="default2.htm" onClick="return dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">News Sites</a> (onclick) The dropdownmenu() function accepts 4 parameters as shown: dropdownmenu(this, event, menuarray, 'width') Only customize the last two parameters (menuarray and 'width'), where: Menuarray- The array contents you wish the menu to display (see code of Step 1). Width- The width of the menu (pass in "" if you simply wish to use the default menu width). so far, heiko Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.