How to allow users to modify front end menus?

Question

I am writing a backend/admin area for a website. The users want the ability to modify their menu's on the website.

• These menus can be heirachical no more than 3 levels deep.
• Do you allow users to do this?
• How do you store the heirarchy?
• How do you programmatically display the menu?
• How do you make it easy for users to create heirarchies - some sort of jQuery drag/drop?

Look forward to your replies.

Answer 1

You ask a lot of questions man ;)

You obviously know about jQuery, hence the tag... jQuery will make your life so easy. Please take a look at jQuery UI, that will solve all your problems: http://jqueryui.com/

Answer 2

These menus can be heirachical no more than 3 levels deep. OK

Do you allow users to do this? Not generally, but I can see cases where this might be useful.

How do you store the heirarchy? In a table in the database, by user ID. You also need a column in the table to implement the hierarchy, and another table to contain the menu options and base URLs.

How do you programmatically display the menu? That's a tricky one. You have to find a way to push the menu hierarchy into the page from the controller. JSON seems a likely candidate. Something from jQuery UI should be able to pick up this JSON and render a menu for you.

How do you make it easy for users to create heirarchies - some sort of jQuery drag/drop? jQuery UI has a Drag-drop feature.

Good Luck!

Answer 3

Do you allow users to do this? No, but admins on some sites. (Though none built with MVC or jQuery.)

How do you store the heirarchy? In a table, with a parent-field.

How do you programmatically display the menu? I iterate throught the table and output HTML.

How do you make it easy for users to create heirarchies - some sort of jQuery drag/drop? Make menu-editing page, where you output the menu in the content-area of your page, and then use something like jQuery sortable plugin to move things around, and custom code to delete and insert new items.

Answer 4

Jon,

Have a look at this link for additional ideas:

http://www.webappers.com/2007/09/05/smooth-and-clean-fastfind-menu-jquery-plugin/

FastFind Menu Script is a javascript menu created by ActiveSpotLight under the BSD License. It pulls a content feed as data to populate the menu, this can be static or dynamic. The version they use internally uses JSON/XML as data feeds. This script allows for nested menus, based on dynamic Ajax responses. The menu can also be dragged/dropped by using the jQuery Interface Library.