Navbar, dropdown menu!

[In need]

Hi,

I was wondering if it's possible to make one of the options I have on my navbar menu, to drop down? It's default for Search and Quick Links, is it possible to do the same for others? If so, how?

Kind regards,

Mr. Need.

[Freesteyelz]

Sure. The navbar template is the best place to look at the popup menu routines. Such as the Quick Links link below:


<if condition="$show['popups']">
<if condition="$show['member']">
<td id="usercptools" class="vbmenu_control"><a href="$show[nojs_link]#usercptools">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td>
</if>
</if>


The key is the "ID". In the above code you'll find twice "usercptools". That is how you identify your popup menu. So, let's say you want to create a new popup menu called "In_need" you'd do this:


<if condition="$show['popups']">
<td id="In_need" class="vbmenu_control"><a href="$show[nojs_link]#In_need">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("In_need"); </script></td>
</if>




To make it work you'll need to add in the popup bits. It's better to place this code at the bottom of the template. For the navbar template look for:


<!-- NAVBAR POPUP MENUS -->


Below that add:


<!-- In_need popup menu -->
<div class="vbmenu_popup" id="In_need_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead">Menu Header Here...</td></tr>
<tr><td class="vbmenu_option"><a href="link_URL_here">Link 1 here...</a></td></tr>
<tr><td class="vbmenu_option"><a href="link_URL_here">Link 2 here...</a></td></tr>
<tr><td class="vbmenu_option"><a href="link_URL_here">Link 3 here...</a></td></tr>
</table>
</div>
<!-- / In_need popup menu -->


The "ID" is case sensitive so notice that I've used your name which has a capital "I". Try this code out. Of course you'll need to add in the variables (e.g., URL, Link names). :)

[In need]

Hmm, It looks ok, but when I click on it, nothing comes down? The menu does not come down. I've added all the links and link names in, and the ID is also the same on both pages. Any ideas?

[Freesteyelz]

Hmm. This:


<if condition="$show['popups']">
<td id="In_need" class="vbmenu_control"><a href="$show[nojs_link]#In_need">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("In_need"); </script></td>
</if>


Should have been this:

<if condition="$show['popups']">
<td id="In_need" class="vbmenu_control"><a href="$show[nojs_link]#In_need">In_need's Menu</a> <script type="text/javascript"> vbmenu_register("In_need"); </script></td>
</if>


Though, that has nothing to do with your problem. I just rephrased "Quick Links" to "In_need's Menu". :)

Now, going back to your question I cut and pasted the exact codes in my navbar template and it worked. When you say "both pages" where exactly did you place the codes? For troubleshooting, can you please provide the templates and codes that you used. :)

[Freesteyelz]

Ahh. For it to work properly both codes need to be in the same template. Since your link is in the Header template remove your code in the navbar template. Then at the bottom of your Header template after:


<!-- /logo -->


Add

<if condition="$show['popups']">
<!-- Audio popup menu -->
<div class="vbmenu_popup" id="Audio" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead">Page</td></tr>
<tr><td class="vbmenu_option"><a href="http://www.uponsunnah.com/lectures.php">Lectures</a></td></tr>
<tr><td class="vbmenu_option"><a href="http://www.uponsunnah.com/quran.php">Qur'an</a></td></tr>
<tr><td class="vbmenu_option"><a href="http://www.uponsunnah.com/arabic.php">Learn Arabic</a></td></tr>
</table>
</div>
<!-- / Audio popup menu -->
</if>



BTW...If the links you are calling are within your domain, not an external domain, I suggest removing the "http://www.uponsunnah.com". It's just added server resources when you loop internal links.

[In need]

I put the code there, it still doesn't work :( It appears on the forum, but when I click on it, nothing drops down.

I don't see why it shouldn't work with the navbar template, the search and quicklinks does?

[Freesteyelz]

Ooops. We forgot the "_menu". So...

Replace:

<if condition="$show['popups']">
<!-- Audio popup menu -->
<div class="vbmenu_popup" id="Audio" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead">Page</td></tr>
<tr><td class="vbmenu_option"><a href="http://www.uponsunnah.com/lectures.php">Lectures</a></td></tr>
<tr><td class="vbmenu_option"><a href="http://www.uponsunnah.com/quran.php">Qur'an</a></td></tr>
<tr><td class="vbmenu_option"><a href="http://www.uponsunnah.com/arabic.php">Learn Arabic</a></td></tr>
</table>
</div>
<!-- / Audio popup menu -->
</if>


With

<if condition="$show['popups']">
<!-- Audio popup menu -->
<div class="vbmenu_popup" id="Audio_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead">Page</td></tr>
<tr><td class="vbmenu_option"><a href="http://www.uponsunnah.com/lectures.php">Lectures</a></td></tr>
<tr><td class="vbmenu_option"><a href="http://www.uponsunnah.com/quran.php">Qur'an</a></td></tr>
<tr><td class="vbmenu_option"><a href="http://www.uponsunnah.com/arabic.php">Learn Arabic</a></td></tr>
</table>
</div>
<!-- / Audio popup menu -->
</if>

[In need]

:banana: It works! :cool: Thank you!

[Freesteyelz]

Glad you got it working. :)

[dwbro1]

Ok I'm doing something wrong here and cannot find it can you please help. It is adding the Gallery button and drop down. I'm going to add a few of these drop downs one for gallery one for links and a misc one. I know I need to add the IF statement for show popups and I will if I can get this working. I just plan on adding the IF / ELSE and either show the button with the down arrow or a gallery button that links directly to the gallery main page. I'm assuming this would be right.



