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

[Alan @ CIT]

Many thanks for the tutorial, but have you any idea how to add sub-menus to the existing vbmenu class? That was my inital problem

ie, user clicks to display the drop down menu, move to one of the options (one with a little right arrow on it), clicks again and a sub-menu appears.

Thanks,
Alan.

[Zachery]

AFAIK sub-menus are not possible.

[Alan @ CIT]

Hence my original post asking if anyone knew how I could extend the existing vbmenu class to add support for sub-menus

Thanks to everyone for their help, but I've scrapped the hack that needed the sub-menus for now, so not to worry

Thanks,
Alan.

[K1ng0e]

Hey Alan !
You want to do a sub-menu like the sub-menu of the navbar (search or quicklink for example?)

[Trana]

Alan,

I sent you a PM about the sub menus that I have running on my site. I don't use the VB version of the popups but I have embedded the jscript in the navbar template and it works well. Please see my PM.

Originally Posted by Zachery

AFAIK sub-menus are not possible.

You can do this with a third party jscript tool like Infinite Menus.

[Code Monkey]

Originally Posted by Alan @ CIT

Many thanks for the tutorial, but have you any idea how to add sub-menus to the existing vbmenu class? That was my inital problem

ie, user clicks to display the drop down menu, move to one of the options (one with a little right arrow on it), clicks again and a sub-menu appears.

Thanks,
Alan.

Just repeat the process with more unique id's within the menu items.

[Alan @ CIT]

Making a menu within a menu item would make it dropdown though, rather than appear at the side of the existing menu entry?

I'll give it a try tonight and see how it goes.

Thanks,
Alan.

[Trana]

Originally Posted by Alan @ CIT

Making a menu within a menu item would make it dropdown though, rather than appear at the side of the existing menu entry?

I'll give it a try tonight and see how it goes.

Thanks,
Alan.

It doesn't work, there is no logic in the jscript to handle a menu inside of a menu. See my post on .com about this. The only solution I have found is via an entirely new jscript.

If anyone has a better solution I would love to hear it!

[K1ng0e]

@Trana: Can you give me the link please =) ?