Add a Drop Down Menu - Relative Positioning [Archive]

Lee Roberts

10-02-2008, 10:00 PM

Ok so we have read the "Add Drop Down Menu To Navbar (https://vborg.vbsupport.ru/showthread.php?t=122523)"

and this gives us a drop down menu like this:

https://vborg.vbsupport.ru/external/2008/10/64.jpg

But we still need/want the menus to display under the Text link rather then to the left of the table cell the Text link is located in.

Like This:

https://vborg.vbsupport.ru/external/2008/10/63.jpg

This tutorial explains how to create an additional drop down menu in your default/stock vB navbar, with the drop down menu showing under the Link.

Firstly, locate in your "navbar" template the first instace of:
<if condition="$show['popups']">

Then add after it:
<td class="vbmenu_control"><a href="#" id="custommenu">Main 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:


Then add after it:
<div class="vbmenu_popup" id="custommenu_menu" style="display:none" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Main Menu</td>
</tr>
<tr><td class="vbmenu_option"><a href="http://www.mycncuk.com/index.php">Home</a></td></tr>
<tr><td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/forumdisplay.php?f=16">Site News</a></td></tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/forumdisplay.php?f=50">Links Directory</a></td></tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/search.php">Site Search</a></td></tr>
</table>
</div>

Ok so you will need to edit the links that point to my site to your own site 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.

.

Lee Roberts

10-03-2008, 07:04 AM

Now you will see that my screen shots above show a second nav bar, this is somthing else i added to my site (vB), below is a copy of my whole "navbar" template.

If you want the second nav bar then simply copy all of the code below into YOUR "navbar" template, editing as you need to obviously.

<br />


<div class="tborder" style="padding:$stylevar[cellspacing]px; border-top-width:1px; border-bottom-width:0px">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr align="center">
<if condition="$show['popups']">
<td class="vbmenu_control"><a href="#" id="mainmenu">Main Menu</a><script type="text/javascript"> vbmenu_register("mainmenu"); </script></td>
<td class="vbmenu_control"><a href="#" id="community">Community</a><script type="text/javascript"> vbmenu_register("community"); </script></td>
<td class="vbmenu_control"><a href="#" id="media">Media Gallery</a><script type="text/javascript"> vbmenu_register("media"); </script></td>
<td class="vbmenu_control"><a href="#" id="aboutus">About Us</a><script type="text/javascript"> vbmenu_register("aboutus"); </script></td>
<td align="right" class="vbmenu_control"><a href="http://www.mycncuk.com/forums/cv_rss_feeds.php"><img src="http://www.mycncuk.com/forums/images/cinvin_forum_feed_listing/rss.gif" border="0"></a></td>
</if>
</tr>
</table>
</div>



<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="alt1" width="100%">
<if condition="is_array($navbits)">
<table cellpadding="0" cellspacing="0" border="0">
<tr valign="bottom">
<td><a href="#" onclick="history.back(1); return false;"><img src="$stylevar[imgdir_misc]/navbits_start.gif" alt="$vbphrase[go_back]" border="0" /></a></td>
<td> </td>
<td width="100%"><span class="navbar"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td>
</tr>
<tr>
<td class="navbar" style="font-size:10pt; padding-top:1px" colspan="3"><if condition="$_SERVER['REQUEST_METHOD'] == 'POST'"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink_$stylevar[textdirection].gif" alt="" border="0" /><else /><a href="$navbar_reloadurl"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink_$stylevar[textdirection].gif" alt="$vbphrase[reload_this_page]" border="0" /></a></if> <strong>$navbits[lastelement]</strong></td>
</tr>
</table>
<else />
<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
</if>
</td>
<if condition="$show['member']">
<td class="alt2" nowrap="nowrap">
<div class="smallfont">
<strong><phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong><br />
<phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>

<if condition="$show['notifications'] AND $show['popups']">
<div><span id="notifications"><a href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span></div>
<script type="text/javascript"> vBmenu.register("notifications"); </script>
<else /><if condition="$show['pmstats']">
<div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>
</if></if>

<if condition="$show['pmwarning']"><div><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></div></if>
</div>
</td>
<else />
<td class="alt2" nowrap="nowrap" style="padding:0px">

<form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td class="smallfont" style="white-space: nowrap;"><label for="navbar_username">$vbphrase[username]</label></td>
<td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
<td class="smallfont" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />$vbphrase[remember_me]</label></td>
</tr>
<tr>
<td class="smallfont"><label for="navbar_password">$vbphrase[password]</label></td>
<td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td>
<td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
</tr>
</table>
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>

</td>
</if>
</tr>
</table>



