View Full Version : Javascript Sub-menus
Alan @ CIT
06-03-2006, 04:03 PM
Hi all,
I'm working on a mod that needs sub-menus in the regular vb popup/dropdown menu system.
Unfortunately, I'm completely clueless when it comes to Javascript :) Anyone got any ideas or pointers that will get me started with my sub-menu problem? Or better still, anyone want to take up the challange and write the code for me? :D
Thanks,
Alan.
Alan @ CIT
06-20-2006, 10:14 PM
Anyone at all? I'd much rather extend the current popup menu class than write a replica with botched code I found on google :D
Come on Javascript experts, it can't be that hard for you guys and gals! :D
Thanks,
Alan.
Trana
06-20-2006, 11:36 PM
I used Infinite Menus to create nested menus in the navbar.
Alan @ CIT
06-21-2006, 12:23 AM
Do you have an example of what they look like in a vB forum? I looked on your site but couldn't find any nested menus, just regular ones :(
Thanks,
Alan.
Trana
06-26-2006, 01:50 AM
You wont see them on my site, at least not right now.
Use IM to create your menu, export it to inline HTML and place that within your navbar template.
I'll try and post an example when I have it running on one of my public sites, but it looks and works great.
Code Monkey
06-26-2006, 02:46 AM
Are you just trying to make new menu's in your mod that function like the ones in vb? That's pretty simple, I could help you if you wish.
Alan @ CIT
06-26-2006, 10:28 AM
JumpD: That's pretty much what I want to do, but I want to do it by extending the existing vbmenu class, rather than re-write my own Javascript menu class from scratch.
Thanks,
Alan.
Code Monkey
06-26-2006, 01:14 PM
JumpD: That's pretty much what I want to do, but I want to do it by extending the existing vbmenu class, rather than re-write my own Javascript menu class from scratch.
Thanks,
Alan.
Just send me the table code for the menus. You don't need to extend the class, you can just use it as is.
Alan @ CIT
06-26-2006, 06:44 PM
I don't have any table code for the menus as they will be dynamicly generated :)
But if it helps, it'll be a standard menu with the exception that each option will have 1 sub-level of regular menu options :)
(ie, think of IE's favourites menu :))
Thanks,
Alan.
sebbe
06-27-2006, 08:36 PM
I don't want to steal the thread or something but I would also appreciate help with this. I want to have a popup menu like the vB one on a custom page I have?
Code Monkey
06-28-2006, 02:19 AM
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 (http://www.vbmodder.com)
Alan @ CIT
06-28-2006, 06:03 AM
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
06-28-2006, 09:17 AM
AFAIK sub-menus are not possible.
Alan @ CIT
06-28-2006, 09:32 AM
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
06-28-2006, 10:00 AM
Hey Alan :) !
You want to do a sub-menu like the sub-menu of the navbar (search or quicklink for example?)
Trana
06-28-2006, 12:08 PM
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.
AFAIK sub-menus are not possible.
You can do this with a third party jscript tool like Infinite Menus.
Code Monkey
06-28-2006, 12:59 PM
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
06-28-2006, 01:14 PM
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
06-28-2006, 02:13 PM
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
06-28-2006, 05:03 PM
@Trana: Can you give me the link please =) ?
Trana
06-28-2006, 07:40 PM
You can get a copy of the tool at opencube.com
Code Monkey
06-29-2006, 01:18 PM
Well, that's too bad then. Looks like it works but it looses it's positioning and jumps to the top left corner of the page.
vBulletin® v3.8.12 by vBS, Copyright ©2000-2025, vBulletin Solutions Inc.