vBA CMPS Cleaner Site Navigation - CSS Driven Rollovers

vBAdvanced Cleaner Site Navigation Module - CSS Driven Rollovers

What it does: Replace your default vBAdvanced navigation pane with a cross-browser, CSS driven rollover menu.

Time to install: 10 Minutes
Tested: IE, Firefox, Maxthon, Opera
Difficulty: Easy
Templates: 2
CSS Edit: 1
Demo: http://www.sevenstring.org

I wasn't happy with the stock look of the vBAdvanced portal navigation. It's very plain, and I personally like rollovers (if done properly) for adding a little bit of organic movement to static pages.

Here's the default CMPS on the left, and my module on the right. The screenshots don't really do it justice, for the full effect check out my website linked above. I am using it both for navigation and for the "Artist Reviews & Interviews" portal templates.

Default: https://vborg.vbsupport.ru/ This Mod: https://vborg.vbsupport.ru/


Step 1: Create the New Module

AdminCP -> vBA CMPS -> Add Module -> Template

Module Title: Site Navigation
Column: Left Column
Display Order: 1
Active: Yes
Update All Pages: Yes
Template to Include: (adv_portal)clean_nav
Style: (Your style)

Template content is as follows:


<tr><td class="alt1"><table border="0" width="165" class="portalnav">
<tr><td bgcolor="#444444" width="100%" onclick="window.location='http://www.youdomain.tld/forum/link.php'" style="cursor:pointer; background-color:#444444" onmouseover="this.style.backgroundColor='#555555';" onmouseout="this.style.backgroundColor='#444444';"><span class="portalnav">Link Description</span></td></tr>
</table></td></tr>

This is the WHOLE template. For each link you want to add, you will need to add the following line BEFORE the closing </table></td>, and edit it to the URL and description of the option that you are linking:


<tr><td bgcolor="#444444" width="100%" onclick="window.location='http://www.youdomain.tld/forum/link.php'" style="cursor:pointer; background-color:#444444" onmouseover="this.style.backgroundColor='#555555';" onmouseout="this.style.backgroundColor='#444444';"><span class="portalnav">Link Description</span></td></tr>

Use Module Shell Template: Yes
Usergroups: All set to yes


Other template edits:

In my example, #444444 is my ON color, and "#555555" is my OFF color. Change these to whatever you like. I also have a fixed table width in the initial table call, here:


width="165"


Edit that accordingly to match your layout.

Step two: CSS Definitions

ACP -> Styles & Templates -> Style Manager -> (Your Style) -> Main CSS

Scroll down to Additional CSS Definitions

At the bottom, Add:


.portalnav
{
color:#FFCC00;
font: bold 10px verdana;
Text-Decoration: none;
}

.portalnav a, .portalnav a:link, .portalnav a:visited, .portalnav a:hover, .portalnav a:active {

text-decoration:none;

color: #FFCC00;

font: bold 10px verdana;
}


This is for the same font and color in my demo. Change the #FFCC00 to your desired color, and edit your font CSS as desired.

Step 3: Disable your old navigation block.

ACP -> vBA CMPS -> Edit Modules -> Site Navigation

Set "Active" to No. Keep in mind that you'll have two modules named Site Navigation now, so make sure you disable the non-template driven, default module and not the one you just created.