<div class="tborder" style="padding:$stylevar[cellspacing]px; border-top-width:0px; border-bottom-width:1px">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr align="center">
<if condition="$show['member']">
<td class="vbmenu_control"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></td>
</if>
<if condition="$show['registerbutton']">
<td class="vbmenu_control"><a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a></td>
</if>
$template_hook[navbar_buttons_left]
<td class="vbmenu_control"><a href="faq.php$session[sessionurl_q]" accesskey="5">$vbphrase[faq]</a></td>
<if condition="$vboptions['enablememberlist']">
<td class="vbmenu_control"><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></td>
</if>
<td class="vbmenu_control"><a href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a></td>
<if condition="$show['popups']">
<if condition="$show['searchbuttons']">
<if condition="$show['member']">
<td class="vbmenu_control"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td>
<else />
<td class="vbmenu_control"><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
</if>
<td id="navbar_search" class="vbmenu_control"><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search"); </script></if></td>
</if>
<if condition="$show['member']">
<td id="usercptools" class="vbmenu_control"><a href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td>
</if>
<else />
<if condition="$show['searchbuttons']">
<td class="vbmenu_control"><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></td>
<if condition="$show['member']">
<td class="vbmenu_control"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td>
<else />
<td class="vbmenu_control"><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
</if>
</if>
<td class="vbmenu_control"><a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a></td>
<if condition="$show['member']">
<td class="vbmenu_control"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&focus=1','buddylist','statusbar=no,me nubar=no,toolbar=no,scrollbars=yes,resizable=yes,w idth=250,height=300'); return false;">$vbphrase[open_contacts]</a></td>
</if>
</if>
$template_hook[navbar_buttons_right]
<if condition="$show['member']">
<td class="vbmenu_control"><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></td>
</if>
</tr>
</table>
</div>


<br />

<if condition="$show['notices']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="thead">$vbphrase[notices]</td>
</tr>
<tr>
<td class="alt1">$notices</td>
</tr>
</table>
<br />
</if>

<if condition="$show['forumdesc']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

<tr>
<td class="alt1" width="100%"><strong>$foruminfo[title]</strong> <span class="smallfont">$foruminfo[description]</span></td>
</tr>
</table>
<br />
</if>

<if condition="$show['popups']">



<div class="vbmenu_popup" id="mainmenu_menu" style="display:none" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Main Menu</td>
</tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/index.php">Home</a></td></tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/forumdisplay.php?f=16">Site News</a></td></tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/forumdisplay.php?f=50">Links Directory</a></td></tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/search.php">Site Search</a></td></tr>
</table>
</div>



<div class="vbmenu_popup" id="community_menu" style="display:none" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Community</td>
</tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/index.php">Main Forum</a></td></tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/calendar.php">Events Calendar</a></td></tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/forumdisplay.php?f=20">User FAQ's</a></td></tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/search.php">Forum Search</a></td></tr>
</table>
</div>



<div class="vbmenu_popup" id="media_menu" style="display:none" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Media Gallery</td>
</tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/photoplog/index.php">Photo Gallery</a></td></tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/photoplog/search.php">Media Search</a></td></tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/photoplog/upload.php">Upload Photo's</a></td></tr>
</table>
</div>



<div class="vbmenu_popup" id="aboutus_menu" style="display:none" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">About Us</td>
</tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/sendmessage.php">Contact Us</a></td></tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/showgroups.php">Staff Members</a></td></tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/archive/index.php">Site Archive</a></td></tr>
<tr>
<td class="vbmenu_option"><a href="http://www.mycncuk.com/forums/cv_rss_feeds.php">RSS Manager</a></td></tr>
</table>
</div>


<if condition="$show['searchbuttons']">

<div class="vbmenu_popup" id="navbar_search_menu" style="display:none" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">$vbphrase[search_forums]</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<form action="search.php?do=process" method="post">

<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<div><input type="text" class="bginput" name="query" size="25" tabindex="1001" /><input type="submit" class="button" value="$vbphrase[go]" tabindex="1004" /></div>
<div style="margin-top:$stylevar[cellpadding]px">
<label for="rb_nb_sp0"><input type="radio" name="showposts" value="0" id="rb_nb_sp0" tabindex="1002" checked="checked" />$vbphrase[show_threads]</label>
 
<label for="rb_nb_sp1"><input type="radio" name="showposts" value="1" id="rb_nb_sp1" tabindex="1003" />$vbphrase[show_posts]</label>
</div>
</form>
</td>
</tr>
<if condition="$vboptions[threadtagging]">
<tr>
<td class="vbmenu_option"><a href="tags.php$session[sessionurl_q]" rel="nofollow">$vbphrase[tag_search]</a></td>
</tr>
</if>
<tr>
<td class="vbmenu_option"><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[advanced_search]</a></td>
</tr>
$template_hook[navbar_search_menu]
</table>
</div>

