Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 3 Articles

Reply
 
Thread Tools
How To Add Drop Down Menus To Your Navbar
peterska2
Join Date: Oct 2003
Posts: 6,504

 

Manchester, UK
Show Printable Version Email this Page Subscription
peterska2 peterska2 is offline 07-29-2006, 10:00 PM

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 dropdown 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 instace 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 quicklinks 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.
Reply With Quote
  #192  
Old 01-21-2013, 05:34 AM
Digital Jedi's Avatar
Digital Jedi Digital Jedi is offline
 
Join Date: Oct 2006
Location: PopCulturalReferenceLand
Posts: 5,171
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by microbob View Post
1) So, as I understand it, I am going to leave the main headings [Green-colored code] where they currently are located (i.e., as in my previous post) in the Navbar template.
If that's where you want them, in a separate navbar, then they can technically go wherever you want. So long as everything is nested properly, they'll show up wherever you want them. Even outside the default navabar. It seems to be in it's own main div container, so you should be good as long as you've nested it properly in the overall HTML.

Quote:
2) Now, do I continue with additional heading entries using the menu code below, but where I change the heading from New York to New Jersey and rename "custommenu" to "custommenu1" [BLUE-colored code]?
Quote:
3) Where do I place this code so it shows up in the TOP-MENU in the Navbar template?
For these, the actual content of dropdown menus, these will all go in the same location as the fist one you made. That's mainly so you can find them again, and so they don't interfere with anything else. Their location is not the important part, however. Their unique identifiers are. The ID is what tells the the item clicked on which menu to display. So for example, you could just call the New York navbar link newyork:

Code:
<td id="newyork" class="vbmenu_control"><a href="#">New York</a><script type="text/javascript">vbmenu_register("newyork");</script>
</td>
See the two instances of newyork? That was where the two instances of custommenu were. This particular link is now going to execute JavaScript that's going to look for a div with the prefix newyork in its ID when someone clicks on it. So the actual menu content's id would be the one below:

Code:
<div class="vbmenu_popup" id="newyork_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">

<tr><td class="thead">New York</td></tr>

<tr><td class="vbmenu_option"><a href="http://www.caught-the-skunk.com/index.php?pageid=new-york-supporters">NY Caught-The-Skunk.com Supporters</a></td></tr>

</table>
<div>
So, you give each of your cities/menu something unique to identify them by. So long as don't use any special characters or spaces, you can call them whatever you want.

Quote:
5) Is there (1) </table> followed by (1) </div> after I'm entered all this information?
Each menu item is a div with a table inside of them, so yes. Anything opened (<tag>) will have to be properly closed (</tag>). Similar to before:

Code:
<div>
    <table>
       <tr><td>menu item</td></tr>
       <tr><td>menu item</td></tr>
    </table>
</div>
Quote:
6) Finally, I want to make each of the headings look like a button in menu bars. Is this something you can help me with? vBulletin default is ok. Don't want his image; just want the button effect. Here is the example:

https://vborg.vbsupport.ru/showthread.php?t=245441
Actually, you can still follow his tutorial, just pick the image you want to use. Open up the Style Manager as he directs and look for the Edit CSS option. Then look for the block that handles the vbmenu_control class. Because it's CSS, you can do, well, all kinds of things to the menu. But just try out as he's directed, and you should get a really good idea of what you want to do from there. Also check W3Schools for their CSS tutorials and reference guide. Their very explanatory, but very brief. Easy to quickly grasp CSS from their tutorials in my opinion.

Quote:
I want to thank you for this help. It is greatly appreciated!!! I'm just an average Joe struggling with these little changes but learning along the way.

Bob
Your welcome. I just pretend I know what I'm talking about. Wait until you interact with someone who REALLY knows what he's talking about here.
Reply With Quote
  #193  
Old 01-21-2013, 10:56 PM
microbob microbob is offline
 
Join Date: Jun 2009
Posts: 27
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

After pulling my hair out for a few hours, I finally (through trial and error) figured it out. I actually wound up deleting the GREEN CODE and worked with your suggestions. Thank God! And thanks to the Digital Jedi too! Lots of work to put in all of those drop-downs in (6) headings but I really like it. Now I don't have to work on putting the "Superfish" menu up.