<!-- set below for skin width-->
<table width="753" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" align="left" valign="top">

<div id="brd_outer">
<div id="brd_in">


<!-- begin iSkin header / logo is controlled via #logo in main CSS file -->

<div id="hdr_bdr">
<div id="hdr"><div id="logo"></div></div>
<div id="hdr_btm"></div>
</div>
<div id="nav_back">
<table width="339" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="43" height="29"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img id="nav_home" src="$stylevar[imgdir_misc]/nav_home.gif" width="43" height="29" border="0" alt="" /></a></td>


<td width="67" height="29"><a href="usercp.php$session[sessionurl_q]"><img id="nav_cp" src="$stylevar[imgdir_misc]/nav_cp.gif" width="67" height="29" border="0" alt="" /></a></td>
<if condition="$show['registerbutton']">
<td width="67" height="29"><a href="register.php$session[sessionurl_q]" rel="nofollow"><img id="nav_reg" src="$stylevar[imgdir_misc]/nav_reg.gif" width="67" height="29" border="0" alt="" /></a></td>
<else />




<td width="70" height="29" id="usercptools"><a href="$show[nojs_link]#usercptools"><img id="nav_menu" src="$stylevar[imgdir_misc]/nav_forums.gif" width="69" height="29" border="0" alt="" /></a><script type="text/javascript"> vbmenu_register("usercptools", 1); </script></td>
</if>
<!-- Gallery Button -->
<td width="76" height="29" id="gallery_menu"><a href="$show[nojs_link]#gallery"><img id="nav_menu" src="$stylevar[imgdir_misc]/nav_gallery.gif" width="75" height="29" border="0" alt="" /></a> <script type="text/javascript"> vbmenu_register("gallery"); </script></td>
<!-- / Gallery button -->

<td width="67" height="29"><a href="memberlist.php$session[sessionurl_q]"><img id="nav_members" src="$stylevar[imgdir_misc]/nav_members.gif" width="67" height="29" border="0" alt="" /></a></td>
<td width="69" height="29"><a href="../gallery/index.php$session[sessionurl_q]"><img id="nav_cal" src="$stylevar[imgdir_misc]/nav_gallery.gif" width="68" height="29" border="0" alt="" /></a></td>
<td width="50" height="29"><a href="../links/index.php"><img id="nav_cal" src="$stylevar[imgdir_misc]/nav_links.gif" width="49" height="29" border="0" alt="" /></a></td>
<td width="75" height="29"><a href="calendar.php$session[sessionurl_q]"><img id="nav_cal" src="$stylevar[imgdir_misc]/nav_cal.gif" width="75" height="29" border="0" alt="" /></a></td>
<td width="59" height="29" id="navbar_search"><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow"><img id="nav_search" src="$stylevar[imgdir_misc]/nav_search.gif" width="59" height="29" border="0" alt="" /></a><script type="text/javascript"> vbmenu_register("navbar_search", 1); </script></td>
<td width="35" height="29"><a href="faq.php$session[sessionurl_q]" accesskey="5"><img id="nav_faq" src="$stylevar[imgdir_misc]/nav_faq.gif" width="35" height="29" border="0" alt="" /></a></td>
<td width="2" height="29"><img id="nav_rs" src="$stylevar[imgdir_misc]/nav_rs.gif" width="2" height="29" alt="" /></td>
</tr>
</table>
</div>

<if condition="$show['popups']">
<!-- NAVBAR POPUP MENUS -->

<if condition="$show['searchbuttons']">
<!-- header quick search form -->
<div class="vbmenu_popup" id="navbar_search_menu" style="display:none">
<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" method="post">
<input type="hidden" name="do" value="process" />
<input type="hidden" name="showposts" value="0" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="text" class="bginput" name="query" size="20" />&nbsp;$gobutton<br />
</form>
</td>
</tr>
<tr>
<td class="vbmenu_option"><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[advanced_search]:</a></td>
</tr>
<tr>
<td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]:</a></td>
</tr>
<tr>
<td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]:</a></td>
</tr>
</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">
<table cellpadding="4" cellspacing="1" border="0">

<tr><td class="thead">$vbphrase[quick_links]</td></tr> <!-- Added Option -->
<tr><td class="vbmenu_option"><a href="forum_index.php">Forums Home</a></td></tr>
<!-- End Added Option -->
<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,me nubar=no,toolbar=no,scrollbars=yes,resizable=yes,w idth=250,height=300'); return false;">$vbphrase[open_buddy_list]</a></td></tr>

<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_profile]</a></td></tr>
<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editoptions">$vbphrase[edit_options]</a></td></tr>

<tr><td class="thead">$vbphrase[miscellaneous]</td></tr>
<if condition="$show['pmstats']"><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[my_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>

</table>
</div>
<!-- / user cp tools menu -->
</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>
<!-- Gallery Button -->
<!-- PAGENAV GALLERY -->

<div class="vbmenu_popup" id="gallery_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead">Page</td></tr>
<tr><td class="vbmenu_option"><a href="">1</a></td></tr>
<tr><td class="vbmenu_option"><a href="">2</a></td></tr>
<tr><td class="vbmenu_option"><a href="">3</a></td></tr>
</table>
</div>


<!-- / PAGENAV GALLERY -->
<!-- / Gallery Button -->
<!-- content table -->
<table bgcolor="#FFFFFF" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>



$spacer_open

$_phpinclude_output
$welcomeheaders


Ok I think I got it .. Will post corrected one once I'm sure.. I still have a question about the accesskey="" field though. I only see one of those in the default template. What exactly are they used for?