[CB] Adjustable Custom Menu Bar in Welcome Table

[CB] Adjustable Custom Menu Bar in Welcome Table Jul 4, 2009 22:59:07 GMT -8

Post by SubDevo on Jul 4, 2009 22:59:07 GMT -8

Adjustable Custom Menu Bar in Welcome Table by SubDevo
Tested in IE, FF, Opera, Safari and Chrome.

Features:

Code works with text or image menu buttons.
Use an image or FLASH content for your banner logo!
Move your menu bar ANYWHERE. Not just inside the banner.
Custom divider between your menu buttons/links. (optional)
This could be a text character or an image (transparency and animated gifs supported).
Remove the "[]" from Menu items. (optional)
Ability to make your menu vertical. (See "Advanced Customizations" section)
Customize your menu bar even further with a line of CSS. (optional)
Explained in the "Advanced Customizations" section of this post.

Preparation for Code Use:

For best results, you should be using code to hide these items from your Welcome table.
Remove Forum Title, Remove "« Home »" and Remove "Hey X" message.
These are very common codes and not mine. Listed here for your convenience.
You also need to remove your logo URL from the "Modify Skin" page. You will enter your Logo URL in the code.

<script type='text/javascript'>

</script>

Variable Descriptions: Edit the Maroon portions.

var posVert=0; // Menu Vertical Position.
Enter the desired vertical position (in pixels) of the menu bar.
Negative values move it up. Positive values move it down.

var posHoriz=0; // Menu Horizontal Position.
By default, the menu bar is centered on your forum. Use negative numbers to move the menu bar to the left of center, positive values moves it to the right.

var bWidth=778; // Banner Width.
var bHeight=144; // Banner Height.
Enter your logo image width and height here. If you are using a flash file for your banner, enter the height and width of your flash content.

var bLogo="URL TO IMAGE OR FLASH FILE"; // URL to Banner Image or Flash File.
Exactly what it says! Enter the URL to your banner logo image OR the URL to a flash file.

var divider=""; // Divider Character or URL to Divider Image.
Enter your desired divider here. This can be a text character or a URL to an image. A "space" is added to both sides of the divider. If you leave this "" (code default), two spaces are inserted between your menu items.

var remBrackets=0; // Remove "[]" from Menu. 1=Yes, 0=No.
Option to remove the "[]" from text menu links and/or the "alt" text (tooltip text when you hover over it).

Enjoy!!!
SubDevo

Location: Global Header

Code: Use IMAGE or FLASH for your banner.

<script type="text/javascript">
/* Adjustable Custom Menu Bar in Welcome Table by SubDevo */
/* Global Header - Please leave this header intact. Do not repost. */
/* interoceandesigns.com or lsdp.proboards.com */

var posVert=0; // Menu Vertical Position.
var posHoriz=0; // Menu Horizontal Position.
var bWidth=778; // Banner Width.
var bHeight=144; // Banner Height.
var bLogo="URL TO IMAGE OR FLASH FILE"; // URL to Banner Image or Flash File.
var divider=""; // Divider Character or URL to Divider Image.
var remBrackets=0; // Remove "[]" from Menu. 1=Yes, 0=No.

var td=gT("td"),tb=gT("table")[0],nb="&nb"+"sp;",a=td[1].style,mI=td[5].innerHTML;
tb.style.width=bWidth;tb.rows[1].style.display="none";a.height=bHeight+"px";
divider=nb+((divider.match(/^http:\/\//i))?'<img src="'+divider+'" alt="::" \/>':divider)+nb;
var cd=document.createElement("div"),cc=document.createElement("center");
if(bLogo&&bLogo.match(/^http:\/\//i)){
if(!bLogo.match(/\.swf/i)){a.backgroundImage="url("+bLogo+")";a.width=bWidth+"px";
}else{td[1].innerHTML='<object width="'+bWidth+'" height="'+bHeight+'"><param name="movie" value="'+bLogo+'"> <param name="wmode" value="transparent"><embed src="'+bLogo+'" width="'+bWidth+'" height="'+bHeight+'" wmode="transparent"></embed></object>'+td[1].innerHTML;}
} mI=mI.replace(/a>.+?<a/gi,'a>'+divider+'<a');
cd.id="menuDiv"; cd.innerHTML=(remBrackets)?mI.replace(/(\[|\])/gi,""):mI;
with(cd.style){position="relative"; top=posVert+"px"; left=posHoriz+"px";}
cc.appendChild(cd); tb.parentNode.insertBefore(cc,tb.nextSibling);
function gT(n){var h=document.getElementsByTagName(n);return h;}
</script>

Code: Use IMAGE ONLY for your banner.
Use this if you do not need Flash support for your banner logo.

<script type="text/javascript">
/* Adjustable Custom Menu Bar in Welcome Table by SubDevo */
/* Global Header - Please leave this header intact. Do not repost. */
/* interoceandesigns.com or lsdp.proboards.com */

var posVert=0; // Menu Vertical Position.
var posHoriz=0; // Menu Horizontal Position.
var bWidth=778; // Banner Width.
var bHeight=144; // Banner Height.
var bLogo="URL TO IMAGE"; // URL to Banner Image.
var divider=""; // Divider Character or URL to Divider Image.
var remBrackets=0; // Remove "[]" from Menu. 1=Yes, 0=No.

var td=gT("td"),tb=gT("table")[0];tb.style.width=bWidth;tb.rows[1].style.display="none";
var nb="&nb"+"sp;",mI=td[5].innerHTML,a=td[1].style; a.height=bHeight+"px";
divider=nb+((divider.match(/^http:\/\//i))?'<img src="'+divider+'" alt="::" \/>':divider)+nb;
var cd=document.createElement("div"),cc=document.createElement("center");
if(bLogo&&bLogo.match(/^http:\/\//i)){a.backgroundImage="url("+bLogo+")"; a.width=bWidth+"px";}
mI=mI.replace(/a>.+?<a/gi,'a>'+divider+'<a');
cd.id="menuDiv"; cd.innerHTML=(remBrackets)?mI.replace(/(\[|\])/gi,""):mI;
with(cd.style){position="relative"; top=posVert+"px"; left=posHoriz+"px";}
cc.appendChild(cd); tb.parentNode.insertBefore(cc,tb.nextSibling);
function gT(n){var h=document.getElementsByTagName(n);return h;}
</script>

Advanced Customization:

Most users will prefer their menu bar to be transparent (code default). But some of you will want a background color/image or a border for their menu bar. No problem there. Just use a line of CSS!
Remove the items from this line that you are NOT using. For example, if you are not using a background image, remove "background-image: url(URL TO IMAGE);" from the CSS.