PDA

View Full Version : javascript menu help



mawbster
01-09-2007, 12:19 AM
hi there found the forum while searching for a solution to a problem on a web site im building for my mum

http://img171.imageshack.us/img171/7871/untitledql7.jpg (http://imageshack.us)

having rendered a menu on a building site i have put the menu onto a page that i am building on frontpage. im not very experienced so bear with me

the menus working fine however when i constucted the menu using the online builder the spacing between the sub menus was a lot smaller.
now on this catogorie there is around 40 items and the spacing as shown on the picture makes it go of page and makes the site look bad.

how can i change the spacing so i can fit all the items on to the one page on the submenu as ive set up the site as a single page with no rolling

Menuscript.js file

/*** SET BUTTON'S FOLDER HERE ***/
var buttonFolder = "buttons/";

/*** SET BUTTONS' FILENAMES HERE ***/
upSources = new Array("button1up.png","button2up.png","button3up.png","button4up.png","button5up.png","button6up.png","button7up.png","button8up.png","button9up.png","button10up.png","button11up.png","button12up.png","button13up.png","button14up.png","button15up.png","button16up.png","button17up.png","button18up.png","button19up.png","button20up.png","button21up.png");

overSources = new Array("button1over.png","button2over.png","button3over.png","button4over.png","button5over.png","button6over.png","button7over.png","button8over.png","button9over.png","button10over.png","button11over.png","button12over.png","button13over.png","button14over.png","button15over.png","button16over.png","button17over.png","button18over.png","button19over.png","button20over.png","button21over.png");

// SUB MENUS DECLARATION, YOU DONT NEED TO EDIT THIS
subInfo = new Array();
subInfo[1] = new Array();
subInfo[2] = new Array();
subInfo[3] = new Array();
subInfo[4] = new Array();
subInfo[5] = new Array();
subInfo[6] = new Array();
subInfo[7] = new Array();
subInfo[8] = new Array();
subInfo[9] = new Array();
subInfo[10] = new Array();
subInfo[11] = new Array();
subInfo[12] = new Array();
subInfo[13] = new Array();
subInfo[14] = new Array();
subInfo[15] = new Array();
subInfo[16] = new Array();
subInfo[17] = new Array();
subInfo[18] = new Array();
subInfo[19] = new Array();
subInfo[20] = new Array();
subInfo[21] = new Array();


//*** SET SUB MENUS TEXT LINKS AND TARGETS HERE ***//

subInfo[2][1] = new Array(" Acrylic","Sub-Link 2","");
subInfo[2][2] = new Array(" Bicones","Link 2","");
subInfo[2][3] = new Array(" Bugle Beads","Sub-Link 1","");
subInfo[2][4] = new Array(" Cat\'s Eye Chips","Sub-Link 2","");
subInfo[2][5] = new Array(" Cathedral","","");
subInfo[2][6] = new Array(" Crackle","","");
subInfo[2][7] = new Array(" Crinkle Glitter","","");
subInfo[2][8] = new Array(" Crystal Cone ","","");
subInfo[2][9] = new Array(" Czech Glass Druk ","","");
subInfo[2][10] = new Array(" Czech Glass Satin Druk ","","");
subInfo[2][11] = new Array(" Desert Sun ","","");
subInfo[2][12] = new Array(" Duranga ","","");
subInfo[2][13] = new Array(" Fancy Glass Chips ","","");
subInfo[2][14] = new Array(" Fancy Metal ","","");
subInfo[2][15] = new Array(" Fire Polished ","","");
subInfo[2][16] = new Array(" Flecked ","","");
subInfo[2][17] = new Array(" Flower ","","");
subInfo[2][18] = new Array(" Foil Flecked","","");
subInfo[2][19] = new Array(" Gemstone ","","");
subInfo[2][20] = new Array(" Glass Pearl ","","");
subInfo[2][21] = new Array(" Hand Made ","","");
subInfo[2][22] = new Array(" High Lustre ","","");
subInfo[2][23] = new Array(" Marbled ","","");
subInfo[2][24] = new Array(" Millifiori ","","");
subInfo[2][25] = new Array(" Other ","","");
subInfo[2][26] = new Array(" Plated - Gold ","","");
subInfo[2][27] = new Array(" Plated - Silver ","","");
subInfo[2][28] = new Array(" Seed Beads ","","");
subInfo[2][29] = new Array(" Spectra ","","");
subInfo[2][30] = new Array(" Spotty ","","");
subInfo[2][31] = new Array(" Venetian Style Glass ","","");
subInfo[2][32] = new Array(" Wood","","");





