Class: Megamenu

Responsiville. Megamenu

The megamenu is either a real "mega" menu or simply a dropdown menu. It makes no difference actually. It is a menu that opens when an event (eg a mouseover) on an activator is triggered and hides when the mouse hovers away from the activator or the actual menu itself. It is not designed to be multi level.

new Responsiville.Megamenu(options)

responsiville.megamenu.js, line 87
Creates and initialises the megamenu.
Name Type Description
options Object The initialisation options of the module.
Properties:
Name Type Description
options Object The options that define the object behaviour.
Properties
Name Type Description
debug boolean Whether to print debug messages in the browser console.
slug boolean A special codename for the instance of the element, to be used as a class on its container and as a key in arrays where it is grouped with other elements of its kind.
activator string Selector for the element on whose mouse over the megamenu opens.
external boolean Whether the element that is the megamenu lies externally, ie somewhere in the rest of the page or or it is a sibling of the activator.
element string Selector for the element that actually is the megamenu. Has to be a sibling of the activator. If left null then the first sibling of the activator is taken into account as a best guess.
enter string Comma separated list of breakpoints in which the megamenu enters, wihch means it is enabled.
leave string Comma separated list of breakpoints in which the megamenu leaves, which means it is disabled.
effect string The effect to use when opening and closing the megamenu. Possible values are: none, slide, slide-ltr, fade.
elementClass string Class to add to the megamenu element when it is enabled.
parentClass string Class to add to the parent element of the megamenu activator.
parentActive string Class to add to the parent element when the megamenu is open and the user is hovering over is children.
openClass string The class to add to the megamenu while it is open.
openingClass string The class to add to the megamenu when it is being opened.
closingClass string The class to add to the megamenu when it is being closed.
delayShow int The amount of time to wait before the action on the activator causes the opening of the megamenu.
delayHide int The amount of time to wait before the action on the activator causes the closing of the megamenu.
duration int The amount of time that the opening and closing of the megamenu lasts.
detectHash string Detects whether the mobimenu treats anchor elements inside the menu which start with a "#" in a special way. This means that when they are clicked they should do nothing and simply return false;
Author:
  • Nevma, info@nevma.gr
License:
  • Nevma Copyright (c) http://www.nevma.gr
TODO
  • Activate on click (not on hover) as a parameter.
  • What strategy do we follow for cases where a device has a big enough screen to be classified among the desktop devices but does not support mouse events? Facts: there are tablets with 1024 and 1280 wide screens in landscape orientation.
Fires:
  • Responsiville.Megamenu#event:init

Extends

Members

staticResponsiville.Megamenu.AUTO_RUN

Properties:
Name Type Description
AUTO_RUN boolean Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Megamenu.AUTO_RUN

Properties:
Name Type Description
AUTO_RUN boolean Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Megamenu.defaults

Properties:
Name Type Description
defaults Object Default values for this module settings.

staticResponsiville.Megamenu.defaults

Properties:
Name Type Description
defaults Object Default values for this module settings.

Methods

staticResponsiville.Megamenu.autoRun(){void}

responsiville.megamenu.OLD.js, line 319
Runs through the page and searches for elements that apply to the current module in order to apply it to them automatically. Useful for automatically creating elements with this module's behaviour just by setting up the predefined classes and data attributes in HTML elements of the page.
Returns:
Type Description
void

staticResponsiville.Megamenu.autoRun(){void}

responsiville.megamenu.js, line 319
Runs through the page and searches for elements that apply to the current module in order to apply it to them automatically. Useful for automatically creating elements with this module's behaviour just by setting up the predefined classes and data attributes in HTML elements of the page.
Returns:
Type Description
void

activatorMouseEnter(){void}

responsiville.megamenu.OLD.js, line 499
Handles the event of the mouse entering the menu activator element which is meant to open the megamenu.
Returns:
Type Description
void

activatorMouseEnter(){void}

