Download "Menu for applications" script

Demo | Demo 2 | Demo 3 | Demo 4 |

Bookmark and Share

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download files

You can download the script from this Zip file.

Files in package:

  • demos/* = Demos of the script.
  • js/menu-for-applications.js = Main JS file for this script
  • images_dhtmlsuite/* = Images used by the script
  • css_dhtmlsuite/* = CSS for the script

Documentation

Please see the complete Class documentation and take a look at the descriptions given in the demos.

Brief description of the classes

  • menuBar = The main class for this script. It creates the menu bar and contains methods for working on the menu(Examples: the appendMenuItems and deleteMenuItems methods).
  • menuItem = It creates the layout for a single menu item and have methods for operating on this item. You don't have to work on this menu it
  • menuModel = The data source("Model") for the menu. It contains an array of menuModelItem objects and saves the relationships between these items.
  • menuModelItem = Data source for a single menu item.

Note! All methods starting with two underscores(__) are considered to be private methods.

Example of use:

var menuModel = new DHTMLSuite.menuModel();
menuModel.addItemsFromMarkup('menuModel');
menuModel.init();

var menuBar = new DHTMLSuite.menuBar();
menuBar.addMenuItems(menuModel);
menuBar.setTarget('menuDiv');
menuBar.init();

The first three lines creates the data source for the menu. First a menuModel object is created, then we add items to this menuModel by pointing it to an unordered list on the page(<UL id="menuModel"> - see demo 2). Finally, we call the init method. The init() method will call some private methods in order to set some properties for the menu items(depth, hasSubs etc.).

The next thing we do is to create the menuBar object. We add items to the menuBar object by passing the menuModel to the addMenuItems method. We specify that we want the menu to be inserted into the element with id "menuDiv"(example: <DIV id="menuDiv">). Finally, we call the init method which creates the menu for us.

Look at the description in the demos for more examples on how to build a menu bar

Rate this script at Hotscripts.com

If you like my script, please rate it at HotScripts.com

Comments

zoujun
very good
zoujun at 01:29PM, 2011/03/27.
Chris
First thanks for the cool menu. But unfortunately the script is not working in IE9. It breaks while trying to display the menu after a dropdown.
Chris at 12:18PM, 2011/04/26.
Admin comment
DHTMLGoodies
A fix has been implemented for IE9. Download the zip file and replace your menu-for-applications.jsbtw: The problem is the dynamically created iframe:This code:var iframe = document.createElement('<IFRAME src="about:blank" frameborder=0>');creates a problem in IE9.It has now been replaced by this: var iframe = document.createElement('IFRAME');iframe.src = 'about:blank';iframe.frameBorder=0;
DHTMLGoodies at 03:09PM, 2011/04/26.
Souvik
Can I make the drop-down disappear on mouse-out effect?
Souvik at 07:10AM, 2011/05/04.
Souvik
when I set attribute as target="_blank" for an anchor tag, the page is getting opened in the same window. please help. see the code snippet
    Souvik at 06:59PM, 2011/05/05.
    souvik
    It is really being frustrating having no support from the author. I haven't got any reply of my last two posts.
    souvik at 05:30AM, 2011/05/06.
    Souvik
    Yes, I had tried it. It worked, but target="_blank" didn't work.
    Souvik at 09:33AM, 2011/05/10.
    dude
    If a top-level menu is clicked, and the mouse is moved away from the menu without clicking again, the sub-menus stay open.Is there a JavaScript function which can be called to close all top-level menu items which have sub-menus ??
    dude at 12:44AM, 2011/07/05.
    dude
    If any Separator is clicked on the main menu [top-level], a run-time error is generated as follows::Line 2040 ---> var subDiv = groupRef.getElementsByTagName('DIV')[0];ERROR MESSAGE :: "Microsoft JScript runtime error: Unable to get value of the property 'getElementsByTagName': object is null or undefined"
    dude at 12:21PM, 2011/07/09.
    Deep
    How to assign the list item Id if number of menu items are more than 10?
    Deep at 03:41AM, 2011/09/22.
    Jean
    When I click on item the menuBar does not collapse parent item. I'am using Jquery for all my app web.

    Like in your demo when you call javascript:saveWork()
    Jean at 06:04PM, 2013/03/01.
    jim
    i want to actiave sub elements when i click the menu item, not mouseover on it. i need your help.
    jim at 08:47AM, 2013/07/02.

    Post your comment

    Don't have an avatar? Create one at Gravatar.com.

    Confirmation code:

    Go to cbolson.com


    About/Contact | A good idea? | Submit a script | Privacy notice
    © 2005 - 2024 dhtmlgoodies.com