Layout

shortcut buttons 选项
.nav-list 侧边栏内容、项
expand/collapse button 侧边栏折叠按钮

...

</div>

...

</ul>

...

</div>

</div>

Menu item 菜单项

一级菜单

<li>

Item text

</span>

</a>

....

</ul>

</li>

菜单图标： .menu-icon 样式，例如 <i class="menu-icon fa fa-caret-right"></i>

Shortcut Buttons

</div>

</div>

Minimize Button 折叠按钮

</div>

Other notes 菜单按钮，其他元素

徽章

Menu Text

</span>

Tooltip 提示：

Menu Text

</span>

Basic functions

Js构造侧边栏

$('.sidebar').ace_sidebar();

//or

$('#my-specific-sidebar').ace_sidebar();

.sidebar 元素是默认的

菜单切换，展开、收缩

$('.sidebar').ace_sidebar('toggleMenu');

$('.sidebar').ace_sidebar('toggleMenu', toggleButton);

//if there is an optional toggleButton element, its icons will be flipped

图表反转

记录保存到cookie

$('.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]);

Sidebar scrollbars 侧边栏滚动条

有两种方法：

第一种：只适用于固定的侧边栏，没有元素溢出

第二种：

添加滚动条

$('.sidebar').ace_sidebar_scroll({

//options here

});

scroll_to_active滚动到页面加载活动项目include_shortcuts包括滚动区域的快捷按钮include_toggle包括滚动区域或不切换按钮scroll_style滚动条样式作为自定义滚动条的部分描述mousewheel_lock是否锁定鼠标滚轮在侧边栏即使没有滚动条或者不only_if_fixed只有第二法smooth_scroll使用第一种方法只。指定要启用或禁用平滑滚动错误数

$('#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

Submenu positioning and scrollbars 子菜单和滚动条定位

隐藏延迟和滚动条功能调整菜单

$('.sidebar').ace_sidebar_hover({

//options here

});

$('#my-sidebar').ace_sidebar_hover('updateStyle', 'scroll-dark no-track');

$('#my-sidebar').ace_sidebar_hover('changeDir', 'left');

Default mobile menu style

.sidebar需要添加： . responsive 样式

还可以添加 .push_away

</div>

data-auto-hide=true 点击菜单其他区域，自动隐藏

</div>

Automatically minimized menu style 自动缩小菜单

.responsive-min .sidebar-toggle .sidebar-expand

...

</div>

...

</div>

</div>

Bootstrap collapse style

</div>

Toggle Button 切换按钮

<span class="sr-only">Toggle sidebar</span>

</button>

</div>

Horizontal Sidebar 水平

只使用于 991px 大屏幕

.sidebar 添加 .h-sidebar

.navbar添加.h-navbar

</div>

</div>

.hover 子菜单鼠标悬停

...

</a>

...

</ul>

</li>

</ul>

.no-gap 没有间隙

.lower-highlight 移动高亮显示

.h-navbar

</div>

</div>

Submenu on Hover 子菜单悬停

在子菜单之前 li 标签添加 .hover 、.arrow

...

</a>

...

</ul>

</li>

</ul>

Compact Sidebar 紧凑的侧边栏

.sidebar 添加.compact样式

</div>

Highlight Item 高亮突出

li 标签添加 .highlight

...

</li>

</ul>

Fixed Sidebar 固定侧边栏

.sidebar 添加 .sidebar-fixed

</div>

Minimized Sidebar 最小侧边栏

.sidebar 添加 .menu-min

</div>

Multiple Sidebar 多个侧边栏

每一个 div 元素都有 .sidebar 样式

</div>

</div>

第二个栏不水平，.page-content 、.footer 应移到最后

</div>

</div>

</div>

Ajax

//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});

})

non-Ajax

Sidebar 侧边栏

Sidebar 侧边栏

Sidebar basics

Sidebar functions

Responsive Sidebar 响应式侧边栏(手机端)

Sidebar Options 侧边栏选项

Sidebar Active Item 侧边栏活动的菜单项

results matching ""

No results matching ""

Sidebar 侧边栏

Sidebar basics

Sidebar functions

Responsive Sidebar 响应式 侧边栏(手机端)

Sidebar Options 侧边栏选项

Sidebar Active Item 侧边栏活动的菜单项

results matching ""

No results matching ""

Responsive Sidebar 响应式侧边栏(手机端)