Class: Mobimenu

Responsiville. Mobimenu

A responsive mobile burger menu for the Responsiville framework, which has come to be known as a burger menu in responsive web design. But this is just a name. The mobile menu may have any shape and visual effect the developer decides that it should have. It is enabled and disabled according to the given breakpoints configuration.

new Responsiville.Mobimenu(options)

responsiville.mobimenu.js, line 70
Creates and initialises the mobile menu.
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.
element string The element that contains the whole of the mobimenu.
enter string Comma separated list of breakpoints in which the mobimenu enters, wihch means it is enabled.
leave string Comma separated list of breakpoints in which the mobimenu leaves, which means it is disabled.
menuTitle string The title of the anchor element which will hold the burger menu when it is enabled.
menuText string The text of the anchor element which will hold the burger menu when it is enabled.
closeText string The text of the anchor element which will hold the burger menu when it is enabled.
closeTitle string The title of the anchor element which will hold the burger menu when it is enabled.
styled boolean Controls if extended (more than the absolutely necessary) styling will be applied, for example on UL and LI elements of the menu and their contents. Default: true.
effect string The visual animation effect to use when opening and closing the mobimenu.
transition int The speed of the transitions of the mobimenu.
detectHash string Detects whether the module should treat anchor elements inside the menu which start with a "#" in a special way. This means that when they are clicked the mobile menu needs to close because these links are internal and no new page will be loaded, but the element still need to close.
Author:
  • Nevma, info@nevma.gr
License:
  • Nevma Copyright (c) http://www.nevma.gr
Fires:

Extends

Members

staticResponsiville.Mobimenu.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.Mobimenu.defaults

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

Methods

staticResponsiville.Mobimenu.autoRun(){void}

responsiville.mobimenu.js, line 313
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

anchorHashClick(event){boolean}

responsiville.mobimenu.js, line 594
Handles the click event on an anchor element inside the mobimenu which has an internal link, ie starts with a "#". If the anchor points to an existing element then the menu is closed so that the page can be scrolled to that 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.

close(event){void}

responsiville.mobimenu.js, line 516
Closes the mobimenu. Actually closes and shows the mobimenu with the required visual effect.
Name Type Description
event Event The event that fired on the element which closes the mobimenu.
Fires:
Returns:
Type Description
void

closeButtonClick(){boolean}

responsiville.mobimenu.js, line 616
Handles the click event on the mobimenu close button. The menu is closed and the handler always returns false to stop default behaviour.
Returns:
Type Description
boolean Whether the event should propagate and allow default behaviour.

disable(){void}

responsiville.mobimenu.js, line 422
Disables the mobimenu. 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 mobimenu might be a required feature in desktops but useless in mobile devices.
Returns:
Type Description
void

enable(){void}

responsiville.mobimenu.js, line 394
Enables the mobimenu. It does not activate it, it does not open it. It simply enables it, so when the necessary trigger is fired (ie the burger menu is tapped) then the menu is activated (which means it opens). Useful in responsive design where the mobimenu might be a required feature in desktops but useless in mobile devices.
Returns:
Type Description
void

escapeKeyUp(event){boolean}

responsiville.mobimenu.js, line 663
Handles the escape key up event to close the mobimenu via the keyboard when it is open. One could argue thath it is pointless in mobile devices, but burger menus have been used in desktop devices often as well.
Name Type Description
event Event The event that fired on the keyboard.
Returns:
Type Description
boolean Whether the event should propagate and allow default behaviour.
responsiville.mobimenu.js, line 635
Handles the click event on the mobimenu container body. The menu is closed and the handler always returns false to stop default behaviour.
Name Type Description
event Event The mouse click event that fired.
Returns:
Type Description
boolean Whether the event should propagate and allow default behaviour.

open(){void}

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

openButtonClick(){boolean}

responsiville.mobimenu.js, line 573
Handles the click event on the mobimenu open butoon. The menu opens and the handler always returns true.
Returns:
Type Description
boolean Whether the event should propagate and allow default behaviour.

setupEvents(){void}

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

Events

closed

responsiville.mobimenu.js, line 549
Called after the mobimenu has been closed.

closing

responsiville.mobimenu.js, line 520
Called before the mobimenu has started closing.

init

responsiville.mobimenu.js, line 246
Called after the mobimenu has been created.

opened

responsiville.mobimenu.js, line 487
Called after the mobimenu has been opened.

opening

responsiville.mobimenu.js, line 457
Called before the mobimenu has started opening.