Please note that for most Javascript functions to perform without problem, you should specify id attribute of elements, for example, sidebar element should 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)
.sidebar-expand
button for sidebar in 2nd mobile view style.
data-icon1
and data-icon2
attributes to specify icons to use in collapsed/expanded state
.menu-text
element:
You can also include a tooltip:
@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:
.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)
.collapse.navbar-collapse
class
to .sidebar
element and have the correct toggle buttons inside navbar:
.navbar-header
) or inside it:
.sidebar
element:
Toggle sidebarIt should have a
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:
mustache/app/views/assets/scripts/top-menu.js
.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:
//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