responsiville.megamenu.js, line 499
Handles the event of the mouse entering the menu activator element which is meant to open the megamenu.
Returns:
Type Description
void

activatorMouseLeave(){void}

responsiville.megamenu.js, line 535
Handles the event of the mouse leaving the menu activator element which is meant to close the megamenu.
Returns:
Type Description
void

activatorMouseLeave(){void}

responsiville.megamenu.OLD.js, line 535
Handles the event of the mouse leaving the menu activator element which is meant to close the megamenu.
Returns:
Type Description
void

afterClosing(){void}

responsiville.megamenu.OLD.js, line 944
Runs right after the megamenu has been closed.
Fires:
Returns:
Type Description
void

afterClosing(){void}

responsiville.megamenu.js, line 944
Runs right after the megamenu has been closed.
Fires:
Returns:
Type Description
void

afterOpening(){void}

responsiville.megamenu.OLD.js, line 884
Runs right after the megamenu has opened.
Fires:
Returns:
Type Description
void

afterOpening(){void}

responsiville.megamenu.js, line 884
Runs right after the megamenu has opened.
Fires:
Returns:
Type Description
void

anchorHashClick(event){boolean}

responsiville.megamenu.OLD.js, line 647
Handles the click event on an anchor element inside the megamenu which has an internal link, ie starts with a "#". If the anchor points to an existing element then nothing is done, so that the page may freely scroll to the element, otherwise false is returned, because the anchor is probably there only as a structural menu element.
Name Type Description
event Event The mouse click event that fired.
Returns:
Type Description
boolean Whether the event should propagate and allow default behaviour.

anchorHashClick(event){boolean}

responsiville.megamenu.js, line 647
Handles the click event on an anchor element inside the megamenu which has an internal link, ie starts with a "#". If the anchor points to an existing element then nothing is done, so that the page may freely scroll to the element, otherwise false is returned, because the anchor is probably there only as a structural menu element.
Name Type Description
event Event The mouse click event that fired.
Returns:
Type Description
boolean Whether the event should propagate and allow default behaviour.

beforeClosing(){void}

responsiville.megamenu.js, line 913
Runs right before the megamenu begins to closing.
Fires:
Returns:
Type Description
void

beforeClosing(){void}

responsiville.megamenu.OLD.js, line 913
Runs right before the megamenu begins to closing.
Fires:
Returns:
Type Description
void

beforeOpening(){void}

responsiville.megamenu.OLD.js, line 848
Runs just before the megamenu begins opening.
Fires:
Returns:
Type Description
void

beforeOpening(){void}

responsiville.megamenu.js, line 848
Runs just before the megamenu begins opening.
Fires:
Returns:
Type Description
void

calculateHeight(){int}

responsiville.megamenu.js, line 980
Calculates the height of the menu element dynamically at the particular time it is being requested.
Returns:
Type Description
int The height of the menu element.

calculateHeight(){int}

responsiville.megamenu.OLD.js, line 990
Calculates the height of the menu element dynamically at the particular time it is being requested.
Returns:
Type Description
int The height of the menu element.

calculateWidth(){int}

responsiville.megamenu.js, line 1003
Calculates the width of the menu element dynamically at the particular time it is being requested.
Returns:
Type Description
int The width of the menu element.

calculateWidth(){int}

responsiville.megamenu.OLD.js, line 1013
Calculates the width of the menu element dynamically at the particular time it is being requested.
Returns:
Type Description
int The width of the menu element.

close(){void}

responsiville.megamenu.OLD.js, line 756
Closes the megamenu. Actually closes and shows the megamenu with the required visual effect.
Returns:
Type Description
void

close(){void}

responsiville.megamenu.js, line 756
Closes the megamenu. Actually closes and shows the megamenu with the required visual effect.
Returns:
Type Description
void

disable(){void}

