How To Add Menus to Templates

Other Features:

Styling - The HTML for “simple”, “accordion” and “sitemap” are all identical, but they just change styling based on CSS. The CSS is already in the common.css file. The appropriate type class should be set on the parent container based on the “type” name, e.g. .menu-simple, .menu-sitemap, .menu-nested, and .menu-accordion, .menu-dropdown.

The layout is set in the MenuBundle/Resources/views/MenuExtension.html.twig (which can be customized for a specific template). But most of the elements are actually in the MenuBundle/Resources/views/components.html.twig, which can also be customized for a template, just point the options to that custom file, e.g. {{ menu(content, {‘components’: ‘SitetheoryTemplateCustomBundle::components.html.twig’} ) }}. That’s is the guts of the styling. However, if you just want to include some extra classes, you can see the options above to include classes in the <li> <ul> and <a>.

Section Name - In cases where we use a section menu (e.g. {“scope”: “section”} on a sidebar) we often want to know what section we are in (e.g. to put the name above the menu).

Section Name - In cases where we use a section menu (e.g. `parent`=”section” on a sidebar) we often want to know what section we are in (e.g. to put the name above the menu). So when we fetch that, we insert that information into the Twig Environment for the designer to access in the template. {{ section }} will contain an object that includes {‘name’, ‘url’}. For getting section name,url we need to call {% set sectionName = sectionName(content,parent) %} where content can be object or menuId and parent will be nestParentId of the section for which we want to show the section name.

Active Menu - The method needs to determine which menu link is currently active for the current page, as well as all the related parents up to level 1 (so we can set an active class on the each active link). So we check the content and find the menu link that points to the current page. Then we keep make a list of that link ID and all the link IDs of it’s parent up to level 1. When we create the HTML we add the “active” (if it’s an active link) and “activeParent” (if it’s a parent, not the actual active link) class to each link in that nested tree and make sure that accordion menus stay open if it has the active class.

The menuLinks array will specify active = true if the current link is active, and `activeParent`=true if the current link is a parent of an active link (up the tree). So HTML should add the appropriate classes and styles for active links versus the parent of active links. Most likely you’ll want them all to say ‘active’ and just style them differently.

Actions - For accordion ng-click and ng-class should add class .see-children only to the parent <li> of the link clicked.. There should be ng-click to open on levels 1-3. Clicking another menu open should close (collapse) all other menus already open. When a link is clicked with an ng-click (opening up a submenu) it should add the “active” class and remove the active class from all others at this current level or in other branches (keeping the active on it’s own parent so it stays open and shows where we are in the menu).

Nesting Levels - HTML should dynamically add the relevant level number in nested menus, e.g. list-level3 (so we can style)

HTML Output - All the menu types share the same HTML except Dropdown uses Angular dropdown md-menu and md-link tags. Below is the recommended structure of the menus (which is already styled in the common.css).

NOTE: The menuHelper->getMenuLinksNested() function we use, actually gets the FULL menu (4 levels deep) and stores that in a cache. Then each menu that is requested, is parsed from that. This is necessary so that we can find the right “section” of a page that might be nested. Even though we only want to show one or two levels publicly, we still need to get the full menu so we can find that info.