</if>

<if condition="$show['member']">

<div class="vbmenu_popup" id="usercptools_menu" style="display:none" align="$stylevar[left]">
<table cellpadding="4" cellspacing="1" border="0">

<tr><td class="thead">$vbphrase[quick_links]</td></tr>
<if condition="$vboptions['enablesearches']"><tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getdaily">$vbphrase[todays_posts]</a></td></tr></if>
<tr><td class="vbmenu_option"><a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a></td></tr>
<tr><td class="vbmenu_option"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&focus=1','buddylist','statusbar=no,me nubar=no,toolbar=no,scrollbars=yes,resizable=yes,w idth=250,height=300'); return false;">$vbphrase[open_contacts]</a></td></tr>
$template_hook[navbar_quick_links_menu_pos1]

<tr><td class="thead">$vbphrase[networking]</td></tr>
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=buddylist"><if condition="$show['friends_and_contacts']">$vbphrase[contacts_and_friends]<else />$vbphrase[contacts]</if></a></td></tr>
<if condition="$show['quick_links_groups']">
<tr><td class="vbmenu_option"><a href="group.php$session[sessionurl_q]">$vbphrase[social_groups]</a></td></tr>
</if>
<if condition="$show['quick_links_albums']">
<tr><td class="vbmenu_option"><a href="album.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[pictures_and_albums]</a></td></tr>
</if>
$template_hook[navbar_quick_links_menu_pos2]

<tr><td class="thead"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_control_panel]</a></td></tr>
<if condition="$show['siglink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editsignature">$vbphrase[edit_signature]</a></td></tr></if>

<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editprofile">$vbphrase[edit_your_details]</a></td></tr>
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editoptions">$vbphrase[edit_options]</a></td></tr>
$template_hook[navbar_quick_links_menu_pos3]

<tr><td class="thead">$vbphrase[miscellaneous]</td></tr>
<if condition="$show['pmmainlink']"><tr><td class="vbmenu_option"><a href="private.php$session[sessionurl_q]" rel="nofollow">$vbphrase[private_messages]</a></td></tr></if>
<tr><td class="vbmenu_option"><a href="subscription.php$session[sessionurl_q]" rel="nofollow">$vbphrase[subscribed_threads]</a></td></tr>
<tr><td class="vbmenu_option"><a href="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[your_profile]</a></td></tr>
<if condition="$show['wollink']"><tr><td class="vbmenu_option"><a href="online.php$session[sessionurl_q]">$vbphrase[whos_online]</a></td></tr></if>
$template_hook[navbar_quick_links_menu_pos4]

</table>
</div>


<if condition="$notifications_total">

<div class="vbmenu_popup" id="notifications_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead" colspan="2">$vbphrase[your_notifications]</td></tr>
$notifications_menubits
</table>
</div>

</if>
</if>



<div class="vbmenu_popup" id="pagenav_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead" nowrap="nowrap">$vbphrase[go_to_page]</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<form action="$vboptions[forumhome].php" method="get" onsubmit="return this.gotopage()" id="pagenav_form">
<input type="text" class="bginput" id="pagenav_itxt" style="font-size:11px" size="4" />
<input type="button" class="button" id="pagenav_ibtn" value="$vbphrase[go]" />
</form>
</td>
</tr>
</table>
</div>

</if>

$ad_location[ad_navbar_below]

Hopfully this will help quite a few of you out, any problems post here and i will support you as and when i can.

Lee

Lee Roberts

10-03-2008, 08:13 AM

Dont forget to click "installed" :)

Lee Roberts

10-03-2008, 09:53 AM

Thats intresting, if you goto the main vb forums they seem to be doing this on there links. Cool ;)

Princeton

10-03-2008, 11:23 AM

moving to Articles

Jaxel

02-14-2009, 08:38 PM

Is it possible to do this with IMAGE LINKS instead of text links?

As well... could I do this in the "HEADER" template, instead of the navbar template?

Aexo

05-25-2009, 05:34 PM

I'd like a drop menu but under avatar. Is it posible?

almohd

06-01-2009, 07:09 AM

Thank you

ilrglen

07-11-2009, 12:59 AM

Is it possible somehow to have branches off the dropdown menu for subcatagories?

ilrglen

08-04-2009, 11:44 PM

Another question, I seem to have used up vBulletin's capacity for maximum characters in the Template for my navbar because of adding to the menus. Is there anything I can do to be able to add still more?

expeditionman

08-24-2009, 02:33 PM

Doesnt work for me......put the codes in the specified location and no link shows up on my navbar

Lee Roberts

07-17-2012, 09:28 AM

Are any of you still intrested in this or having problems?