subInfo[7][1] = new Array(" Diamond shapes ","","");
subInfo[7][2] = new Array(" Large Pendant beads ","","");
subInfo[7][3] = new Array(" Other Shapes ","","");
subInfo[7][4] = new Array(" Oval beads ","","");
subInfo[7][5] = new Array(" Pendants ","","");
subInfo[7][6] = new Array(" Round beads ","","");
subInfo[7][7] = new Array(" Teardrop shapes ","","");
subInfo[7][8] = new Array(" Tube beads","","");



subInfo[10][1] = new Array(" Gold Plated ","","");
subInfo[10][2] = new Array(" Silver Plated","","");




subInfo[14][1] = new Array(" Agate ","","");
subInfo[14][2] = new Array(" Cloisonne","","");
subInfo[14][3] = new Array(" Enamelled","","");
subInfo[14][4] = new Array(" Fluorite","","");
subInfo[14][5] = new Array(" Gemstone","","");
subInfo[14][6] = new Array(" Glass","","");
subInfo[14][7] = new Array(" Jasper Teardrops","","");
subInfo[14][8] = new Array(" Mother Of Pearl","","");
subInfo[14][9] = new Array(" Other Pendants","","");
subInfo[14][10] = new Array(" Quartz","","");
subInfo[14][11] = new Array(" Shell","","");
subInfo[14][12] = new Array(" Silver/Gold Plated ","","");
subInfo[14][13] = new Array(" Snowflake Obsidian Teardrops","","");
subInfo[14][14] = new Array(" with Crystals","","");



subInfo[17][1] = new Array(" Swarovski Crystals ","","");
subInfo[17][2] = new Array(" Swarovski Clasps and toggles ","","");
subInfo[17][3] = new Array(" Swarovski Connectors","","");
subInfo[17][4] = new Array(" Swarovski Earring Components ","","");
subInfo[17][5] = new Array(" Swarovski Pendants","","");
subInfo[17][6] = new Array(" Swarovski Sliders ","","");






//*** SET SUB MENU POSITION ( RELATIVE TO BUTTON ) ***//
var xSubOffset = 126;
var ySubOffset = 1;



//*** NO MORE SETTINGS BEYOND THIS POINT ***//
var overSub = false;
var delay = 1000;
totalButtons = upSources.length;

// GENERATE SUB MENUS
for ( 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 IMAGES
function 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 BUTTON
function setOverImg(But, ID) {
document.getElementById('button' + But + ID).src = buttonFolder + overSources[But-1];
}

// SET MOUSEOUT BUTTON
function setOutImg(But, ID) {
document.getElementById('button' + But + ID).src = buttonFolder + upSources[But-1];
}



//*** SUB MENU FUNCTIONS ***//
// GET ELEMENT ID MULTI BROWSER
function getElement(id) {
return document.getElementById ? document.getElementById(id) : document.all ? document.all(id) : null;
}

// GET X COORDINATE
function 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 COORDINATE
function 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 COORDINATE
function moveObjectTo(objectID,x,y) {
var el = getElement(objectID);
el.style.left = x;
el.style.top = y;
}

// MOVE SUBMENU TO CORRESPONDING BUTTON
function showSubMenu(subID, buttonID) {
hideAllSubMenus();
butX = getRealLeft(buttonID);
butY = getRealTop(buttonID);
moveObjectTo(subID,butX+xSubOffset, butY+ySubOffset);
}

// HIDE ALL SUB MENUS
function hideAllSubMenus() {
for ( x=0; x<totalButtons; x++) {
moveObjectTo("submenu" + (x+1) + "",-500, -500 );
}
}

// HIDE ONE SUB MENU
function hideSubMenu(subID) {
if ( overSub == false ) {
moveObjectTo(subID,-500, -500);
}
}



//preload();



menu style.js file



.dropmenu {
position: absolute;
left: -1500px;
visibility: visible;
z-index: 50;
float: right;
width: 150px;

border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #AAAAAA;
}
.dropmenu ul {
margin: 0;
padding: -1;
list-style-type: none;
}
.dropmenu li {
display: inline;
}
.dropmenu a, .dropmenu a:visited, .dropmenu a:active {
display: block;
width: 150px;

padding: 1px;
margin: 0px;
font-family: Arial;
font-size: 10px;
font-weight: bold;
text-align: center;
text-decoration: none;

color: #000000;
background-color: #BFBFBF;
}
.dropmenu a:hover {
padding: 1px;
margin: 0px;
font-family: Arial;
font-size: 15px;
font-weight: bold;
text-align: center;
text-decoration: none;

color: #000000;
background-color: #EAEAEA;
}