Major Additions - Innovative Mouseover Tabs Menu 3.8

Innovative Mouseover Tabs Menu

Mod Version: 0.0.1
Compatible vB version: 3.6.x , 3.7.x , 3.8.x

DESCRIPTION:
This is a Mouseover Tabs Menu, code developed by Dynamic Drive for use on personal and commercial websites (Special thanks to my Dynamic Drive for allowing me to use this script! Please see here for approval --> Approved by DD).

The code is stable and works quite well, I cannot however give permissions to re-use the code as I normally do - sorry but it would break Dynamic Drives Terms of Use and as you can see I did obtain permission before attempting!

FEATURES:
Allows you to create a tab menu! Basically within the <div> tags you create your menu, you can change the text to images via the <img> tags and also add in your own <a href="yourlinkhere"/>Text or Image Tag & Some VB code</a>.

Example:

<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="http://www.javascriptkit.com" rel="gotsubmenu[selected]">JavaScript Kit</a></li>
<li><a href="http://www.cssdrive.com" rel="gotsubmenu">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">No Sub Menu</a></li>
</ul>
</div>

Additional Options:

- A corresponding sub menu container DIV.
- 2 ways to set the default tab selected when the page loads.
- Setup A Quick Forum Jump Menu.
- Add in a Help Section or something similar etc.
- Create something unique!

Pretty much your imagination is the limit
Please see Demo's my forum is Demo 1, look at the top for the images in the navbar menu where I have replaced the main forums title (left of Welcome YourName/Private Messages .

Demo 1: Click Here
Demo 2: Click Here

Demo 2 = Scroll Down and find the word word "Demo:" then navigate the menu.

Link to full details by Dynamic Drive --> Click Here

*Attention* Please view the first page as the 2nd and 3rd post were reserved and contain additional information.

Notes by Member's after install....(from 3.7 thread)

[Jasem]

nice, thank you!

installed

[trickfly]

are the tabs done in ajax ? i want something like this: www.hackforums.net

does this mod do the same ?

i want ajax tabs, so member can from forum to forum etc.. just like www.namepros.com

please help

[TheLastSuperman]

Originally Posted by Jasem

nice, thank you!

installed

Your Welcome!

Originally Posted by trickfly

are the tabs done in ajax ? i want something like this: www.hackforums.net

does this mod do the same ?

i want ajax tabs, so member can from forum to forum etc.. just like www.namepros.com

please help

Not the same, it seems they simply coded up some images w/ links to the right of each, simple yet effective!

The other site I did not see a menu similar to what was on the other, I apologize for the late reply but let me know if you have something by now or still need assistance!

S-MAN

[lm3a.net]

thank u,

[TheLastSuperman]

Originally Posted by lm3a.net

thank u,

No problem, enjoy

[dancue]

Alright, I'm gonna give this a try now, but I'm not understanding how to get it to use images instead of the words. What did you do to achieve this?

[dancue]

nevermind...I figured it out....

Now...How do I place it in the center, like your site has now?

[TheLastSuperman]

Originally Posted by dancue

Alright, I'm gonna give this a try now, but I'm not understanding how to get it to use images instead of the words. What did you do to achieve this?

Simple html my friend

So... if you ever want to do an image instead of text...

Example:

<a href="http://www.yoursite.com">This is the TEXT</a>

Now remove the text and replace w/ an image code to call the image!

<a href="http://www.yoursite.com"><img src="http://www.yoursite.com/images/image1.png"></a>

And your done!

More info included in the INSTALL.txt file and I also include a floder named SMANsUPLOAD to see how I modified it from the original!

/*======================================================================*\
|| #################################################################### ||
|| # [TGW] DD Mouseover Tabs Menu v0.0.1 ? by TheLastSuperman         # ||
|| # ---------------------------------------------------------------- # ||
|| # For use with vBulletin Version 3.6.x - 3.7.x - 3.8.x             # ||
|| # http://www.vbulletin.com | http://www.vbulletin.com/license.html # ||
|| #################################################################### ||
\*======================================================================*/

Hack Version: 0.0.1
Compatible vB version: 3.6.x - 3.7.x - 3.8.x

Installation:

Step 1: Unzip the files to a directory on your computer.

Step 2: Upload the files in UPLOAD folder to your forums directory (AFTER YOU MODIFY via the instructions @ http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm
 
 Directory structure:
  {ROOT}/mouseovertabs.css
  {ROOT}/mouseovertabs.js
  {ROOT}/submenucontents.htm

Step 3: Edit Templates
 - Style Manager --> Header

At the VERY TOP or Find:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Add Below:

<link rel="stylesheet" type="text/css" href="mouseovertabs.css" />

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

/***********************************************
* Mouseover Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


 - NOW, you have several options!

-- Paste this next code into your Navbar for it to be up top like mine...

OR

-- Find a place and tinker ;) the sky's the limit :D

Here's the code (now try the 2 above options):

<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="http://www.javascriptkit.com" rel="gotsubmenu[selected]">JavaScript Kit</a></li>
<li><a href="http://www.cssdrive.com" rel="gotsubmenu">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">No Sub Menu</a></li>
</ul>
</div>

<div id="mysubmenuarea" class="tabsmenucontentclass">

<!--1st link within submenu container should point to the external submenu contents file-->
<a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>

</div>

<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)

</script>

If you want that in the Navbar like mine then

FIND (or similar):

<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"></a>

<strong>

and paste the above code below the <strong> tags

Of course you can modify/replace any of the images and it is all nearly completely customizable via the files in the UPLOAD folder i.e. the CSS and JS files!

I have included a Folder named SMANsUPLOAD so you can see how I modified it for use and compare, please review if needed.

Also please Reference Dynamic Drives Information for further information --> http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm

Step 4: Enjoy your new hack, give me feedback, and click install.

TheLastSuperman - Tournament Gaming World

Hopefully that helps! anything else just post back or if you see something you like on the DEMO site just ask!

MY VIDEO DIRECTORY MOD to be released soon as well so everyone look for it!

S-MAN

[dancue]

I tried pasting the code where you specified and it puts it on the far left with the navbits still there.

*edit*

I really should get some sleep. Sorry. got it to work.

[dancue]

How can I center the images? I've been trying for the past few hours with no luck.