Layouts / Main Menu

Collapsing/Expanding
To expand the main menu on small screens, add class .mme to the <body>. To collapse the main menu on desktops, add class .mmc to the <body>.

  
Menu settings
Updated
You can find the main menu settings in the javascripts/sources/app.coffee file. Customize them by passing options in the PixelAdmin.start method. I would not recommend editing the source files, because you may have trouble with code update in the future.
Option Default Description
accordion true The main menu acts like an accordion, i.e. when you open a submenu, all other opened submenus will close.
animation_speed 250 Animation duration.
store_state true Store the main menu 'expanded/collapsed' state in the localStorage/cookies.
store_state_key 'mmstate' Key in the localStorage/cookies.
disable_animation_on ['small'] Disable animation on specified screen sizes for the perfomance reason. Possible values: 'small', 'tablet', 'desktop'.
dropdown_close_delay 300 Dropdown close delay in milliseconds. Note: Don't use values smaller than 100.
detect_active true Detect active item.
detect_active_predicate function(href, url) {
  return href === url;
}		 Function that used to find active item by comparing item link and page location. Called for each menu item.
href - item link;
url - page location.
Menu API
Updated
Access to the main menu instance: PixelAdmin.plugins.main_menu.METHOD.
Method Description
toggle() Toggle main menu collapsed/expanded state.
toggleSubmenu(li)
MM EXPANDED
Expand/collapse menu item.
collapseSubmenu(li)
MM EXPANDED
Collapse main menu item .mm-dropdown.
expandSubmenu(li)
MM EXPANDED
Expand main menu item .mm-dropdown.
collapseAllSubmenus(li)
MM EXPANDED
Collapse all opened main menu subitems .mm-dropdown.
openDropdown(li, freeze=false)
MM COLLAPSED
Open main menu dropdown .mm-dropdown.
closeCurrentDropdown(force=false)
MM COLLAPSED
Close opened dropdown .mm-dropdown.
freezeDropdown(li)
MM COLLAPSED
Freeze dropdown.
detectActiveItem() Detect active item.
Menu position
By default the main menu places on the left side of the window. To put the menu on the right side, just add class .main-menu-right to the <body>. You could open demo settings and try it.

PIXELADMIN
HIDE MAIN MENU
You can hide the main menu and toggle button by adding class .no-main-menu to the <body>. You would open demo settings and try it. To completely remove the main menu from your project:

  1. Open the jscompiler.js file and remove line build/components/main-menu.js;
  2. Open the styles/pixel-admin.less file and remove line @import './pixel-admin-less/main-menu.less';
  3. Remove #main-menu markup from your html;
  4. Run node csscompiler.js and node jscompiler.js commands from the console (the compilers are cross platform)

Menu content
You can add custom content blocks to the main menu. To add a top block, just insert <div class="menu-content top">Content...</div> before <div class="navigation">...</div>. To add a bottom block insert <div class="menu-content">Content...</div> after <div class="navigation">...</div>.

.menu-content.top
.navigation
.menu-content