How To Add Drop Down Menus To Your Navbar

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • peterska2
    Senior Member
    • Oct 2003
    • 8869
    • 3.7.x

    How To Add Drop Down Menus To Your Navbar

    I think everyone has encountered the situation at some point or other where their navbar has got very cluttered and they are faced with either adding yet another navbar, or adding some drop down menus to group some items.

    This tutorial explains how to create an additional drop down menu in your navbar.

    Firstly, locate in your navbar template the first instance of
    Code:
    <if condition="$show['popups']">
    and add after it
    Code:
    <td id="custommenu" class="vbmenu_control">
        <a href="#">Custom Menu</a>
        <script type="text/javascript">
            vbmenu_register("custommenu");
        </script>
    </td>
    Replace Custom Menu with the title for this menu which you want displayed on your navbar and custommenu with the name that you want to give your link. Note that spaces are not to be used as this will break the connection with the actual menu.

    Next, in your navbar template find
    Code:
    <!-- NAVBAR POPUP MENUS -->
    and add after it
    Code:
    <div class="vbmenu_popup" id="custommenu_menu" style="display:none">
    <table cellpadding="4" cellspacing="1" border="0">
            <tr>
                <td class="thead">Custom Menu</td>
            </tr>
            <tr>
                <td class="vbmenu_option" title="nohilite">
    content row
    </td>
    </tr>
    </table>
    </div>
    Again replace custommenu with the name given to your link. Make sure that you leave the _menu after it as this identifies it as the menu part of the link. Also replace Custom Menu again with the title that you have used for your link.

    The content row should be replaced with the actual menu item that you want to have in your new drop down menu.

    Repeat the code
    Code:
    <tr>
                <td class="vbmenu_option" title="nohilite">
    content row
    </td>
    </tr>
    as required to add additional links onto your menu.

    If you wish to break your menu into sections like the quick links use then add
    Code:
    <tr>
                <td class="thead">Custom Menu</td>
            </tr>
    everywhere that you wish to add a new header.

    The content added should be in the normal HTML format for links.



    If you wish to add more than one menu, repeat the process for each one, ensuring that you use a different name for each menu otherwise they will not function correctly.


    I hope you find this useful.
widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
Working...