JavaScript Menu

#1
JavaScript Menu

Hey Scriptors,

I need help... don't we all...

I've made a menu for my site. I am figured out how to posititon them menu wheer I want it, by using pixels.

This is obviously not the way to go as computers have different screen resolutions.

What I need is how can I tell the button to use %s instead of pixels to position the button.

For instance,

Right now I have the button at 760 pixels from the right. Or in otherwords 5% from the right with a screen resolution of 800 x 600. But if you view it at 1024 x 768 or another higher resolution, the button would move the the left. Vice Verse if you have a 640 x 480 resolution you would have the scroll to see the button.

Currently with my HTML menu it is 10% from thr right so no matter what the screen resolution is it is always 10% from the right.

How can you do this in JavaScript?

Currently I am using the following elements and values:

'block_top':0,'block_left':760,

I can't find much on the net. I have also posted on Christian Web-Masters with not many replies at this point.

Anyway, thank you all and God bless,
Johnathan
 
#3
I have not.

How would you place it in a table?

[hr]

HTML

Code:
<html>
<head>
 <title>Javascript Menu Test</title>
 <script language="JavaScript" src="[URL="http://www.tsgcomputers.net/menu/menu.js%22%3E%3C/script"]http://www.tsgcomputers.net/menu/menu.js"></script[/URL]>
 <script language="JavaScript" src="[URL="http://www.tsgcomputers.net/menu/menu_items.js%22%3E%3C/script"]http://www.tsgcomputers.net/menu/menu_items.js"></script[/URL]>
 <script language="JavaScript" src="[URL="http://www.tsgcomputers.net/menu/menu_tpl.js%22%3E%3C/script"]http://www.tsgcomputers.net/menu/menu_tpl.js"></script[/URL]>
 <link rel="stylesheet" href="[URL]http://www.tsgcomputers.net/menu/menu.css[/URL]">
</head>
<body>
<script language="JavaScript">
 new menu (MENU_ITEMS, MENU_TPL);
</script>
</body>
</html>
 
#4
menu.js

Code:
var A_MENUS=[];function menu(F,I){if(!document.body||!document.body.style)return;this.B=F;this.I=I;this.b=A_MENUS.length;this.D=[];this.A=[];this.expand=R;this.collapse=Q;this.onclick=T;this.onmouseout=V;this.onmouseover=W;this.onmousedown=U;this.J={'block_top':0,'block_left':760,'top':20,'left':4,'width':120,'height':22,'hide_delay':0,'expd_delay':0,'css':{'inner':'','outer':''}};this.O=function(p){return this.J[p];};this.n=this;this.a=-1;this.g=0;this.h=0;for(c=0;c<F.length;c++)new S(this,c);A_MENUS[this.b]=this;for(var c=0;c<this.A.length;c++)this.A[c].N.style.visibility='visible';}function Q(b){clearTimeout(this.o);var f=(b?this.D[b].a:0);for(b=0;b<this.D.length;b++){var j=this.D[b];if(j.a>f&&j.L){j.N.style.visibility='hidden';j.L=false;}}if(!b)this.i=null;}function R(b){if(this.k)return;var l=this.D[b];if(this.i&&this.i.a>=l.a)this.collapse(l.b);this.i=l;if(!l.A)return;for(var c=0;c<l.A.length;c++){var j=l.A[c];j.N.style.visibility='visible';j.L=true;}}function T(b){var l=this.D[b];var q=l.B[1];if(!q)return true;if(String(q).toLowerCase().indexOf('javascript:')==0)return eval(q);if(l.B[2]&&l.B[2]['tw'])window.open(q,l.B[2]['tw']);else window.location=q;return true;}function V(b){var l=this.D[b];l.N.className=l.P(0,0);l.M.className=l.P(1,0);l.s(7);this.k=setTimeout('A_MENUS['+this.b+'].collapse();',l.O('hide_delay'));}function W(b){clearTimeout(this.k);this.k=null;clearTimeout(this.o);var l=this.D[b];l.s();l.N.className=l.P(0,1);l.M.className=l.P(1,1);if(l.O('expd_delay')<0)return;this.o=setTimeout('A_MENUS['+this.b+'].expand('+b+');',l.O('expd_delay'));}function U(b){var l=this.D[b];l.N.className=l.P(0,2);l.M.className=l.P(1,2);this.expand(b);}function S(m,c){this.a=m.a+1;this.B=m.B[c+(this.a?3:0)];if(!this.B)return;this.n=m.n;this.m=m;this.c=c;this.b=this.n.D.length;this.n.D[this.b]=this;m.A[c]=this;var n=this.n,I=this.n.I;this.O=X;this.P=Y;this.s=Z;this.g=c?m.A[c-1].g+this.O('left'):m.g+this.O('block_left');this.h=c?m.A[c-1].h+this.O('top'):m.h+this.O('block_top');document.write('<div id="e',n.b,'_',this.b,'o" class="',this.P(0,0),'"',(this.B[2]&&this.B[2]['tt']?' title="'+this.B[2]['tt']+'"':''),' style="position:absolute;top: ',this.h,'px;left:',this.g,'px;width:',this.O('width'),'px;height:',this.O('height'),'px;visibility:hidden;',' z-index: ',this.a,';cursor:',(this.B[1]?'pointer':'default'),'" ','onclick="return A_MENUS[',n.b,'].onclick(',this.b,');" onmouseout="A_MENUS[',n.b,'].onmouseout(',this.b,');" onmouseover="A_MENUS[',n.b,'].onmouseover(',this.b,');" onmousedown="A_MENUS[',n.b,'].onmousedown(',this.b,');"><div id="e',n.b,'_',this.b,'i" class="',this.P(1,0),'">',this.B[0],"</div></div>");this.M=document.getElementById('e'+n.b+'_'+this.b+'i');this.N=document.getElementById('e'+n.b+'_'+this.b+'o');this.L=!this.a;if(this.B.length<4)return;this.A=[];for(var c=0;c<this.B.length-3;c++)new S(this,c);}function X(p){var r=null,G=this.n.I[this.a];if(G)r=G[p];return(r==null?this.m.O(p):r);}function Y(d,e){var C=this.O('css');var H=C[d?'inner':'outer'];if(typeof(H)=='string')return H;for(var _=e;_>=0;_--)if(H[_])return H[_];}function Z(K){window.setTimeout("window.status=unescape('"+(K?'':(this.B[2]&&this.B[2]['sb']?escape(this.B[2]['sb']):escape(this.B[0])+(this.B[1]?' ('+escape(this.B[1])+')':'')))+"')",10);}
 
