Innovative Mouseover Tabs Menu 3.8

[TheLastSuperman]

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 (http://www.dynamicdrive.com/forums/showthread.php?p=172745#post172745)).

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 :D.

Demo 1: Click Here (http://www.tournamentgamingworld.com/online/index.php)
Demo 2: Click Here (http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm)

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

Link to full details by Dynamic Drive --> Click Here (http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm)

*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)

What's the difference between your addon and the code by dd?
By default the dd code will not show the active state of the tabs on dynamic pages, how does your addon handle this?

Should be no changes minus how I coded it :D

Basically like my previous mod "TGW DD Drop Down Panel" , I included a "UPLOAD" Folder w/ the original code & a link to their page for the script w/ full details on how to customize HOWEVER I also included a folder called "SMANsUPLOAD" for users to see how I tweaked etc but most links were changed to simply "http://www.tournamentgamingworld.com/online" and my form of the code has changed already ;)

Also if you visit my forum i.e. Demo #1 and your mouse does not hover over an image it remains a blank menu (check :D) plus the loading message displays from time to time if your page loads slightly slower than last time :D.

Basically this mod just shows you how you could implement the script. MANY users on VB.org are just listed as members and are not coders but some w/ a slight amount of experience in html or who have just dabbled can get ANY of my recent mods featuring DD Scripts to work in MANY ways if they just tinker :D

Did that answer your question even though I replied w/ a novel lol???

Thanks for the Install :D

TheLastSuperman :rolleyes:
http://www.innovationbyinstinct.com



https://vborg.vbsupport.ru/external/2014/06/21.png

[TheLastSuperman]

* Reserved

[TheLastSuperman]

** Reserved

[tafreeh]

sounds goood, but i m gonna wait for at least 10 positive reviews :)

[Vackrick]

good work

thank^^

[TheLastSuperman]

sounds goood, but i m gonna wait for at least 10 positive reviews :)

Early Birds Get the Worm ;)

good work

thank^^

Thanks for my part but the rest goes to DD :D!

[TheLastSuperman]

Bump, Updated w/ Screenshot :D

[Alien]

Very nicely done, I'll have use for this!

[TheLastSuperman]

Very nicely done, I'll have use for this!

Enjoy :D :cool:

[TheLastSuperman]

nice job mann

Thanks :D hope you enjoy!

[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]

nice, thank you!

installed

Your Welcome!

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]

thank u,

No problem, enjoy :D

[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]

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 :D

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.

[TheLastSuperman]

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

what I did was put that image on the left (the one that's kinda green w/ rounded corners) in <td> tags, then the same w/ the menu so it would be sorta centered.

To get the box below to center simply add the size of your images plus about 5px, that total width needs to be changed in the css for the box that shows the links when you hover, I'm @ work now and can't view the files unless I DL and all that so let me get back to you this afternoon if your not sure what I mean :p but try looking within the files and simply tinker, besides if you mess some code up you still have the original zip file!

S-MAN

[dancue]

Alright, finally done with mine.

I centered it by putting a width in the <td> tags.

You can put my site up for a demo if you'd like.

here. (http://www.unifiedchamp.com)

If anyone on there can test this on a pc I'd like to know if all 6 images are in one row. I only have a mac, and would like to know if it works with pc's browsers including IE.

[TheLastSuperman]

Alright, finally done with mine.

I centered it by putting a width in the <td> tags.

You can put my site up for a demo if you'd like.

here. (http://www.unifiedchamp.com)

If anyone on there can test this on a pc I'd like to know if all 6 images are in one row. I only have a mac, and would like to know if it works with pc's browsers including IE.

For me using Firefox = No, 4 up top, two bottom on the left.

I used 65 x 65 I think.... yours are currently 100px ? 100px

Now remember what I said about the box below the images... you can tinker w/ the size to get the images to fit in one row. The only thing w/ any type of menu is the users screen resolution so you can have thousands of users seeing one row via a 1024 x 768 resolution but if someone comes in w/ 800 x 600 you'll hear about it :p

S-MAN

[dancue]

What resolution did you look at it with? It worked fine for me on firefox.

[dancue]

I did a bit more tweaking. What about now?

[TheLastSuperman]

I did a bit more tweaking. What about now?

@ Home 1920 or 1980 by something lol... I'm on a 40" but I shrink my windows to be about 1024 x 768 as that is the most common screen size besides 800 x 600.

At work now on Firefox Portable it looks good, that's on 1024 x 768 but I'm running this on Sun xVM which shrinks the window but it still looks good, will confirm when home!

[dancue]

Thanks for going out of your way and doing this. I love the mod by the way!

[RTMdotORG]

when you're viewing a forum, can you still see the "spider" in the navbar? showing the forum your in and etc...

[TheLastSuperman]

when you're viewing a forum, can you still see the "spider" in the navbar? showing the forum your in and etc...

It's just for navigation, so basically your clicking an image that is a link, also in IE you can remove the blue border by adding this to the a href/img code:

style="border-style: none"

Example for reference:

<a href="http://www.yoursite.com/forums/forumdisplay.php?f=1">
<img src="images/demo1.png" style="border-style: none"/>
</a>

OR a better solution for local, internal links:

<a href="forumdisplay.php?f=1">
<img src="images/demo1.png" style="border-style: none"/>
</a>

So think of it as the tabs you've seen before except it's not as in-depth and refreshes each time, basically simple navigation menu w/ lots of ways to customize.

S-MAN

(Next time PM me man w/ ?'s if I don't reply asap!)

[FreshFroot]

Really nice idea.. I may have a use for it later.

Thanks a lot. :)