Manual Add Navbar Links [Plus Image Menu]

Manual Add Navbar Links [Plus Image Menu]

Mod Version: 1.00, by SoltanWorld

vB Version: 4.x.x	Rating: (3 votes - 5.00 average)	Installs: 23
Released: 16 Jul 2010	Last Update: Never	Downloads: 0
Not Supported Template Edits Code Changes

This solution allow you to add links in navbar by editing navbar template yourself :

Some Hacks and Modification that you have installed on your forum, adds a link in the middle of navbar, so you can easily have one :

This is suitable for forumes with image navbar like mine : http://soltanworld.com

If you have use this Solution do not forget to mark az installed
----------------------------------------------------------------

- How to add links

To add Links in navbar you should first know some information about navbar and navtabs

some phrase like :

{vb:raw template_hook.navtab_start}
{vb:raw template_hook.navtab_middle}{vb:raw template_hook.navtab_end}

Q:What does this phrases mean?

A: First Phrase {vb:raw template_hook.navtab_start}, is the start of navtabs. Befor This Phrase means that you link would appear always the first one and the ones you put after this phrase due to how you put the links in order would be sortet in navtabs .
Any Links you put in order after {vb:raw template_hook.navtab_start} untill this phrase would be shown as you did : {vb:raw template_hook.navtab_middle} , And after this phrase like the start any links after this would be sorted as middle of navtabs, so you can have separator between items you want to add betweens.
And if you want to add a link at the end of navtabs you should find this phrase {vb:raw template_hook.navtab_end} and add you link before this phrase.

e.g :

Code:

 {vb:raw template_hook.navtab_start}
<vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT !=  'search'">
             <li class="selected"><a class="navtab" href="link">title</a>
         <vb:else />
             <li><a class="navtab" href="link">title</a></li>
         </vb:if>
{vb:raw template_hook.navtab_middle}<vb:if condition="!$vboptions['selectednavtab'] AND  THIS_SCRIPT !=  'search'">
             <li class="selected"><a class="navtab" href="link">title</a>
         <vb:else />
             <li><a class="navtab" href="link">title</a></li>
         </vb:if>
{vb:raw template_hook.navtab_end}

-For Navbar menu - Sub Menu

Each Navtab link can contains submenu which calles navbar and popup menu

for navbar (under navtabs) items you should use this :

Notice : to add this in navtabs sub menu, you should add this before <vb:else> Please follow the example

Code:

<li><a class="navtab" href="YourLink">Link Title</a>
<ul class="floatcontainer">
                    {vb:raw template_hook.navbar_start}
                        <li><a href="link">title</a></li>
                    {vb:raw template_hook.navbar_end}
                </ul>
</li>

and for navbar child menu you can use this as popup menu :

Code:

<li><a class="navtab" href="YourLink">Link Title</a>
<li class="popupmenu">
                        <a href="javascript://" class="popupctrl">navbar link title</a>
                        <ul class="popupbody popuphover">
                            <li><a href="link">sub menu title 1</a></li>
                            <li><a href="link">sub menu title 2</a></li>
                            <li><a href="link">sub menu title 3</a></li>
                        </ul>
                    </li>
</li>

e.g :

Navtab + Navbar + Popup menu

Code:

{vb:raw template_hook.navtab_start}
 <vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT !=  'search'">
              <li class="selected"><a class="navtab" href="link">title</a></li>
          <vb:else />
<li><a class="navtab" href="link">title</a></li>
          </vb:if>
{vb:raw template_hook.navtab_middle}
 <vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT !=  'search'">     
    <li><a class="navtab" href="link">title</a>          
        <ul class="floatcontainer">
            {vb:raw template_hook.navbar_start}
                <li><a href="link">sample navbar item</a></li>
                    <li class="popupmenu">
                        <a href="javascript://" class="popupctrl">contain popup menu item</a>
                        <ul class="popupbody popuphover">
                            <li><a href="link">title</a></li>
                            <li><a href="link">title</a></li>
                            <li><a href="link">title</a></li>
                            <li><a href="link">title</a></li>
                        </ul>
                    </li>
            {vb:raw template_hook.navbar_end} 
        </ul>
            </li>
<vb:else />
              </li>
    <li><a class="navtab" href="link">title</a></li>
          </vb:if>
{vb:raw template_hook.navtab_end}

-For Image Navtabs :

First of all you need to edit your css file and Stylevar (navbar) to set your desired setting and then You should replace text with this tag in navbar template:
<img src="link">

like :

Code:

  
  <vb:if condition="!$vboptions['selectednavtab'] AND THIS_SCRIPT !=  'search'">
               <li class="selected"><a class="navtab" href=" Link

Code:

"><img src="link"></a>
           <vb:else />
               <li><a class="navtab" href="link">title</a></li>
           </vb:if>

If you have use this Solution do not forget to mark az installed

Download

No files for download.

Addons

[SW] Ultimate Image Navbar

Supporters / CoAuthors

SoltanWorld

Screenshots

Miscellaneous Hacks Links Directory Navbar Drop-Down Menu	vBulletin 3.8 Add-ons
My Posts link in Quick Links navbar menu	vBulletin 3.0 Template Modifications

vBulletin LTS