Miscellaneous Hacks - Floating Side Menu

Floating Side Menu

This mod is no longer supported...

Origin: DynamicDrive.com
Original Script: Omni Slide Menu
? John Davenport Scheuer
* Adapted from Dynamic-FX Slide-In Menu (v 6.5) script
by maXimus
Supported Browsers: FF1+ IE5+ Opr7+

This mod has been tested and works on vbulletin version 3.6.8 PL2.
This is a DHTML script for general forum use. Do not ask if it can be used for certain User Groups or given Permissions.

Features:

This mod places a floating menu on the right, or left of all of your forum pages. To place it on the left, edit the following code in menuItems.js:

Find...

menupos:'right',

Replace with...

menupos:'left',

Edits:

• Edit menuItems.js for links and colors
• Edit mmenu.js for bar, headers and other variables
• Edit forum header template(s)
• Instructions included within attached .zip file

Customization:

• menuItems.js: use this file to name your menu and create your links
• mmenu.js: use this file to customize the look of your menu
• Refer to the "Properties" page for variable descriptions
• Refer to the code below to adjust your link attributes within the menu (i.e., link text color, hover, visited). The code below is what you will be putting at the top of your forum's header template. Items in red are editable:

<style type="text/css">
                            /*Menu Links*/

/*NOTE: anything not specified for the #(menu id's) a selector and its pseudo classes
may be inherited in some browsers from other 'a' element styles (if any) on the page*/

#kbmenu3 a { /*Menu3 Links*/
color:black;
background-color:white;
text-decoration:none;
text-indent:1ex;
}
#kbmenu3 a:hover {
color:black;background-color:#FFFF99;
}
#kbmenu3 a:active	{color:black;text-decoration:none;}
#kbmenu3 a:visited	{color:black;text-decoration:none;}


                           /*End Menu Links*/
</style>
<script src="mmenu.js" type="text/javascript"></script>
<script src="menuItems.js" type="text/javascript">

/***********************************************
* Omni Slide Menu script - ? John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* very freely adapted from Dynamic-FX Slide-In Menu (v 6.5) script- by maXimus
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>

Live Demo: Demo

Hope you like this simple little mod...if so, please, don't forget to rate it.

[Saviour]

Fungsten...

Change the code back and let me know if the menu now appears in your forum.

Also...are you trying to get the menu to appear within a CMS...like vbAdvanced?

[yoyoyoyo]

many people have blogs, project tools, vba links, photopost, vba gallery, etc. posted outside the forum directory, or at the root level. I think it is best to change the code from:

<script src="mmenu.js" type="text/javascript"></script>
<script src="menuItems.js" type="text/javascript">

to:

<script src="$vboptions[bburl]/forum/mmenu.js" type="text/javascript"></script>
<script src="$vboptions[bburl]/forum/menuItems.js" type="text/javascript">

to avoid any problems like that, and to have the floating side menu appear in every part of your forum. If you do not want the floating sidebar to appear in those places, and only in your forum directory, then do not make that change.

[Saviour]

And a big "Thank You" goes out to yoyoyoyo for making that post.

[Fungsten]

Originally Posted by Saviour

Fungsten...

Change the code back and let me know if the menu now appears in your forum.

Also...are you trying to get the menu to appear within a CMS...like vbAdvanced?

1. I changed it back and it worked.
2. Whatever the code does.

[MR.BOSS]

thanks for this hack, but where should i upload the 2 files exactly?

[stationar]

How can I make this menu to also appear in VBadvanced pages?

In "Head" template replace relative links with constant ones:

(Add your address in places, marked red)

src="http://www.yoursite.com/forum/mmenu.js"
src="http://www.yoursite.com/forum/menuItems.js"

[Saviour]

Originally Posted by MR.BOSS

thanks for this hack, but where should i upload the 2 files exactly?

If you are uploading them for use on just your forum...upload them to the root of your forum directory.

Are you going to be using the menu anywhere else? Do you use vbAdvanced or any other CMS hack? If so...read the post just before this one.

Did you read the directions provided in the text file included in the zipped attachment?

[Saviour]

FLOATING SIDE MENU TIP

This tip is for those who are already using this mod, but have different skins within their forum.

Hopefully, everyone who has downloaded and installed this mod is getting used to the variable changes and adapting the menu to whatever theme they have installed within their forum.

Not to confuse anyone, but did you know you can rename the two javascript files included in this mod and then use them to customize a separate menu for another theme being used within the same forum?

1. Simply rename the two javascript files within the zipped folder of this mod...and edit them by changing any of the related variables to match the style of your other theme.

2. Upload the renamed javascript files to your forum's root directory. You now have 2 sets of the same javascript...both with different names...and both edited to match the other skin you may be using on your forum.

3. Edit the script you will be placing in your skin's header template(s) to point to the new scripts. No need to change the name of the menu within that script.

4. Now copy the script to the beginning of the skin's header template...save your template changes...and, Voila! You have a new menu that matches the look of another skin.

If you'd like a live example, visit the Saviour PC Forum. Do you see the menu for my default skin?

Go to the bottom of the page and choose vbulletin's default skin...notice the new menu?

Pretty cool, huh?

Enjoy!

[firstrebel]

How can I make the menu tab thinner please. Great work, thanks.

Bob

[Saviour]

Originally Posted by firstrebel

How can I make the menu tab thinner please. Great work, thanks.

Bob

Bob...

Look for this code in the menu.js file:

if(!o.barwidth) {o.barwidth=22};

Change the number to the width you desire...