vBAdvanced Cleaner Site Navigation Module - CSS Driven Rollovers
 

vBAdvanced Cleaner Site Navigation Module - CSS Driven Rollovers

What's new: Releasing the 3.5 version of this for 3.6.x.

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: http://www.sevenstring.org/chris/vbm...od_default.jpg This Mod: http://www.sevenstring.org/chris/vbm...od_updated.jpg


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:

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:

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:

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:

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.

Eye Candy !

:)

nice mod

Beautiful! i will install in a few minutes.. Can you get a SShot, of how it will look if you have sub-navigations?

Also, how can i increased the font size a little bit?

Here's another Demo:


Www.CarAudioJunkyard.com


I got it working!! Love this mod!!

Thanks........

Wherever you see 'font: bold 10px', up it to 12px (and so forth) until you're happy with the new size. :)

there's a demo on www.furious-angels.com too

however instead of creating seperate new modules for the site nav as you said I integrated it into the existing module by editing the adv_portal_navigationbits and adv_portal_navigation templates to integrate with your code

Can this have drop down menus tacked onto it? If I wanted 3 addition items off of Site News or something like that?

yea, i want a drop down menus like http://www.sacpaintball.com/

how do i get my site navigation to be like that, will this do something like this at mentioned in the above url

I'm pretty sure it can be done. I'll take a peek into it today/tomorrow and see if I can come up with something. :)

Sounds good. Looking forward to see it! Thanks

Also, is this possible to do without the module border around it, so there is no "Site Navigation " title or border, just so it shows only the links....

is this possible?

anyone alive?

I don't think so, since vBA formats the modules, then loads the template code inside it. The title is part of vBA, not the actual template that you edit.

Hi,can't get this to work with colours any one help...p;ease

anyone figure out how to get sub-root , so certain rollover will drop down a 2ndary menu???

Can you post your code?

(And click install ;) )

Quick question,

In what template should I change the font size to make it smaller (or larger)???

Thanks

unreal m8 great job i love it. installed and mod of the month.

which ever style you put the the code in the CSS in this step, i highlighted red what to change.

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;
}

Hello Jaycob,

Thank you very much for your response. It worked like a charm!

Regards,

so what code goes into the template your calling up called

adv_portal_clean_nav

This is the initial code to create the first link and the template.

If you want to add more links, then you would use

HTH :)

Nice Mod Chris

worked like a charm
thanks alot mate....installed

just 1 thing though..

Is it possible to change the font colour.
at the moment its the same colour as the titles and thread colour, the normal navigation I had (the 1 that came with the portal) was a different colour (orange). Is it possible to change it so I can have it in orange so it stands out?

-EDITED-

Sorry mate, did'nt read the second step (was in a rush to install...lol)
great add to my site
thanks alot

Superb hack. Much Thanks!

I'm having some customization issues though. I'm trying to add a couple of icons to the left of the text, and just can't get it to work.

Any suggestions?

Edit: Anyone???

the one problem i am having is that it dont c all this settings
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:

These settings appear when you go to ACP > vBa CMPS > Add Module.

is it possible to make it as a dropdown in the navbar?

can you show us how you did that?

A tree type menu from this would be awesome!!

How can i integrate a backgroundimage ?

thanks a lot

i have no idea how to install this lol....
i don't even know how to get to vbcmp or whatever that is...can you hel please

'vbcmp' is the Content Management and Portal System over at vBadvanced.com.

You'll need this CMPS to install this hack. This hack replaces the default Navigation module that comes with the CMPS.

How do I recreate the default adv_portal_navigation? I accidentally named the clean one navigation too and then deleted it not realizing it had overwritten the default one.


I can't get the clean one to show up correctly.

www.shatteredplanet.org

The links work but the look of it is off.

adv_portal_navigation is just the following:

I use a brand new template for this, and just disable the "stock" navigation template, using mine in it's place.

I've just installed this mod but I'm facing some strange thing with this. The backgroungs in the links are not filled like they should.
This is the code I'm using for this template and that's pretty much the same as original.

Any ideas of why this is happening ?

Thanks........