Please note that for most Javascript functions to perform without problem, you should specify id attribute of elements, for example, sidebar element can have
#sidebar id attribute.
mustache/app/views/layouts/partials/_shared/sidebar.mustache
mustache/app/views/layouts/partials/_shared/sidebar/item.mustache
.menu-icon class.
.menu-text element,
but this isn't needed for deeper levels:
.sidebar-shortcuts-large and
.sidebar-shortcuts-mini which is displayed when sidebar is minimized (collapsed)
data-target attribute which points to sidebar ID.
.sidebar-expand button for sidebar in 2nd mobile view style.
data-target attribute which points to sidebar ID.
data-icon1
and data-icon2 attributes to specify icons to use in collapsed/expanded state
.menu-text element:
You can also include a tooltip:
$('.sidebar').ace_sidebar();
//or
$('#my-specific-sidebar').ace_sidebar();
.sidebar elements are initiliazed on page load.
$('.sidebar').ace_sidebar('toggleMenu');
$('.sidebar').ace_sidebar('toggleMenu', toggleButton);
//if there is an optional toggleButton element, its icons will be flipped
$('.sidebar').ace_sidebar('toggleMenu', false);
//optional false value means don't save changes to cookies
$('.sidebar').ace_sidebar('toggleMenu', [toggleButton , false/true ]);
//optional second value means save or don't save changes to cookies
$('#my-sidebar').ace_sidebar('collapse');
$('#my-sidebar').ace_sidebar('collapse', toggleButton);
//if there is an optional toggleButton element, its icons will be flipped
$('#my-sidebar').ace_sidebar('toggle', [sub, 300]);
//first parameter is submenu to toggle and second is duration in milliseconds.
$('.sidebar').ace_sidebar_scroll({
//options here
});
By default all .sidebar elements have scrollbars enabled on page load
and activated when appropriate.
scroll_to_active scroll to active item on page loadinclude_shortcuts include shortcut buttons in scroll areainclude_toggle include toggle button in scroll area or notscroll_style scrollbar style as described in custom scrollbars sectionmousewheel_lock whether to lock mouse wheel on sidebar even if it hasn't scrollbars or notonly_if_fixed used in 2nd approach onlysmooth_scroll used in first approach only. Specify a number to enable smooth scrolling or false to disablereset reset scrollbarsupdateStyle updates scrollbars style class:
$('#my-sidebar').ace_sidebar_scroll('updateStyle', 'scroll-dark no-track');
//for example such update is done which switching to another skin in Ace's demo
$('.sidebar').ace_sidebar_hover({
//options here
});
By default all .sidebar elements have this feature enabled on page load
and activated when appropriate.
sub_hover_delay time in milliseconds to hide a submenu after mouse leaves it. Default is 750sub_scroll_style scrollbar style as described in custom scrollbars sectionreset reset scrollbarsupdateStyle updates submenu scrollbars style class:
$('#my-sidebar').ace_sidebar_hover('updateStyle', 'scroll-dark no-track');
//for example it can be done when switching to another skin dynamically
changeDir changes scrollbars direction (left) for example if you are using RTL:
$('#my-sidebar').ace_sidebar_hover('changeDir', 'left');
@grid-float-breakpoint-max variable
and recompiling LESS files.
.responsive class to .sidebar element.
.push_away class to .sidebar to push content when sidebar is shown:
data-auto-hide=true attribute for sidebar to automatically hide when
user clicks outside of its area:
.responsive-min class to .sidebar element
and there should also be an invisible toggle button present, right before sidebar.
.sidebar-toggle.sidebar-expand button, expands sidebar in mobile view:
(More info)
data-target attribute which points to sidebar ID.
data-auto-hide=true attribute for sidebar to automatically become minimized when
user clicks outside of its area:
.collapse.navbar-collapse class
to .sidebar element and have the correct toggle buttons inside navbar:
.navbar-header) or inside it
and it should have data-target attribute which points to sidebar's ID.
.sidebar element.
Toggle sidebar
span.toggler-text inside it and you can change
MENU text to something else by modifying
@toggler-text variable inside assets/css/less/sidebar/old-toggle-button.less
and recompiling ace.less
.menu-toggler element right before .sidebar
data-toggle and data-target attributes:
<button class="pull-right navbar-toggle collapsed" type="button"
data-toggle="collapse" data-target=".sidebar">
<span class="sr-only">Toggle sidebar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
.h-sidebar class to .sidebar and .h-navbar to .navbar element:
.hover class to all LI elements, so that submenus are shown on mouse hover:
.no-gap to horizontal menu to remove gap.
.lower-highlight to move the highlight bar lower.
.h-navbar to .navbar to add shadow to it.
mustache/app/views/assets/scripts/top-menu.js
.no-margin-left class to h1 header element or
add .no-margin class to the .row element which encloses content area!
.hover class to each LI element
and also add .arrow element before submenus.
@screen-hover-menu variable inside
assets/css/less/variables.less and recompile ace.less
or use CSS builder tool.
.compact class to .sidebar element:
@@screen-compact-menu variable inside
assets/css/less/variables.less and recompile ace.less
or use CSS builder tool.
.highlight to LI elements:
.sidebar-fixed class to .sidebar element makes it fixed by default:
.menu-min class to .sidebar element
makes it minimized by default:
.sidebar class and an ID attribute.
.main-content-inner:
.page-content should also
have .main-content class and .footer should be moved
after it:
//inside the function when ajax content is loaded
//somehow get a reference to our newly clicked(selected) element's parent "LI"
var new_active = $(this).parent();
//remove ".active" class from all (previously) ".active" elements
$('.nav-list li.active').removeClass('active');
//add ".active" class to our newly selected item and all its parent "LI" elements
new_active.addClass('active').parents('.nav-list li').addClass('active');
//you can also update breadcrumbs:
var breadcrumb_items = [];
//$(this) is a reference to our clicked/selected element
$(this).parents('.nav-list li').each(function() {
var link = $(this).find('> a');
var text = link.text();
var href = link.attr('href');
breadcrumb_items.push({'text': text, 'href': href});
})
//now we have a breadcrumbs list and can replace breadcrumbs area
//suppose we have a list of pages (associative array or other data structure)
//$menu_list = ... //retrieved from database
//or
$menu_list = array(
'id or name of page 1' => array (
'href' => '#link1',
'text' => 'item name or text',
'parent' => 'parent id or name'
)
,
'id or name of page 2' => array (
'href' => '#link2',
'text' => 'item name or text',
'parent' => 'parent id or name'
)
,
'new-user' => array (
'href' => 'user/create',
'text' => 'Add User',
'parent' => 'operations'
)
...
);
//we somehow know the ID or tag or hash of the current page
//perhapse from a database lookup or by simply checking its URL
//for some pointers such as ID, file name, category name, etc ...
$current_page = 'new-user';
$breadcrumbs = array();//let's create our breadcrumbs array as well
//make_me should be a reference to current_item not a copy of it
$mark_me = &$menu_list[$current_page];
$open = false;
while(true) {//you can also use a recursive function instead of a loop
$mark_me['active'] = true;//mark this as "active"
if( $open ) $mark_me['open'] = true;//mark this as "open"
$breadcrumbs[] = $mark_me;
$parent_id = $mark_me['parent'];//see if it has a parent
if( $parent_id == null || !isset($menu_list[$parent_id]) ) break;//if not, break
$mark_me = &$menu_list[$parent_id];//set item's parent as the new "mark_me" and repeat
$open = true;//parent elements should be marked as "open" too
}
foreach($menu_list as $id => $menu_item) {
print('<li class="');
if( $menu_item['active'] ) print('active');
if( $menu_item['open'] ) print(' open');
print('">');
//something like <li class="active open"> will be printed
//...
//print other parts of menu item
}
//now we also have a list of breadcrumb items to print later
//suppose we have a list of pages (associative array or other data structure)
//var menu_list = ... //retrieved from database
//or
var menu_list = {
'id or name of page 1' : {
'href' : '#link1',
'text' : 'item name or text',
'parent' : 'parent id or name'
}
,
'id or name of page 2' : {
'href' : '#link2',
'text' : 'item name or text',
'parent' : 'parent id or name'
}
,
'new-user' : {
'href' : 'user/create',
'text' : 'Add User',
'parent' : 'operations'
}
...
};
//we somehow know the ID or tag or hash of the current page
//perhapse from a database lookup or by simply checking its URL
//for some pointers such as ID, file name, category name, etc ...
var current_page = 'new-user';
var breadcrumbs = [];//let's create our breadcrumbs array as well
//make_me should be a reference to current_item not a copy of it
var mark_me = menu_list[current_page];
var open = false;
while(true) {//you can also use a recursive function instead of a loop
mark_me['active'] = true;//mark this as "active"
if( open ) mark_me['open'] = true;//mark this as "open"
breadcrumbs.push(mark_me);
var parent_id = mark_me['parent'];//see if it has a parent
if( parent_id == null || !(parent_id in menu_list) ) break;//if not, break
mark_me = menu_list[parent_id];//set item's parent as the new "mark_me" and repeat
open = true;//parent elements should be marked as "open" too
}
var output = '';
for(var id in menu_list) if(menu_list.hasOwnProperty(id)) {
var menu_item = menu_list[id];
output += '<li class="';
if( menu_item['active'] ) output += 'active';
if( menu_item['open'] ) output += ' open';
output += '">';
//something like <li class="active open"> will be printed
//...
//print other parts of menu item
}
console.log(output);
//now we also have a list of breadcrumb items to print later
$mark_me = $menu_list[$current_page]
, when you modify $mark_me and for example mark it as active,
changes are not reflected in
$menu_list[$current_page] and therefore, when printing the $menu_list list,
you won't have modified items.
$mark_me = &$menu_list[$current_page]
$mark_me is a reference to $menu_list[$current_page]
and therefore