1. Home
  2. references
  3. Views
  4. Helpers
  5. MENU

MENU Custom helper

Added by: ivica
  • 6975 views
  • 0 comments
  • loading...

Generates a tree-like structure using unordered lists representing the menu

The MENU helper takes a list of lists or of tuples of the form of response.menu and generates a tree-like structure using unordered lists representing the menu.


The first item in each list/tuple is the text to be displayed for the given menu item. The second item in each list/tuple is a boolean indicating whether that particular menu item is active (i.e., the currently selected item). When set to True, the MENU() helper will add a "web2py-menu-active" class to the <li> for that item (you can change the name of that class via the "li_active" argument to MENU ()). Another way to specify the active url is by directly passing it to MENU() via its "active_url" argument. The third item in each list/tuple can be an HTML helper (which could include nested helpers), and the MENU helper will simply render that helper rather than creating its own <a> tag.

Each menu item can have a fourth argument that is a nested submenu.

A menu item can also have an optional 5th element, which is a boolean. When false, the menu item is ignored by the MENU helper.



















>>> print MENU([['One', False, 'link1'], ['Two', False, 'link2']])

<ul class="web2py-menu web2py-menu-vertical">

  <li><a href="link1">One</a></li>

  <li><a href="link2">Two</a></li>

</ul>



>>> print MENU([['One', False, 'link1', [['Two', False, 'link2']]]])

<ul class="web2py-menu web2py-menu-vertical">

  <li class="web2py-menu-expand">

     <a href="link1">One</a>

     <ul class="web2py-menu-vertical">

        <li><a href="link2">Two</a></li>

     </ul>

  </li>

</ul>



{{=MENU(response.menu, mobile=request.user_agent().is_mobile)}}

Attributes / Arguments

_class _class="web2py-menu web2py-menu-vertical"

Sets the class of the outer UL elements.

ul_class ul_class="web2py-menu-vertical"

Sets the class of the inner UL elements.

li_class li_class="web2py-menu-expand"

Sets the class of the inner LI elements.

li_first li_first=" "

Allows to add a class to the first list element.

li_last li_last=" "

Allows to add a class to the last list element.

mobile

MENU takes an optional argument mobile. When set to True instead of building a recursive UL menu structure it returns a SELECT dropdown with all the menu options and a onchange attribute that redirects to the page corresponding to the selected option. This is designed an an alternative menu representation that increases usability on small mobile devices such as phones.

Normally the menu is used in a layout with the following syntax:

{{=MENU(response.menu, mobile=request.user_agent().is_mobile)}}

# In this way a mobile device is automatically detected and the menu is rendered accordingly.

loading...

Sources / Reference

" Web2py Book - Chapter 5" is licensed under Creative Common License BY-NC-ND 3.0

Comments

loading...

Powered by
Web2py

Hosted on
www.pythonanywhere.com
(affiliated link)

Contact
Privacy & Terms