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
The main menu settings are in the javascripts/sources/app.coffee file. You can change it 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.
Menu API
Access to the main menu instance: PixelAdmin.plugins.main_menu.METHOD.
Method Description
collapseSubmenu($elem, refreshScroll)
MM EXPANDED
Collapse the main menu submenu .mm-dropdown.
expandSubmenu($elem, refreshScroll)
MM EXPANDED
Expand the main menu submenu .mm-dropdown.
openDropdown($elem, freeze=false)
MM COLLAPSED
Open the main menu dropdown .mm-dropdown.
closeCurrentDropdown(force=false)
MM COLLAPSED
Close the opened dropdown .mm-dropdown.
freezeDropdown($dd)
MM COLLAPSED
Freeze dropdown.
turnOnAnimation() Enable main menu expand/collapse animations.
turnOffAnimation() Disable main menu expand/collapse animations.
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