Java Script Drop Down Menu With Css - a full code for a dynamic drop down

Introduction

This is a code that I use to dynamically create the drop down menus. First, you have to edit the following code and put it in your Javascript. Notice : /*** SET BUTTON'S FOLDER HERE ***/. Edit that to your folder. Also, the /*** SET BUTTONS' FILENAMES HERE ***/. This creates a mouseover when the drop down is activated. Put all your onmouseover images under: oversources = new array; and your onmouseout images under : upsources. Be sure to set your on and out images above each other.

/*** SET BUTTON'S FOLDER HERE ***/var buttonFolder = "img/";/*** SET BUTTONS' FILENAMES HERE ***/upSources = new Array("image_out.gif","image_out.gif","image_out.gif","image_out.gif","image_out.gif");overSources = new Array("image_on.gif","image_on.gif","image_on.gif","image_on.gif","image_on.gif");// SUB MENUS DECLARATION, YOU DONT NEED TO EDIT THISsubInfo = new Array();subInfo[1] = new Array();subInfo[2] = new Array();subInfo[3] = new Array();subInfo[4] = new Array();subInfo[5] = new Array();//*** SET SUB MENUS TEXT LINKS AND TARGETS HERE ***//subInfo[1][1] = new Array("new","new.html","");subInfo[1][2] = new Array("new","new.html","");subInfo[1][3] = new Array("new","new.html","");subInfo[1][4] = new Array("new","new.html","");subInfo[1][5] = new Array("new","new.html","");subInfo[1][6] = new Array("new","new.html","");subInfo[1][7] = new Array("new","new.html","");subInfo[2][1] = new Array("new","new.html");subInfo[2][2] = new Array("new","new.html","");subInfo[2][3] = new Array("new","new.html","");subInfo[2][4] = new Array("Highschool","new.html","");subInfo[3][1] = new Array("new","new.html","");subInfo[3][2] = new Array("new","new.html","");subInfo[3][3] = new Array("new","new.html","");subInfo[3][4] = new Array("new","new.html","");subInfo[3][5] = new Array("new","new.html","");subInfo[4][1] = new Array("new","new.html","");subInfo[4][2] = new Array("new","new.html","");subInfo[4][3] = new Array("new","new.html","");subInfo[4][4] = new Array("new","PO.html","");subInfo[4][5] = new Array("new","new.html","");subInfo[5][1] = new Array("new","new.html","");subInfo[5][2] = new Array("new","new.html","");subInfo[5][3] = new Array("new","new.html","");subInfo[5][4] = new Array("new","new.html","");//*** SET SUB MENU POSITION ( RELATIVE TO BUTTON ) ***//var xSubOffset = 4;var ySubOffset = 19;//*** NO MORE SETTINGS BEYOND THIS POINT ***//var overSub = false;var delay = 1000;totalButtons = upSources.length;// GENERATE SUB MENUSfor ( x=0; x<totalButtons; x++) {	// SET EMPTY DIV FOR BUTTONS WITHOUT SUBMENU	if ( subInfo[x+1].length < 1 ) {   document.write('<div id="submenu' + (x+1) + '">');	// SET DIV FOR BUTTONS WITH SUBMENU	} else {  document.write('<div id="submenu' + (x+1) + '" class="dropmenu" ');  document.write('onMouseOver="overSub=true;');  document.write('setOverImg(\'' + (x+1) + '\',\'\');"');  document.write('onMouseOut="overSub=false;');  document.write('setTimeout(\'hideSubMenu(\\\'submenu' + (x+1) + '\\\')\',delay);');  document.write('setOutImg(\'' + (x+1) + '\',\'\');">');  document.write('<ul>');  for ( k=0; k<subInfo[x+1].length-1; k++ ) {  	document.write('<li>');  	document.write('<a href="' + subInfo[x+1][k+1][1] + '" ');  	document.write('target="' + subInfo[x+1][k+1][2] + '">');  	document.write( subInfo[x+1][k+1][0] + '</a>');  	document.write('</li>');  }  document.write('</ul>');	}	document.write('</div>');}//*** MAIN BUTTONS FUNCTIONS ***//// PRELOAD MAIN MENU BUTTON IMAGESfunction preload() {	for ( x=0; x<totalButtons; x++ ) {  buttonUp = new Image();  buttonUp.src = buttonFolder + upSources[x];  buttonOver = new Image();  buttonOver.src = buttonFolder + overSources[x];	}}// SET MOUSEOVER BUTTONfunction setOverImg(But, ID) {	document.getElementById('button' + But + ID).src = buttonFolder + overSources[But-1];}// SET MOUSEOUT BUTTONfunction setOutImg(But, ID) {	document.getElementById('button' + But + ID).src = buttonFolder + upSources[But-1];}//*** SUB MENU FUNCTIONS ***//// GET ELEMENT ID MULTI BROWSERfunction getElement(id) {	return document.getElementById ? document.getElementById(id) : document.all ? document.all(id) : null; }// GET X COORDINATEfunction getRealLeft(id) { 	var el = getElement(id);	if (el) {   xPos = el.offsetLeft;  tempEl = el.offsetParent;  while (tempEl != null) {  	xPos += tempEl.offsetLeft;  	tempEl = tempEl.offsetParent;  }   return xPos;	} } // GET Y COORDINATEfunction getRealTop(id) {	var el = getElement(id);	if (el) {   yPos = el.offsetTop;  tempEl = el.offsetParent;  while (tempEl != null) {  	yPos += tempEl.offsetTop;  	tempEl = tempEl.offsetParent;  }  return yPos;	}}// MOVE OBJECT TO COORDINATEfunction moveObjectTo(objectID,x,y) {	var el = getElement(objectID);	el.style.left = x;	el.style.top = y;}// MOVE SUBMENU TO CORRESPONDING BUTTONfunction showSubMenu(subID, buttonID) {	hideAllSubMenus();	butX = getRealLeft(buttonID);	butY = getRealTop(buttonID);	moveObjectTo(subID,butX+xSubOffset, butY+ySubOffset);}// HIDE ALL SUB MENUSfunction hideAllSubMenus() {	for ( x=0; x<totalButtons; x++) {  moveObjectTo("submenu" + (x+1) + "",-500, -500 );	}}// HIDE ONE SUB MENUfunction hideSubMenu(subID) {	if ( overSub == false ) {  moveObjectTo(subID,-500, -500);	}}//preload();

