Multi-Level Menu Creator

from coursesweb.net

This is an Ajax Script to create Multiple Level Menu.
The Multi-Level Menu is created with JavaScript, then, the code structure of the menu (categories, sub-categories, links) can be saved with PHP in TXT file (in JSON format) and /or in MySQL database.
The script is free, without any support or assistance. You can use it, modify, and publish it freely.

Features

- This Multi-Level Menu Creator has Control Panel to Add lists and links in menu, Modify name and link, Delete list, Save and Load saved menu.
- The script comes with three predefined types of Menu Styles: Horizontal-Vertical menu, and two Vertical-Horizontal menus.
- The script displays the HTML and CSS code of the Menu, that can be copied to add them in your web page; also, the JSON and SQL code, if you want to save the menu manually in TXT or MySQL database.
- You can load a saved menu to continue editing it, to add and modify lists /links. The saved menu can also be included in PHP files, using the PHP class of this script.

Installation and Settings

1. Open the "setmenu.php" file (in "setmenu" directory) and add your data for Admin; Name and Password to these variables (they are required when you want to save the menu):
$admname = 'name';
$admpass = 'password';
- If you want to save data in MySQL database, the PHP server must support PDO for connection to MySQL.
Edit the following data in the "setmenu.php" file:
define('DBHOST', 'localhost');            - replace localhost with your MySQL server address
define('DBUSER', 'root');                 - replace root with your database user name
define('DBPASS', 'passdb');               - replace passdb with your password for MySQL database
define('DBNAME', 'dbname');               - replace dbname with the name of your MySQL database

2. Copy on your server the directories: "setmenu", and "menus" (with all their files), and the "create_menu.html" file.

3. The "menus" directory is necesary only if you want to save the menu data in TXT files.
In this case you must set read-write-execute permissions to this folder and its ".txt" files, CHMOD 0777 (or 0755) so the PHP can write data in these files.

4. Open the "create_menu.html" page in your browser. For example, in your browser access this address ("localhost" is the domain name). Then you can start to build your menu.

- To get /load a saved menu for editing it, click on the "Get Saved Menu" tab.
- To change the current used CSS style, click on the radio buttons: "Horizontal-Vertical", "Vertical-Horizontal 1", "Vertical-Horizontal 2".
- The CSS code for "Horizontal-Vertical" menu is stored in the "hv_menu.css" file. The CSS properties for "Vertical-Horizontal" menus are saved in the "vh_menu1.css" and "vh_menu1.css" files.
- From the "Get Code" section you can copy the HTML, CSS, JSON, and SQL codes of your menu.

• For test, the script contains a menu saved in "menu.txt" file (in the "menus/" folder), you can use it to see how the script works. Also, you can test it online on the page: Demo Multi-Level Menu Creator

Other details

- The code with data and structure of the menu are processed in JavaScript from two objects:
ctgItems - contains an object /array with {parent_id: [childs-IDs]} (to each category /parent that has sub-categories is associated an array with the IDs of its sub-categories, separated by comma).
ctgData - contains an object with data of the lists (name, link-address): {list_id:{'namec':'Link_name', 'lurl':'Link_address', 'ctg':'parent_categories'}}
These two objects are saved in JSON format in TXT files.

- In MySQL table, the menu data are stored in these columns corresponding with the properties of the "ctgData" object:
          id - 'namec' - 'lurl' - 'ctg'
"ctg" contains the id of the parent categories , separated by ':' (Ex.:   5 - 'link_name' - 'link_address' - ':1:3:' ).
The PHP script selects data from MySQL table, creates the two objects/ arrays specified above, then sends them to Ajax in JSON format.

- The script was succesfully tested in Mozila Firefox, Google Chrome, Internet Explorer 8, and Opera browsers.

With respect, CoursesWeb.net