responsiville.megamenu.OLD.js, line 461
Disables the megamenu. It does not deactivate it, it does not close it. It simply disables it, so it does not function any more when the necessary trigger is fired. Useful in responsive design where the megamenu might be a required feature in desktops but useless in mobiles.
Fires:
Returns:
Type Description
void

disable(){void}

responsiville.megamenu.js, line 461
Disables the megamenu. It does not deactivate it, it does not close it. It simply disables it, so it does not function any more when the necessary trigger is fired. Useful in responsive design where the megamenu might be a required feature in desktops but useless in mobiles.
Fires:
Returns:
Type Description
void

elementMouseEnter(){void}

responsiville.megamenu.OLD.js, line 572
Handles the event of the mouse entering the menu element which is meant to ensure that that the megamenu stays open in case the user accidentally took their mouse away from the megamenu for a moment.
Returns:
Type Description
void

elementMouseEnter(){void}

responsiville.megamenu.js, line 572
Handles the event of the mouse entering the menu element which is meant to ensure that that the megamenu stays open in case the user accidentally took their mouse away from the megamenu for a moment.
Returns:
Type Description
void

elementMouseLeave(){void}

responsiville.megamenu.OLD.js, line 606
Handles the event of the mouse leaving the menu container which is meant to close the megamenu.
Returns:
Type Description
void

elementMouseLeave(){void}

responsiville.megamenu.js, line 606
Handles the event of the mouse leaving the menu container which is meant to close the megamenu.
Returns:
Type Description
void

enable(){void}

responsiville.megamenu.js, line 419
Enables the megamenu. It does not activate it, it does not open it. It simply enables it, so when the necessary trigger is fired (ie the activator element is hovered upon) then the menu is activated (which means it opens). Useful in responsive design where the megamenu might be a required feature in desktops but useless in mobiles.
Fires:
Returns:
Type Description
void

enable(){void}

responsiville.megamenu.OLD.js, line 419
Enables the megamenu. It does not activate it, it does not open it. It simply enables it, so when the necessary trigger is fired (ie the activator element is hovered upon) then the menu is activated (which means it opens). Useful in responsive design where the megamenu might be a required feature in desktops but useless in mobiles.
Fires:
Returns:
Type Description
void

open(){void}

responsiville.megamenu.OLD.js, line 667
Opens the megamenu. Actually opens and shows the megamenu with the required visual effect.
Returns:
Type Description
void

open(){void}

responsiville.megamenu.js, line 667
Opens the megamenu. Actually opens and shows the megamenu with the required visual effect.
Returns:
Type Description
void

setupEvents(){void}

responsiville.megamenu.OLD.js, line 346
Sets up event handlers necessary for the object to function properly.
Returns:
Type Description
void

setupEvents(){void}

responsiville.megamenu.js, line 346
Sets up event handlers necessary for the object to function properly.
Returns:
Type Description
void

Events

closed

responsiville.megamenu.js, line 961
Called after closing the menu.

closed

responsiville.megamenu.OLD.js, line 971
Called after closing the menu.

closing

responsiville.megamenu.OLD.js, line 915
Called before closing the menu.

closing

responsiville.megamenu.js, line 915
Called before closing the menu.

created

responsiville.megamenu.js, line 248
Called after the megamenu has been created.

created

responsiville.megamenu.OLD.js, line 248
Called after the megamenu has been created.

disabled

responsiville.megamenu.js, line 480
Called after the megamenu has been disabled.

disabled

responsiville.megamenu.OLD.js, line 480
Called after the megamenu has been disabled.

enabled

responsiville.megamenu.js, line 438
Called after the megamenu has been enabled.

enabled

responsiville.megamenu.OLD.js, line 438
Called after the megamenu has been enabled.

opened

responsiville.megamenu.OLD.js, line 893
Called after opening the menu.

opened

responsiville.megamenu.js, line 893
Called after opening the menu.

opening

responsiville.megamenu.js, line 850
Called before opening the menu.

opening

responsiville.megamenu.OLD.js, line 850
Called before opening the menu.