Creating your drop down options

 

 

Now, to create the your options simply edit the subinfo array. Notice that this is button 1 and has 4 menu options.

//*** SET SUB MENUS TEXT LINKS AND TARGETS HERE ***//subInfo[1][1] = new Array("new","new.html","");subInfo[1][2] = new Array("new","new.html","");subInfo[1][3] = new Array("new","new.html","");subInfo[1][4] = new Array("new","new.html","");

CSS

 

In CSS is where you create how the menu looks. You can edit the color of the background, border, ...ect. This menu will overlap anyother information underneathe the menu. I like to give it a little bit of transparency.

filter: alpha(opacity=75)

.dropmenu {   position: absolute;   left: -1500px;   visibility: visible;   z-index: 101;   float: right;   width: 150px;   filter: alpha(opacity=85);   border-width: 4px;   border-style: outset;   border-color: #888888;	   background-color: #333333;}.dropmenu ul {   margin: 0;   padding: 2;   list-style-type: none; }.dropmenu li {   display: inline;}.dropmenu a, .dropmenu a:visited, .dropmenu a:active {   display: block;   width: 150px;   padding: 2px;   margin: 1px;   font-family: Verdana;   font-size: 10px;   font-weight: normal;   text-align: left;   text-decoration: none;   color: #FFFFFF;   background-color: #6282FA;}.dropmenu a:hover {   padding: 2px;   margin: 1px;   font-family: Verdana;   font-size: 10px;   font-weight: normal;   text-align: left;   text-decoration: none;   color: #0012ff;   background-color: #EDA031;}

If you have trouble witht the drop down being off set, set the margins wider.

also, put this in you html page:

<a href="new.html" onmouseover="setOverImg('1','');overSub=true;showSubMenu('submenu1','button1');" onmouseout="setOutImg('1','');overSub=false;setTimeout('hideSubMenu(\'submenu1\')',delay);" target="">                <img src="img/CHE_classes_out.gif" border="0" id="button1" vspace="1" hspace="1" width="70" height="20"></a>

How can I create fly drop down menu for text links ?

Java Script Drop Down Menu With Css

 

Hello sir,

How can I create fly drop down menu for text links ?

Please send me full code for this.

 

Thanks & Regards

NaiduGovindu

 

-question by Naidugovindu