Please click INSTALL (https://vborg.vbsupport.ru/vborg_miscactions.php?do=installhack&threadid=122646) if you are using this. It's the only recognition designers and coders get for sharing their work!

[Guest210212002]

Update #1:

I've made the changes as discussed below so that the entire row is now a clickable link. I have it running on both navigation blocks on my site here (http://www.sevenstring.org). I've also attached my entire template, in case anyone would rather simply replace my URL links and colors with their own. Keep in mind that if you use my included template, you will still need to add the CSS definitions as above.

Update #2:

I've cleaned the code up a bit more to make it Valid XHTML 1.0 Transitional, as well as to get the cursor to change in Firefox. Use the following for each option link inside your template, changing the colored bits to match your own settings:


<tr><td bgcolor="#444444" width="100%" onclick="window.location='http://www.yourdomain.tld/forum/option.php'" style="cursor:pointer; background-color:#444444" onmouseover="this.style.backgroundColor='#555555';" onmouseout="this.style.backgroundColor='#444444';"><span class="portalnav">Link Title</span></td></tr>

[Bad Bunny]

Pretty nice. From a user standpoint though, when the color changes as I hover over it, I would imagine it would be a link. The actual text is a link, but the empty space to the right appears to be a link but isn't.

[Guest210212002]

I don't have time to test it right now, but I believe this (colored code, onClick call) would do what you're looking for:


<tr><td align="left" width="100%" style="background-color:#444444" onClick="window.location='forum/whatever.php'" Style="cursor:hand" onMouseover="this.style.backgroundColor='#555555';" onMouseout="this.style.backgroundColor='#444444';">Link Title</td></tr>

[Bad Bunny]

Right, it changes color on a mouseover, but it is not actually a link. That is my issue. I would prefer it to be a tabeless design so that the empty area to the right of the links were colored.

But it looks nice. Thanks.

[Guest210212002]

Right, it changes color on a mouseover, but it is not actually a link. That is my issue. I would prefer it to be a tabeless design so that the empty area to the right of the links were colored.

But it looks nice. Thanks.

You didn't read my code, it is a link ;) I'm putting the href call into the table cell itself. I put a Style="cursor:hand" in there so you can see it. Paste this into a browser:


<html>
<head>
<title>Untitled</title>
</head>
<body>
<table summary="blah" width="120" border="1">
<tr>
<td bgcolor=white onClick="window.location='http://www.yahoo.com'" Style="cursor:hand" style="background-color:#444444" onMouseover="this.style.backgroundColor='#555555';" onMouseout="this.style.backgroundColor='#444444';">
Yahoo!</td>
</tr>
</table>
</body>
</html>


It works just as you're asking. The entire row is clickable. Here's a demo:

Click Me (http://www.sevenstring.org/chris/mouseover.htm)

Edit: I've done it to the navigation on my own page:

http://www.sevenstring.org/

[cheech4487]

Great Mod Chris-777!!! Thank You very much!!! :up:

[bada_bing]

reserved for future use

[DementedMindz]

Thank you for the mod also if you change a few things you can make it Valid XHTML 1.0 Transitional ;)

Example:


<tr>
<td class="alt1"><table border="0" width="165" class="portalnav">
<tr><td align="left" width="100%" style="background-color:#444444" onmouseover="this.style.backgroundColor='#555555';" onmouseout="this.style.backgroundColor='#444444';"><a href="http://www.yourdomain.com/forums/link.htm">Link Title</a></td></tr>
</table></td></tr>


Basiclly change onMouse to a lower case m and also add the <tr> in the begining and at the very end add a </tr>

[Guest210212002]

Thank you for the mod also if you change a few things you can make it Valid XHTML 1.0 Transitional ;)

Example:


<tr>
<td class="alt1"><table border="0" width="165" class="portalnav">
<tr><td align="left" width="100%" style="background-color:#444444" onmouseover="this.style.backgroundColor='#555555';" onmouseout="this.style.backgroundColor='#444444';"><a href="http://www.yourdomain.com/forums/link.htm">Link Title</a></td></tr>
</table></td></tr>


Basiclly change onMouse to a lower case m and also add the <tr> in the begining and at the very end add a </tr>

Updated. Thanks! :D

[EasyTarget]

nice, i'll be installing this.

[Guest210212002]

Hack and second post updated, now 100% Valid XHTML 1.0 Transitional.

[brvheart]

for some reasone I can not change the font color, could you give me a hand please?

EDIT: On the dark style is what I am referring to.

see it at www.matt21.net

[Guest210212002]

If you're using multiple styles with it, you'll need to add the CSS definitions to each style, so that the 'portalnav' CSS matches the color you're looking to use for that particular style.

I'm looking at your source, and I don't see:


.portalnav
{
color:#FFCC00;
font: bold 10px verdana;
Text-Decoration: none;
}


In your CSS. Make sure you add that in All Style Options for each style, and change the font color there to what you want the font to be.

[brvheart]

Thank you, works now :) it was a child style and apparently did not get passed down from mama ;)

[tpzone]

thanks.. installed and working on 3.6 with 2.2 cmps

[BeaufordRox]

Installed, and thanks!

The only thing my users may not like about it is that you can't use the middle mouse click to open the links in a new window with FireFox. Is there any way to change this?

[nestoras]

thanks a lot for this!its great!

[sam anders]

thanks for this :)

[eMike]

Excellent work :)
Many thanks!

[Guest210212002]

thanks.. installed and working on 3.6 with 2.2 cmps

Thanks! :D

[Guest210212002]

Probably goes without saying, but this works in 3.6.3 and with vBA 2.1.0.

[Guest210212002]

Installed, and thanks!

The only thing my users may not like about it is that you can't use the middle mouse click to open the links in a new window with FireFox. Is there any way to change this?

I'll take a look at that asap and see if I can figure out why. :)

[Netaudio]

Merci!

[Xoxideforums]

I'm curious as to why this would be done using the onmouseover, onmouseout within the <a> tag....

isn't it much cleaner, easier to alter and add, if you used the CSS attributes?

.portalnav
{
color:#FFCC00;
font: bold 10px verdana;
Text-Decoration: none;
}

.portalnav a, .portalnav a:link, .portalnav a:visited, .portalnav a:active {
text-decoration:none;
display:block;
background: #555555;
color: #FFCC00;
font: bold 10px verdana;
}

.portalnav a:hover {
background: #444444;
}

[REVHEAD]

does this work on the latest version rc2?