Responsiville. Megamenu

The megamenu is either a real "mega" menu or simply a dropdown menu. It makes no difference actually. It is a menu that opens when an event (eg a mouseover) on an activator is triggered and hides when the mouse hovers away from the activator or the actual menu itself. It is not designed to be multi level.

new Responsiville.Megamenu(options)

responsiville.megamenu.OLD.js, line 87
Creates and initialises the megamenu.
Name Type Description
options Object The initialisation options of the module.
Properties:
Name Type Description
options Object The options that define the object behaviour.
Properties
Name Type Description
debug boolean Whether to print debug messages in the browser console.
slug boolean A special codename for the instance of the element, to be used as a class on its container and as a key in arrays where it is grouped with other elements of its kind.
activator string Selector for the element on whose mouse over the megamenu opens.
external boolean Whether the element that is the megamenu lies externally, ie somewhere in the rest of the page or or it is a sibling of the activator.
element string Selector for the element that actually is the megamenu. Has to be a sibling of the activator. If left null then the first sibling of the activator is taken into account as a best guess.
enter string Comma separated list of breakpoints in which the megamenu enters, wihch means it is enabled.
leave string Comma separated list of breakpoints in which the megamenu leaves, which means it is disabled.
effect string The effect to use when opening and closing the megamenu. Possible values are: none, slide, slide-ltr, fade.
elementClass string Class to add to the megamenu element when it is enabled.
parentClass string Class to add to the parent element of the megamenu activator.
parentActive string Class to add to the parent element when the megamenu is open and the user is hovering over is children.
openClass string The class to add to the megamenu while it is open.
openingClass string The class to add to the megamenu when it is being opened.
closingClass string The class to add to the megamenu when it is being closed.
delayShow int The amount of time to wait before the action on the activator causes the opening of the megamenu.
delayHide int The amount of time to wait before the action on the activator causes the closing of the megamenu.
duration int The amount of time that the opening and closing of the megamenu lasts.
detectHash string Detects whether the mobimenu treats anchor elements inside the menu which start with a "#" in a special way. This means that when they are clicked they should do nothing and simply return false;
Author:
  • Nevma, info@nevma.gr
License:
  • Nevma Copyright (c) http://www.nevma.gr
TODO
  • Activate on click (not on hover) as a parameter.
  • What strategy do we follow for cases where a device has a big enough screen to be classified among the desktop devices but does not support mouse events? Facts: there are tablets with 1024 and 1280 wide screens in landscape orientation.
Fires:
  • Responsiville.Megamenu#event:init

Extends

Members

staticResponsiville.Megamenu.AUTO_RUN

Properties:
Name Type Description
AUTO_RUN boolean Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Megamenu.AUTO_RUN

Properties:
Name Type Description
AUTO_RUN boolean Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Megamenu.defaults

Properties:
Name Type Description
defaults Object Default values for this module settings.

staticResponsiville.Megamenu.defaults

Properties:
Name Type Description
defaults Object Default values for this module settings.

Methods

staticResponsiville.Megamenu.autoRun(){void}

responsiville.megamenu.OLD.js, line 319
Runs through the page and searches for elements that apply to the current module in order to apply it to them automatically. Useful for automatically creating elements with this module's behaviour just by setting up the predefined classes and data attributes in HTML elements of the page.
Returns:
Type Description
void

staticResponsiville.Megamenu.autoRun(){void}

responsiville.megamenu.js, line 319
Runs through the page and searches for elements that apply to the current module in order to apply it to them automatically. Useful for automatically creating elements with this module's behaviour just by setting up the predefined classes and data attributes in HTML elements of the page.
Returns:
Type Description
void

activatorMouseEnter(){void}

responsiville.megamenu.OLD.js, line 499
Handles the event of the mouse entering the menu activator element which is meant to open the megamenu.
Returns:
Type Description
void

activatorMouseEnter(){void}