#5
menu_items.js
Code:
var MENU_ITEMS = [
 ['Menu', null, null,
  ['Home', 'http://www.tsgcomputers.net', {'tw':'_self','tt':'TSG Computers Homepage'}],
  ['[Forum]', null, null,
   ['Register', 'http://www.tsgcomputers.net/forum/index.php?action=register', {'tw':'_self'}],
   ['Forum Home', 'http://www.tsgcomputers.net/forum', {'tw':'_self','tt':'TSG Computers Forum'}],
   ['Control Panel', 'http://www.tsgcomputers.net/forum/index.php?action=usercp', {'tw':'_self','tt':'Your Control Panel (Registered users only)'}],
   ['Your Messeges', 'http://www.tsgcomputers.net/forum/index.php?action=pm', {'tw':'_self','tt':'Your Messeges (Registered users only)'}],
   ['Send Email', 'http://www.tsgcomputers.net/forum/index.php?action=contact', {'tw':'_self','tt':'Send an Email (Registered users only)'}],
   ['Calendar', 'http://www.tsgcomputers.net/forum/index.php?action=calendar', {'tw':'_self','tt':'Calendar (Registered users only)'}],
   ['Search', 'http://www.tsgcomputers.net/forum/index.php?action=search', {'tw':'_self','tt':'Search the Forum.'}],
   ['Invite', 'http://www.tsgcomputers.net/forum/index.php?action=invite', {'tw':'_self','tt':'Invite others to the site! (Registered users only)'}],
   ['Suggestions?', 'http://www.tsgcomputers.net/forum/index.php?board=3.0', {'tw':'_self','tt':'Suggestions for the Forum (Registered users only)'}]
  ],
  ['Chatroom', 'http://www.tsgcomputers.net/index.php?pid=15', {'tw':'_self','tt':'IRC based Chatroom (Registered users only)'}],
  ['Downloads', 'http://www.tsgcomputers.net/index.php?ind=downloads', {'tw':'_self','tt':'Downloads (Registered users only)'}],
  ['Links', 'http://www.tsgcomputers.net/forum/index.php?action=links', {'tw':'_self','tt':'Links (Registered users only)'}],
  ['[Media]', null, null,
   ['Music', 'http://www.tsgcomputers.net/player/music', {'tw':'_blank','tt':'Online MP3 Player'}],
   ['Video', 'http://www.tsgcomputers.net/player/video', {'tw':'_blank','tt':'Online Video Player'}],
   ['Audio Bible (English - KJV)', null, {'tw':'_blank','tt':'Currently under construction!'}]
  ],
  ['[Resources]', null, null,
   ['[Christian]', null, null,
    ['Bible Tools', 'http://www.tsgcomputers.net/index.php?pid=2', {'tw':'_self','tt':'Various Bible Tools'}],
    ['[Bible Translations]', null, null,
     ['[English Versions]', null, null,
      ['ASV', 'http://www.tsgcomputers.net/bible/asv', {'tw':'_self','tt':'American Standard Version'}],
      ['BBE', 'http://www.tsgcomputers.net/bible/basic_english', {'tw':'_self','tt':'Bible in Basic English'}],
      ['Darby', 'http://www.tsgcomputers.net/bible/darby', {'tw':'_self','tt':'Darbys English Translation Bible'}],
      ['Douay Rheims', 'http://www.tsgcomputers.net/bible/douay', {'tw':'_self','tt':'Douay Rheims Bible'}],
      ['KJV', 'http://www.tsgcomputers.net/bible/kjv20', {'tw':'_self','tt':'King James Version Bible'}],
      ['KJV - Apocrypha', 'http://www.tsgcomputers.net/bible/kjvapocrypha', {'tw':'_self','tt':'King James Apocrypha'}],
      ['KJV - LARGE PRINT', 'http://www.tsgcomputers.net/bible/kjvlarge', {'tw':'_self','tt':'King James Large Print Bible'}],
      ['NWB', 'http://www.tsgcomputers.net/bible/webster', {'tw':'_self','tt':'Noah Webster Bible'}],
      ['WEB', 'http://www.tsgcomputers.net/bible/web', {'tw':'_self','tt':'World English Bible'}],
      ['WNT', 'http://www.tsgcomputers.net/bible/weymouth', {'tw':'_self','tt':'Weymouth New Testament'}],
      ['YLT', 'http://www.tsgcomputers.net/bible/youngs', {'tw':'_self','tt':'Youngs Literal Translation Bible'}]
     ],
     ['[Other Languages]', null, null,
      ['Cebuano', 'http://www.tsgcomputers.net/bible/languages/cebuano', {'tw':'_self','tt':'Cebuano'}],
      ['[Chinese]', null, null,
       ['Union Bible (Big 5)', 'http://www.tsgcomputers.net/bible/languages/chinese_big5', {'tw':'_self','tt':'Chinese Union Bible (Big 5)'}],
       ['Union Bible (GB)', 'http://www.tsgcomputers.net/bible/languages/chinese_gb', {'tw':'_self','tt':'Chinese Union Bible (GB)'}]
      ],
      ['[European]', null, null,
       ['Albanian', 'http://www.tsgcomputers.net/bible/languages/albanian', {'tw':'_self','tt':'Albanian'}],
       ['Bulgarian', 'http://www.tsgcomputers.net/bible/languages/bulgarian', {'tw':'_self','tt':'Bulgarian'}],
       ['Dutch S.V. Bible 1715', 'http://www.tsgcomputers.net/bible/languages/dutch', {'tw':'_self','tt':'Dutch StatenVertalings Bible 1715'}],
       ['French', 'http://www.tsgcomputers.net/bible/languages/french', {'tw':'_self','tt':'French'}],
       ['Gaelic (Manx)', 'http://www.tsgcomputers.net/bible/languages/gaelic_manx', {'tw':'_self','tt':'Gaelic (Manx)'}],
       ['Gaelic (Scots)', 'http://www.tsgcomputers.net/bible/languages/gaelic_scots', {'tw':'_self','tt':'Gaelic (Scots)'}],
       ['German', 'http://www.tsgcomputers.net/bible/languages/german', {'tw':'_self','tt':'German'}],
       ['Hungarian', 'http://www.tsgcomputers.net/bible/languages/hungarian', {'tw':'_self','tt':'Hungarian'}],
       ['Latvian NT', 'http://www.tsgcomputers.net/bible/languages/latvian_nt', {'tw':'_self','tt':'Latvian NT'}],
       ['Modern Greek', 'http://www.tsgcomputers.net/bible/languages/moderngreek', {'tw':'_self','tt':'Modern Greek'}],
       ['[Russian]', null, null,
        ['Russian 1251', 'http://www.tsgcomputers.net/bible/languages/russian_1251', {'tw':'_self','tt':'Russian 1251'}],
        ['Russian (K018-R)', 'http://www.tsgcomputers.net/bible/languages/russian_ko18r', {'tw':'_self','tt':'Russian (K018-R)'}]
       ],
       ['Swedish', 'http://www.tsgcomputers.net/bible/languages/swedish', {'tw':'_self','tt':'Swedish'}],
       ['Ukrainian', 'http://www.tsgcomputers.net/bible/languages/ukrainian', {'tw':'_self','tt':'Ukrainian'}],
      ],
      ['Haitian Creole', 'http://www.tsgcomputers.net/bible/languages/haitian_creole', {'tw':'_self','tt':'Haitian Creole'}],
      ['Hebrew OT', 'http://www.tsgcomputers.net/bible/languages/hebrewot', {'tw':'_self','tt':'Hebrew OT'}],
      ['Korean', 'http://www.tsgcomputers.net/bible/languages/korean', {'tw':'_self','tt':'Korean'}],
      ['Latin Vulgate', 'http://www.tsgcomputers.net/bible/languages/vulgate', {'tw':'_self','tt':'Latin Vulgate'}],
      ['Maori', 'http://www.tsgcomputers.net/bible/languages/maori', {'tw':'_self','tt':'Maori'}],
      ['Rumanian', 'http://www.tsgcomputers.net/bible/languages/rumanian', {'tw':'_self','tt':'Rumanian'}],
      ['Swahili NT', 'http://www.tsgcomputers.net/bible/languages/swahili_nt', {'tw':'_self','tt':'Swahili NT'}],
      ['Tagalog', 'http://www.tsgcomputers.net/bible/languages/tagalog', {'tw':'_self','tt':'Tagalog'}],
      ['Thai', 'http://www.tsgcomputers.net/bible/languages/thaibible', {'tw':'_self','tt':'Thai'}],
      ['Uma NT', 'http://www.tsgcomputers.net/bible/languages/uma_nt', {'tw':'_self','tt':'Uma NT'}],
      ['[Vietnamese]', null,null,
       ['Vietnamese', 'http://www.tsgcomputers.net/bible/languages/vietnamese', {'tw':'_self','tt':'Vietnamese'}],
       ['Vietnamese (VNI Times)', 'http://www.tsgcomputers.net/bible/languages/vietnamesevni', {'tw':'_self','tt':'Vietnamese (VNI Times)'}]
      ],
     ],
    ],
   ],
   ['[Online Tools]', null, {'tt':'Various online tools.'},
    ['Converters', 'http://www.tsgcomputers.net/index.php?pid=1', {'tw':'_self','tt':'Currently under construction!'}],
    ['Xara3D Banner Maker', 'http://www.tsgcomputers.net/index.php?pid=20', {'tw':'_self','tt':'An online banner maker for your website!'}],
    ['ClusterMap', 'http://www3.clustrmaps.com/counter/maps.php?url=http://www.tsgcomputers.net', {'tw':'_blank','tt':'Map of users around the world that have visited this site.'}]
   ],
  ],
  ['News', 'http://www.tsgcomputers.net/index.php?ind=news', {'tw':'_self','tt':'News from the webmaster.'}],
  ['Suggestions?', 'http://www.tsgcomputers.net/index.php?pid=17', {'tw':'_self','tt':'Comments or suggestions about the site?'}]
 ],
];
 
