The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
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 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']"> Code:
<td id="custommenu" class="vbmenu_control"> <a href="#">Custom Menu</a> <script type="text/javascript"> vbmenu_register("custommenu"); </script> </td> Next, in your navbar template find Code:
<!-- NAVBAR POPUP MENUS --> 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> 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> If you wish to break your menu into sections like the quicklinks use then add Code:
<tr> <td class="thead">Custom Menu</td> </tr> 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. |
#192
|
||||||
|
||||||
Quote:
Quote:
Quote:
Code:
<td id="newyork" class="vbmenu_control"><a href="#">New York</a><script type="text/javascript">vbmenu_register("newyork");</script> </td> 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> Quote:
Code:
<div> <table> <tr><td>menu item</td></tr> <tr><td>menu item</td></tr> </table> </div> Quote:
Quote:
|
#193
|
|||
|
|||
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 |
#194
|
||||
|
||||
Quote:
|
#195
|
|||
|
|||
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 |
#196
|
||||
|
||||
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 */ |
#197
|
|||
|
|||
How I can do if I want add to vb5
|
#198
|
||||
|
||||
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.
|
#199
|
|||
|
|||
thank you
|
#200
|
|||
|
|||
My drop-down menu is missing ... where to look the code ... http://bit.ly/1dNYQwP
|
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|