responsiville.megamenu.js, line 499
Handles the event of the mouse entering the menu activator element which is meant to open the megamenu.
Returns:
Type Description
void

activatorMouseLeave(){void}

responsiville.megamenu.js, line 535
Handles the event of the mouse leaving the menu activator element which is meant to close the megamenu.
Returns:
Type Description
void

activatorMouseLeave(){void}

responsiville.megamenu.OLD.js, line 535
Handles the event of the mouse leaving the menu activator element which is meant to close the megamenu.
Returns:
Type Description
void

afterClosing(){void}

responsiville.megamenu.OLD.js, line 944
Runs right after the megamenu has been closed.
Fires:
Returns:
Type Description
void

afterClosing(){void}

responsiville.megamenu.js, line 944
Runs right after the megamenu has been closed.
Fires:
Returns:
Type Description
void

afterOpening(){void}

responsiville.megamenu.OLD.js, line 884
Runs right after the megamenu has opened.
Fires:
Returns:
Type Description
void

afterOpening(){void}

responsiville.megamenu.js, line 884
Runs right after the megamenu has opened.
Fires:
Returns:
Type Description
void

anchorHashClick(event){boolean}

responsiville.megamenu.OLD.js, line 647
Handles the click event on an anchor element inside the megamenu which has an internal link, ie starts with a "#". If the anchor points to an existing element then nothing is done, so that the page may freely scroll to the element, otherwise false is returned, because the anchor is probably there only as a structural menu element.
Name Type Description
event Event The mouse click event that fired.
Returns:
Type Description
boolean Whether the event should propagate and allow default behaviour.

anchorHashClick(event){boolean}

responsiville.megamenu.js, line 647
Handles the click event on an anchor element inside the megamenu which has an internal link, ie starts with a "#". If the anchor points to an existing element then nothing is done, so that the page may freely scroll to the element, otherwise false is returned, because the anchor is probably there only as a structural menu element.
Name Type Description
event Event The mouse click event that fired.
Returns:
Type Description
boolean Whether the event should propagate and allow default behaviour.

beforeClosing(){void}

responsiville.megamenu.js, line 913
Runs right before the megamenu begins to closing.
Fires:
Returns:
Type Description
void

beforeClosing(){void}

responsiville.megamenu.OLD.js, line 913
Runs right before the megamenu begins to closing.
Fires:
Returns:
Type Description
void

beforeOpening(){void}

responsiville.megamenu.OLD.js, line 848
Runs just before the megamenu begins opening.
Fires:
Returns:
Type Description
void

beforeOpening(){void}

responsiville.megamenu.js, line 848
Runs just before the megamenu begins opening.
Fires:
Returns:
Type Description
void

calculateHeight(){int}

responsiville.megamenu.js, line 980
Calculates the height of the menu element dynamically at the particular time it is being requested.
Returns:
Type Description
int The height of the menu element.

calculateHeight(){int}

responsiville.megamenu.OLD.js, line 990
Calculates the height of the menu element dynamically at the particular time it is being requested.
Returns:
Type Description
int The height of the menu element.

calculateWidth(){int}

responsiville.megamenu.js, line 1003
Calculates the width of the menu element dynamically at the particular time it is being requested.
Returns:
Type Description
int The width of the menu element.

calculateWidth(){int}

responsiville.megamenu.OLD.js, line 1013
Calculates the width of the menu element dynamically at the particular time it is being requested.
Returns:
Type Description
int The width of the menu element.

close(){void}

responsiville.megamenu.OLD.js, line 756
Closes the megamenu. Actually closes and shows the megamenu with the required visual effect.
Returns:
Type Description
void

close(){void}

responsiville.megamenu.js, line 756
Closes the megamenu. Actually closes and shows the megamenu with the required visual effect.
Returns:
Type Description
void

disable(){void}

