PDA

View Full Version : Add a Drop Down Menu - Relative Positioning


Lee Roberts
03 Oct 2008, 09:01
Ok so we have read the "Add Drop Down Menu To Navbar (http://www.vbulletin.org/forum/showthread.php?t=122523)"

and this gives us a drop down menu like this:

https://www.vbulletin.org/forum/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://www.vbulletin.org/forum/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:
<!-- NAVBAR POPUP MENUS -->

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
03 Oct 2008, 09:04
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 />

<!-- new nav bar -->
<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>
<!-- / new nav bar -->

<!-- breadcrumb, login, pm info -->
<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>&nbsp;</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">
<!-- login form -->
<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>
<!-- / login form -->
</td>
</if>
</tr>
</table>
<!-- / breadcrumb, login, pm info -->

<!-- nav buttons bar -->
<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&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars =yes,resizable=yes,width=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&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></td>
</if>
</tr>
</table>
</div>
<!-- / nav buttons bar -->

<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']">
<!-- NAVBAR POPUP MENUS -->

<!-- main menu -->
<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>
<!-- / main menu -->

<!-- community menu -->
<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>
<!-- / community menu -->

<!-- media menu -->
<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>
<!-- / media menu -->

<!-- about us menu -->
<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>
<!-- / about us menu -->

<if condition="$show['searchbuttons']">
<!-- header quick search form -->
<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>
&nbsp;
<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>
<!-- / header quick search form -->
</if>

<if condition="$show['member']">
<!-- user cp tools menu -->
<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&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars =yes,resizable=yes,width=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>
<!--<if condition="$show['avatarlink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editavatar">$vbphrase[edit_avatar]</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>
<!-- / user cp tools menu -->

<if condition="$notifications_total">
<!-- notifications menu -->
<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>
<!-- / notifications menu -->
</if>
</if>
<!-- / NAVBAR POPUP MENUS -->

<!-- PAGENAV POPUP -->
<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>
<!-- / PAGENAV POPUP -->
</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
03 Oct 2008, 10:13
Dont forget to click "installed" :)

Lee Roberts
03 Oct 2008, 11:53
Thats intresting, if you goto the main vb forums they seem to be doing this on there links. Cool ;)

Princeton
03 Oct 2008, 13:23
moving to Articles

Jaxel
14 Feb 2009, 22:38
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
25 May 2009, 19:34
I'd like a drop menu but under avatar. Is it posible?

almohd
01 Jun 2009, 09:09
Thank you

ilrglen
11 Jul 2009, 02:59
Is it possible somehow to have branches off the dropdown menu for subcatagories?

ilrglen
05 Aug 2009, 01:44
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
24 Aug 2009, 16:33
Doesnt work for me......put the codes in the specified location and no link shows up on my navbar

Lee Roberts
17 Jul 2012, 11:28
Are any of you still intrested in this or having problems?