Now...as far as the BUTTON EFFECT is concerned, I have found the "CSS Selector: vbmenu_control" under "Popup Menu Controls" in the Admin CP.

Very important: I do NOT want to use his image; just want to use the standard "blue" Background (#738FBF) on the entire top & bottom menus, as the button's color. Just looking for the button effect.

My current default "Extra CSS Attributes" in the "Popup Menu Controls" is currently set as:

padding 3px 6px 3px 6px
white-space: nowrap;


How do I get the button effect?

Bob
Reply With Quote
  #194  
Old 01-22-2013, 12:49 AM
Digital Jedi's Avatar
Digital Jedi Digital Jedi is offline
 
Join Date: Oct 2006
Location: PopCulturalReferenceLand
Posts: 5,171
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by microbob View Post
After pulling my hair out for a few hours, I finally (through trial and error) figured it out. I actually wound up deleting the GREEN CODE and worked with your suggestions. Thank God! And thanks to the Digital Jedi too! Lots of work to put in all of those drop-downs in (6) headings but I really like it. Now I don't have to work on putting the "Superfish" menu up.

Now...as far as the BUTTON EFFECT is concerned, I have found the "CSS Selector: vbmenu_control" under "Popup Menu Controls" in the Admin CP.

Very important: I do NOT want to use his image; just want to use the standard "blue" Background (#738FBF) on the entire top & bottom menus, as the button's color. Just looking for the button effect.

My current default "Extra CSS Attributes" in the "Popup Menu Controls" is currently set as:

padding 3px 6px 3px 6px
white-space: nowrap;


How do I get the button effect?

Bob
I think you might mean something else by "button effect" than what he's demonstrating in his tutorial. In his case, the image IS the button effect. He creates the illusion of buttons by adding a background image to that class and adjusting its padding so there appears to be spaces in between. You can still have that kind of button without a background image, it would just be solid in color.
Reply With Quote
  #195  
Old 01-22-2013, 12:57 AM
microbob microbob is offline
 
Join Date: Jun 2009
Posts: 27
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I see.

So how would I do the solid color to make it look like a button?

And/or maybe a white (or other color) vertical dividing line to separate the headings?

Bob
Reply With Quote
  #196  
Old 01-22-2013, 01:16 AM
Digital Jedi's Avatar
Digital Jedi Digital Jedi is offline
 
Join Date: Oct 2006
Location: PopCulturalReferenceLand
Posts: 5,171
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

I personally would do that by setting the left or right margins to about a pixel or so. Something like margin-left:2px;. That would put a space beside every menu item, which will be the background color of the navbar. Try something like this in the additional CSS field:

Code:
margin-left:2px; /* This puts the space beside each item with this class. */
padding:0 6px 0 6px; /* This sets the spacing inside the items with this class clockwise from the top. */
white-space:nowrap; /* This makes certain the text of the items stays on one line */
Reply With Quote
  #197  
Old 12-13-2013, 06:43 AM
dat.phan dat.phan is offline
 
Join Date: Nov 2013
Posts: 9
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

How I can do if I want add to vb5
Reply With Quote
  #198  
Old 12-13-2013, 04:56 PM
Digital Jedi's Avatar
Digital Jedi Digital Jedi is offline
 
Join Date: Oct 2006
Location: PopCulturalReferenceLand
Posts: 5,171
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Certainly not using this vB3 article. As far as know, vB5 doesn't have native dropdowns. You would have to get a custom one and integrate it yourself.
Reply With Quote
  #199  
Old 12-14-2013, 04:24 AM
dat.phan dat.phan is offline
 
Join Date: Nov 2013
Posts: 9
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

thank you
Reply With Quote
  #200  
Old 01-19-2014, 10:54 AM
macgyvers macgyvers is offline
 
Join Date: May 2007
Posts: 19
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

My drop-down menu is missing ... where to look the code ... http://bit.ly/1dNYQwP
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:21 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04881 seconds
  • Memory Usage 2,319KB
  • Queries Executed 25 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (10)bbcode_code
  • (7)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)pagenav_pagelinkrel
  • (10)post_thanks_box
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (10)post_thanks_postbit_info
  • (9)postbit
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete