Javascript Sub-menus

[Code Monkey]

Here is a little tutorial for you, hope that's what you're looking for.


To make a popup menu like those used in vBulletin using the actual vBulletin code is quite simple.

You only need to do two things beyond what you would normally do to make the menu itself. The actual menu has no additional formatting. So you can add existing or dynamic menus to a popup.

First you make the link that will be clicked to open the popup menu. This can be placed anywhere on a vBulletin page that contains the menu javascript. If the following is not on the page (It's most likely there if the navbar is) you can add it.

<script type="text/javascript" src="clientscript/vbulletin_menu.js"></script>

For the link code, you need a container. I use a table column below but you can use a div and most likely a span as well. Next you need to create a unique identifier for your menu. Below I use "my_made_up_menu_name", but it can be anything as long as it's unique to that page. You will use this as the id value for the container of the link.

Next you need to give the container the class value of "vbmenu_control". Unlike the id, this is a static choice and must be used as is.

Next you create the clickable link itself. You assign the href attribute with the value of "#unique_menu_id" which in the sample below would be "#my_made_up_menu_name". Don't forget to precede it with the # symbol.

Then give the link a display value to click. This can be whatever is appropriate for the menu. Such as "Quick Links" in the vBulletin navbar.

Finally, add the javascript code with the vbmenu_register function with the unique menu id. In the sample it is vbmenu_register("my_made_up_menu_name");. That covers the link. Simple eh?

<!--The actual link code that will be clicked to open the pop up menu-->
<td id="my_made_up_menu_name"
class="vbmenu_control"
align="left">
<a href="#my_made_up_menu_name">Link Name</a> <script type="text/javascript">
//<![CDATA[
vbmenu_register("my_made_up_menu_name");
//]]>
</script>
</td>

The menu wrapper itself is quite easy. Below I use a div which you can put anything in. Such as a table or a list, or even another div or a picture of your puppy. It's all up to you.

Here is the tricky part that can get overlooked. This containers id is the unique id of the link above but you add "_menu" to the end of it. So in the example below it is "my_made_up_menu_name_menu".

Next you make the class attribute have a value of "vbmenu_popup".

And last but not least, you assign the style property of "display:none".


And your done.

<!--Hidden menu code placed on the page anywhere below the actual link to open it-->
<div id="my_made_up_menu_name_menu"
class="vbmenu_popup"
style="display:none">
<!--Put your table or list code here-->
</div>

There is lot's of javascript out there to make these popup menu's. Some better and some worse than what is included in vBulletin. I myself have used overlib in many web applications. However, the proper thing to do when adding features to vBulletin or any other target software, is to add features without adding code, if possible. So if you can get the desired result using the code that is already there then that is the proper way to go about it bloat free.

The above tutorial copyright vbmodder.com