Menu System HTML IDs and Classes


OR's Menu Editor, available in the Pro edition,  will allow you to easily create nested HTML unordered lists <ul>s that can be placed for use as navigation menus for parts of your site without having to edit the template files whenever you add new pages or make changes to a menu.


The root level <ul> will have an ID of "or_menu_#"  and a CSS class "or_menu". The # denotes the numeric ID# of the menu being used, the menu ID is displayed in parenthesis () in the Menu Editor next to the name you used when you created it.


The Menu Editor's OR Menu ID#  in the above screen shot is 2. The unordered list below was rendered to the browser by inserting the {render_menu_2} template tag into one of the public template files, typically 'main.html'.


Example generated{render_menu_2} menu:

<ul class="or_menu" id="or_menu_2">

  <li class="or_menu_item or_menu_item_type_divider" id="or_menu_item_1">Main Menu</li>

  <li class="or_menu_item or_menu_item_type_action" id="or_menu_item_2"><a href="/agents.html">View Agents</a></li>

  <li class="or_menu_item or_menu_item_type_custom" id="or_menu_item_3"><a href="/linkX.html">Link X</a></li>

  <li class="or_menu_item or_menu_item_type_custom" id="or_menu_item_4"><a href="/linkY.html">Link Y</a></li>

  <li class="or_menu_item or_menu_item_type_custom" id="or_menu_item_5"><a href="/linkZ.html">Link Z</a></li>

</ul>


The first menu item above is a divider, followed by an action (View Agents), and then 3 custom URL links. The content of the <a> tags in the example have been greatly simplified so they better fit this page, the Menu Editor will create longer, absolute links for instance.


All menu items will have been assigned the following class: "or_menu_item" It will also be assigned one of the following classes depending on the type of menu item that was selected when it was created.


Action items will be assigned the CSS class: or_menu_item_type_action

Page items will be assigned the CSS class: or_menu_item_type_page

Block Level items will be assigned the CSS class: or_menu_item_type_block

Custom URL items will be assigned the CSS class: or_menu_item_type_custom

Divider items will be assigned  the class: or_menu_item_type_divider


Each <li> menu item, with the exception of block level elements, will also be assigned an ID of 'or_menu_item_#' where # denotes the individual item's numeric item ID assigned by the Menu Editor. These ID#s will not necessarily be consecutive (as in the example above), as you add and delete items  from your menu this will create gaps in  the assigned ID#s


For any Menu Items that have child elements there will also be a class of "or_menu_parent" assigned to the menu item.

example:

<liclass="or_menu_item or_menu_parent or_menu_item_type_divider"id="or_menu_item_2">


All action, page, block, and custom url <li> elements will contain an HTML <a>nchor tag , any custom CSS classes set on the menu item via the Menu Editor will be applied to the <a> tag specifically.  Divider Elements, do not contain an <a> tag and custom CSS classes cannot be applied via the Menu Editor. If you wish to style the divider items, you may target one using its specific OR menu item ID#, e.g. 'or_menu_item_1'.


The HTML5 example template uses Superfish, a popular jQuery plugin library for converting HTML unordered lists like the ones the OR Menu Editor can generate into interactive collapsible parent-child menus. There are many 3rd party menu libs that will do this, and you can also incorporate pure-CSS designs if you wish.


To use Superfish with a our custom menu ID#2 example above, we will need to add the following javascript to the <HEAD> of our template's 'main.html' template file, anywhere after the {load_js} template tag. The following example assumes we have copied the 'superfish.js' jQuery plugin to a /lib/ subfolder of our  custom template folder.


example:

<scripttype="text/javascript"src="{template_url}/lib/superfish.js"></script>


<scripttype="text/javascript">

       $(document).ready(function() {

               $('ul#or_menu_2').superfish({

                       //options go here

               });

       });

</script>

Related Topics:
Menu Editor
TEMPLATE DOCUMENTATION
Creating a public site Template
API GUIDE