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 07:29AM, 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 06:18AM, 2011/04/26.
Admin comment
DHTMLGoodies
A fix has been implemented for IE9. Download the zip file and replace your menu-for-applications.js

btw: 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 09:09AM, 2011/04/26.
Chris
Chris wrote:
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.


Many thanks for the quick fix. Now it´s working again perfect.

Chris at 12:39PM, 2011/04/26.
Trotamundos
I have the same problem with IE9, I dind't realize it was a problem with that version.

Thanks for solving it so quickly and for letting us use this amazing scripts.

Best Regards, Sinplan
Trotamundos at 09:24AM, 2011/05/01.
Souvik
Can I make the drop-down disappear on mouse-out effect?
Souvik at 01: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 12: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 11:30PM, 2011/05/05.
    Admin comment
    DHTMLGoodies
    souvik wrote: #
    It is really being frustrating having no support from the author. I haven't got any reply of my last two posts.


    Souvik,

    I have been away on a business trip. I will look at your problem on monday.
    DHTMLGoodies at 11:59AM, 2011/05/06.
    Admin comment
    DHTMLGoodies
    Souvik,

    Have you tried using Javascript to open a page in a new window.

    i.e. instead of using target="_blank", use something like this:

    <a href="#" onclick="var w=window.open('http://www.dhtmlgoodies.com','w');w.focus();return false">
    DHTMLGoodies at 05:33AM, 2011/05/09.
    Souvik
    Yes, I had tried it. It worked, but target="_blank" didn't work.
    Souvik at 03: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 06:44PM, 2011/07/04.
    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 06:21AM, 2011/07/09.
    Deep
    How to assign the list item Id if number of menu items are more than 10?
    Deep at 09:41PM, 2011/09/21.
    nguyenvanuy
    <a href="#comment448">souvik wrote:</a>
    It is really being frustrating having no support from the author. I haven't got any reply of my last two posts.


    nguyenvanuy at 08:09PM, 2012/04/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 11:04AM, 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 02: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 - 2017 dhtmlgoodies.com