#6
menu_tpl.js
Code:
var MENU_TPL = [
 {
  'width': 100,
  'height': 24,
  'left': 99, 
  'top': 0,
  'hide_delay': 200,
  'expd_delay': 200,
  'css': {
   'inner': 'TM0i0',
   'outer': ['TM0o0','TM0o1']
  },
  'block_left': null,
  'block_top': null
 },
 {
  'width': 160,
  'block_left': -60,
/*  'block_left': 0, */
  'block_top': 25,
  'left': 0,
  'top': 23,
  'css': {
   'inner': 'TM1i0',
   'outer': ['TM1o0','TM1o1']
  }
 },
 {
  'block_left': -100,
/*  'block_left': 105, */
  'block_top': 0
/*  'block_top': 10 */
 }
];
 
#7
menu.css
Code:
/* Blue - Root; text properties for states: normal, hover, click */
.TM0i0 {
 font-family: Arial, Helvetica, sans-serif;;
 color: #FFFFFF;
 font-size: 12px;
 font-weight: normal;
 font-style: normal;
 text-decoration: none;
 padding: 4px;
}
/* Blue - Root; box properties for states: normal */
.TM0o0 {
 background: #3C76B2;
 border: 0px solid #2B547F;
 text-align: center;
 vertical-align: middle;
 text-decoration: none;
}
/* Blue - Root; box properties for states: hover, click */
.TM0o1 {
 background: #4D99E6;
 border: 1px solid #2B547F;
 text-align: center;
 vertical-align: middle;
 text-decoration: none;
}
/* blue grades - sub levels; text properties for states: normal, hover, click */
.TM1i0 {
 font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
 border: 0px solid #2B547F;
 color: #FFFFFF;
 font-size: 12px;
 font-weight: normal;
 font-style: normal;
 text-decoration: none;
 padding: 4px;
}
/* blue grades - sub levels; box properties for states: normal */
.TM1o0 {
 background: #4D99E6;
 border: 0px solid #2B547F;
 text-align: right;
 vertical-align: middle;
 text-decoration: none;
}
/* blue grades - sub levels; box properties for states: hover, click */
.TM1o1 {
 background: #3C76B2;
 border: 1px solid #2B547F;
 text-align: right;
 vertical-align: middle;
 text-decoration: none;
}