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)

[TheLastSuperman]

Originally Posted by dancue

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

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]

Originally Posted by 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.

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

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]

Originally Posted by dancue

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]

Originally Posted by RTMdotORG

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.