You are here

Home » API reference » Accordion Menu 6

README.txt in Accordion Menu 6

Same filename and directory in other branches
  1. 7 README.txt
CONTENTS OF THIS FILE
---------------------

 * Author
 * Description
 * Installation
 * Dependencies
 * Configuration
 * Styling

AUTHOR
------
Jim Berry ("solotandem", http://drupal.org/user/240748)

DESCRIPTION
-----------
This module will display a Drupal menu using a jQuery UI accordion effect. The
top-level menu items are referred to as header items. The accordion effect is
invoked when the triggering event occurs on a header item. The triggering event
may be a mouse down, mouse click, or mouse over. The submenu expands to display
the menu items beneath the header. A subsequent triggering event on the same
header item collapses the menu beneath it.

INSTALLATION
------------
To use this module, install it in a modules directory. See
http://drupal.org/node/895232 for further information.

DEPENDENCIES
------------
The 6.x releases include the jQuery UI module is a dependency.  See the README
file included with the jQuery UI project at http://drupal.org/project/jquery_ui
for instructions on installing jQuery UI.

CONFIGURATION
-------------
By default, the module will declare two menu blocks. To set a different number
of available menu blocks, visit the module configuration page at
admin/config/user-interface/accordion_menu.

Each menu block may be configured from the block administration page at
admin/structure/block. Settings are exposed for:
- menu source: the menu to display as an accordion
- script scope: the script location in the page source (see drupal_add_js())
- header link: whether the header HTML output is a link
- header: the HTML tag used on the header items
- animate: the animation effect used to expand the submenu
- event: the triggering event
- collapsible: allow an expanded menu to collapse (requires jQuery UI 1.7.3+)
- all of the other published jQuery UI accordion options

If a header item is output as a link, then there may be a conflict between the
event triggering a redirect to the menu link and that enabling the accordion
effect. To avoid a clash of the JS behind the accordion effect and a mouse click
on a header menu link, it is recommended to leave the default setting which
outputs the header as a non-link item.

The collapsible setting has no effect with the jQuery UI versions that are
compatible with the jQuery 1.3 shipped with Drupal 6. In other words, with older
versions of jQuery UI Accordion, a subsequent triggering event will not collapse
a submenu. This problem seems to have been resolved in jQuery 1.3.2 and
jQuery UI 1.7.3. See the README file included with the jQuery UI project at
http://drupal.org/project/jquery_ui for instructions on installing these later
versions of jQuery.

STYLING
-------
Classes

Several classes are added to the HTML elements surrounding the menu, headers,
and submenu content.

wrapper
  The <div> wrapped around the menu tree has classes for several of the
  configurable options of the block: accordion-menu-[block delta]
  accordion-menu-name-[menu name] accordion-menu-source-[menu source]

header
  The header elements (default tag is <h3>) of the menu tree have classes:
  accordion-header-[item number] first last has-children no-children active
  active-trail odd even menu-mlid-[menu link ID]

header "link"
  The <span> or <a> element of a header item has classes: accordion-link
  active-trail

submenu item
  The <li> item has the standard classes added by the menu system.

submenu link
  The <a> item has whatever classes are added to the menu item, including those
  available from the Menu Atributes module.

The number and type of style sheet attributes needed to produce a desired visual
effect will depend on the jQuery UI version as that script has changed how it
modifies the HTML and the CSS classes it uses.

Templates

By default, the wrapper <div> for the block is generated using the
accordion-menu-wrapper.tpl.php template. This may be overridden by creating a
template file based on the theme hook suggestions for that template:
- accordion-menu-wrapper--[block delta].tpl.php
- accordion-menu-wrapper--[menu name].tpl.php

For example, a file called accordion-menu-wrapper--menu-foo.tpl.php can be used
to override the <div> for the custom menu "menu-foo" blocks. Add this file to
your theme.

Theme functions

Accordion Menu uses Drupal core's menu theme functions for the submenu items.
However, it provides theme hook suggestions for the header that can be used to
override this theme function:
- [theme]_accordion_menu_header__[block delta]()
- [theme]_accordion_menu_header__[menu name]()

For example, if you created a bartik_accordion_menu_header__1() function, it
would override theme_accordion_menu_header() to display the menu block with
delta of 1.

File

README.txt
View source 
  1. 

  2. CONTENTS OF THIS FILE

  3. ---------------------

  4. 

  5.  * Author

  6.  * Description

  7.  * Installation

  8.  * Dependencies

  9.  * Configuration

  10.  * Styling

  11. 

  12. AUTHOR

  13. ------

  14. Jim Berry ("solotandem", http://drupal.org/user/240748)

  15. 

  16. DESCRIPTION

  17. -----------

  18. This module will display a Drupal menu using a jQuery UI accordion effect. The

  19. top-level menu items are referred to as header items. The accordion effect is

  20. invoked when the triggering event occurs on a header item. The triggering event

  21. may be a mouse down, mouse click, or mouse over. The submenu expands to display

  22. the menu items beneath the header. A subsequent triggering event on the same

  23. header item collapses the menu beneath it.

  24. 

  25. INSTALLATION

  26. ------------

  27. To use this module, install it in a modules directory. See

  28. http://drupal.org/node/895232 for further information.

  29. 

  30. DEPENDENCIES

  31. ------------

  32. The 6.x releases include the jQuery UI module is a dependency.  See the README

  33. file included with the jQuery UI project at http://drupal.org/project/jquery_ui

  34. for instructions on installing jQuery UI.

  35. 

  36. CONFIGURATION

  37. -------------

  38. By default, the module will declare two menu blocks. To set a different number

  39. of available menu blocks, visit the module configuration page at

  40. admin/config/user-interface/accordion_menu.

  41. 

  42. Each menu block may be configured from the block administration page at

  43. admin/structure/block. Settings are exposed for:

  44. - menu source: the menu to display as an accordion

  45. - script scope: the script location in the page source (see drupal_add_js())

  46. - header link: whether the header HTML output is a link

  47. - header: the HTML tag used on the header items

  48. - animate: the animation effect used to expand the submenu

  49. - event: the triggering event

  50. - collapsible: allow an expanded menu to collapse (requires jQuery UI 1.7.3+)

  51. - all of the other published jQuery UI accordion options

  52. 

  53. If a header item is output as a link, then there may be a conflict between the

  54. event triggering a redirect to the menu link and that enabling the accordion

  55. effect. To avoid a clash of the JS behind the accordion effect and a mouse click

  56. on a header menu link, it is recommended to leave the default setting which

  57. outputs the header as a non-link item.

  58. 

  59. The collapsible setting has no effect with the jQuery UI versions that are

  60. compatible with the jQuery 1.3 shipped with Drupal 6. In other words, with older

  61. versions of jQuery UI Accordion, a subsequent triggering event will not collapse

  62. a submenu. This problem seems to have been resolved in jQuery 1.3.2 and

  63. jQuery UI 1.7.3. See the README file included with the jQuery UI project at

  64. http://drupal.org/project/jquery_ui for instructions on installing these later

  65. versions of jQuery.

  66. 

  67. STYLING

  68. -------

  69. Classes

  70. 

  71. Several classes are added to the HTML elements surrounding the menu, headers,

  72. and submenu content.

  73. 

  74. wrapper

  75.   The 
     wrapped around the menu tree has classes for several of the

  76.   configurable options of the block: accordion-menu-[block delta]

  77.   accordion-menu-name-[menu name] accordion-menu-source-[menu source]

  78. 

  79. header

  80.   The header elements (default tag is 
    ) of the menu tree have classes:

  81.   accordion-header-[item number] first last has-children no-children active

  82.   active-trail odd even menu-mlid-[menu link ID]

  83. 

  84. header "link"

  85.   The  or  element of a header item has classes: accordion-link

  86.   active-trail

  87. 

  88. submenu item

  89.   The 
  90.  item has the standard classes added by the menu system.

  91. 

  92. submenu link

  93.   The  item has whatever classes are added to the menu item, including those

  94.   available from the Menu Atributes module.

  95. 

  96. The number and type of style sheet attributes needed to produce a desired visual

  97. effect will depend on the jQuery UI version as that script has changed how it

  98. modifies the HTML and the CSS classes it uses.

  99. 

  100. Templates

  101. 

  102. By default, the wrapper 
     for the block is generated using the

  103. accordion-menu-wrapper.tpl.php template. This may be overridden by creating a

  104. template file based on the theme hook suggestions for that template:

  105. - accordion-menu-wrapper--[block delta].tpl.php

  106. - accordion-menu-wrapper--[menu name].tpl.php

  107. 

  108. For example, a file called accordion-menu-wrapper--menu-foo.tpl.php can be used

  109. to override the 
     for the custom menu "menu-foo" blocks. Add this file to

  110. your theme.

  111. 

  112. Theme functions

  113. 

  114. Accordion Menu uses Drupal core's menu theme functions for the submenu items.

  115. However, it provides theme hook suggestions for the header that can be used to

  116. override this theme function:

  117. - [theme]_accordion_menu_header__[block delta]()

  118. - [theme]_accordion_menu_header__[menu name]()

  119. 

  120. For example, if you created a bartik_accordion_menu_header__1() function, it

  121. would override theme_accordion_menu_header() to display the menu block with

  122. delta of 1.