HTML/javascript context menu that loads sub-menu items via AJAX

Question

Does anyone know of an HTML/JavaScript/jQuery context menu implementation that supports callbacks that will allow me to load the top-level and sub-menu items via AJAX?

I need to support context menus that are very dynamic where available menu items are determined by permissions, data access rights and data dictionary relationships. I cannot pre-create the menu items because the items and depth of the menu structure are determined at runtime.

I'm particularly interested in finding out if the the new iPod style menu being developed for jQuery 1.9 will support dynamic AJAX loading as this style of menu would be perfect for our requirements.

Thanks. Glenn.

I've since found mbMenu which is very old but does support loading of sub-menu content via AJAX. However, it doesn't support the ipod style we need and we had to fix it so that it didn't clash with our element ids. — Glenn
– Glenn, Commented Nov 8, 2011 at 6:11

Shadi · Accepted Answer · 2011-11-13 13:44:57Z

1

Try this one:

http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

It's easy to implement and to maintain.

EDIT:

You can access your menu dynamically by giving the UL an ID:

<ul id="contextmenuid">
    /*Empty menu to be created dynamically*/
</ul>

and then using javascript you can access this UL and create/modify the needed LI:

var contextMenu = document.getElementById(contextmenuid);

//This part would be dynamic loop to add menu items
var contextMenuItem = document.createElement('li');
var contextMenuItemLink = document.createElement('a');

contextMenuItem.setAttribute('class', 'imageclass');        //imageclass will be used to show the menu item image
contextMenuItemLink.setAttribute('href', '#doaction');      //#doaction is the item ID, it would be number
contextMenuItemLink.setAttribute('title', 'Tooltip Info');  //Tooltip
contextMenuItemLink.innerHTML = 'Dynamic Item, click me...';//Menu item text
contextMenuItem.appendChild(contextMenuItemLink);

//Add the new menu item to the context menu
contextMenu.appendChild(contextMenuItem);

the same would be used to the submenus:

<ul id="contextmenuid">
    <li><a href="http://msn.com">MSN</a>
        <ul id="contextsubmenuid">
            /*to be created dynamically*/
        </ul>
    </li>
</ul>

Regarding the style I guess that you can play with the CSS to have what you need.

Hope this would help.

edited Nov 13, 2011 at 13:44

answered Nov 3, 2011 at 11:44

Shadi

2,2562 gold badges22 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Glenn Over a year ago

The plugin you mention neither supports AJAX loading of sub-menu content nor an Ipod style menu.

Glenn Over a year ago

Thanks for the update Shadi. But I still don't think it does what I need. I need to load the sub-menu dynamically when the user selects it which is why I asked for a solution that has a callback for sub-menu selection (although my question may have not been as clear on this). The mbMenu library I mention above is working for us.

Shadi Over a year ago

Sorry for the inconvenience, I haven't noticed that you found the mbMenu, and yes my soultion does not answer your question, and I'm glad that I have been introduced to mbMenu which has excellent features :).

Collectives™ on Stack Overflow

HTML/javascript context menu that loads sub-menu items via AJAX

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related