responsiville.megamenu.OLD.js, line 461
Disables the megamenu. It does not deactivate it, it does not close it. It simply disables it, so it does not function any more when the necessary trigger is fired. Useful in responsive design where the megamenu might be a required feature in desktops but useless in mobiles.
Fires:
Returns:
Type Description
void

disable(){void}

responsiville.megamenu.js, line 461
Disables the megamenu. It does not deactivate it, it does not close it. It simply disables it, so it does not function any more when the necessary trigger is fired. Useful in responsive design where the megamenu might be a required feature in desktops but useless in mobiles.
Fires:
Returns:
Type Description
void

elementMouseEnter(){void}

responsiville.megamenu.OLD.js, line 572
Handles the event of the mouse entering the menu element which is meant to ensure that that the megamenu stays open in case the user accidentally took their mouse away from the megamenu for a moment.
Returns:
Type Description
void

elementMouseEnter(){void}

responsiville.megamenu.js, line 572
Handles the event of the mouse entering the menu element which is meant to ensure that that the megamenu stays open in case the user accidentally took their mouse away from the megamenu for a moment.
Returns:
Type Description
void

elementMouseLeave(){void}

responsiville.megamenu.OLD.js, line 606
Handles the event of the mouse leaving the menu container which is meant to close the megamenu.
Returns:
Type Description
void

elementMouseLeave(){void}

responsiville.megamenu.js, line 606
Handles the event of the mouse leaving the menu container which is meant to close the megamenu.
Returns:
Type Description
void

enable(){void}

responsiville.megamenu.js, line 419
Enables the megamenu. It does not activate it, it does not open it. It simply enables it, so when the necessary trigger is fired (ie the activator element is hovered upon) then the menu is activated (which means it opens). Useful in responsive design where the megamenu might be a required feature in desktops but useless in mobiles.
Fires:
Returns:
Type Description
void

enable(){void}

responsiville.megamenu.OLD.js, line 419
Enables the megamenu. It does not activate it, it does not open it. It simply enables it, so when the necessary trigger is fired (ie the activator element is hovered upon) then the menu is activated (which means it opens). Useful in responsive design where the megamenu might be a required feature in desktops but useless in mobiles.
Fires:
Returns:
Type Description
void

open(){void}

responsiville.megamenu.OLD.js, line 667
Opens the megamenu. Actually opens and shows the megamenu with the required visual effect.
Returns:
Type Description
void

open(){void}

responsiville.megamenu.js, line 667
Opens the megamenu. Actually opens and shows the megamenu with the required visual effect.
Returns:
Type Description
void

setupEvents(){void}

responsiville.megamenu.OLD.js, line 346
Sets up event handlers necessary for the object to function properly.
Returns:
Type Description
void

setupEvents(){void}

responsiville.megamenu.js, line 346
Sets up event handlers necessary for the object to function properly.
Returns:
Type Description
void

Events

closed

responsiville.megamenu.js, line 961
Called after closing the menu.

closed

responsiville.megamenu.OLD.js, line 971
Called after closing the menu.

closing

responsiville.megamenu.OLD.js, line 915
Called before closing the menu.

closing

responsiville.megamenu.js, line 915
Called before closing the menu.

created

responsiville.megamenu.js, line 248
Called after the megamenu has been created.

created

responsiville.megamenu.OLD.js, line 248
Called after the megamenu has been created.

disabled

responsiville.megamenu.js, line 480
Called after the megamenu has been disabled.

disabled

responsiville.megamenu.OLD.js, line 480
Called after the megamenu has been disabled.

enabled

responsiville.megamenu.js, line 438
Called after the megamenu has been enabled.

enabled

responsiville.megamenu.OLD.js, line 438
Called after the megamenu has been enabled.

opened

responsiville.megamenu.OLD.js, line 893
Called after opening the menu.

opened

responsiville.megamenu.js, line 893
Called after opening the menu.

opening

responsiville.megamenu.js, line 850
Called before opening the menu.

opening

responsiville.megamenu.OLD.js, line 850
Called before opening the menu.