如何添加多级菜单
How to add multi level menu?
我是新来的。我从一个网站下载了AdminEx引导程序主题,我发现这个主题没有多级菜单。但我需要同样的东西。我在这里附上了侧边栏HTML和JS脚本。请帮我建造这个。
HTML代码[主题]:
<ul class="nav nav-pills nav-stacked custom-nav">
<li><a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
<li class="menu-list"><a href=""><i class="fa fa-laptop"></i> <span>Layouts</span></a>
<ul class="sub-menu-list">
<li><a href="blank_page.html"> Blank Page</a></li>
<li><a href="boxed_view.html"> Boxed Page</a></li>
<li><a href="leftmenu_collapsed_view.html"> Sidebar Collapsed</a></li>
<li><a href="horizontal_menu.html"> Horizontal Menu</a></li>
</ul>
</li>
<li class="menu-list"><a href=""><i class="fa fa-book"></i> <span>UI Elements</span></a>
<ul class="sub-menu-list">
<li><a href="general.html"> General</a></li>
<li><a href="buttons.html"> Buttons</a></li>
<li><a href="tabs-accordions.html"> Tabs & Accordions</a></li>
<li><a href="typography.html"> Typography</a></li>
<li><a href="slider.html"> Slider</a></li>
<li><a href="panels.html"> Panels</a></li>
<li><a href="widgets.html"> Widgets</a></li>
</ul>
</li>
</ul>
我想要具有相同可折叠效果的多级,如:
<ul class="nav nav-pills nav-stacked custom-nav">
<li><a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
<li class="menu-list"><a href="#"><i class="fa fa-book"></i> <span>UI Elements</span></a>
<ul class="sub-menu-list">
<li><a href="#">General</a></li>
<li>
<a href="#">Buttons</a>
<ul>
<li><a href="#">Color Buttons</a></li>
<li><a href="#">Image Buttons</a></li>
</ul>
</li>
</ul>
</li>
</ul>
我试图在主题(script.JS)中找到JS代码:
(function() {
"use strict";
// custom scrollbar
$("html").niceScroll({styler:"fb",cursorcolor:"#65cea7", cursorwidth: '6', cursorborderradius: '0px', background: '#424f63', spacebarenabled:false, cursorborder: '0', zindex: '1000'});
$(".left-side").niceScroll({styler:"fb",cursorcolor:"#65cea7", cursorwidth: '3', cursorborderradius: '0px', background: '#424f63', spacebarenabled:false, cursorborder: '0'});
$(".left-side").getNiceScroll();
if ($('body').hasClass('left-side-collapsed')) {
$(".left-side").getNiceScroll().hide();
}
// Toggle Left Menu
jQuery('.menu-list > a').click(function() {
var parent = jQuery(this).parent();
var sub = parent.find('> ul');
if(!jQuery('body').hasClass('left-side-collapsed')) {
if(sub.is(':visible')) {
sub.slideUp(200, function(){
parent.removeClass('nav-active');
jQuery('.main-content').css({height: ''});
mainContentHeightAdjust();
});
} else {
visibleSubMenuClose();
parent.addClass('nav-active');
sub.slideDown(200, function(){
mainContentHeightAdjust();
});
}
}
return false;
});
function visibleSubMenuClose() {
jQuery('.menu-list').each(function() {
var t = jQuery(this);
if(t.hasClass('nav-active')) {
t.find('> ul').slideUp(200, function(){
t.removeClass('nav-active');
});
}
});
}
function mainContentHeightAdjust() {
// Adjust main content height
var docHeight = jQuery(document).height();
if(docHeight > jQuery('.main-content').height())
jQuery('.main-content').height(docHeight);
}
// class add mouse hover
jQuery('.custom-nav > li').hover(function(){
jQuery(this).addClass('nav-hover');
}, function(){
jQuery(this).removeClass('nav-hover');
});
// Menu Toggle
jQuery('.toggle-btn').click(function(){
$(".left-side").getNiceScroll().hide();
if ($('body').hasClass('left-side-collapsed')) {
$(".left-side").getNiceScroll().hide();
}
var body = jQuery('body');
var bodyposition = body.css('position');
if(bodyposition != 'relative') {
if(!body.hasClass('left-side-collapsed')) {
body.addClass('left-side-collapsed');
jQuery('.custom-nav ul').attr('style','');
jQuery(this).addClass('menu-collapsed');
} else {
body.removeClass('left-side-collapsed chat-view');
jQuery('.custom-nav li.active ul').css({display: 'block'});
jQuery(this).removeClass('menu-collapsed');
}
} else {
if(body.hasClass('left-side-show'))
body.removeClass('left-side-show');
else
body.addClass('left-side-show');
mainContentHeightAdjust();
}
});
searchform_reposition();
jQuery(window).resize(function(){
if(jQuery('body').css('position') == 'relative') {
jQuery('body').removeClass('left-side-collapsed');
} else {
jQuery('body').css({left: '', marginRight: ''});
}
searchform_reposition();
});
function searchform_reposition() {
if(jQuery('.searchform').css('position') == 'relative') {
jQuery('.searchform').insertBefore('.left-side-inner .logged-user');
} else {
jQuery('.searchform').insertBefore('.menu-right');
}
}
// panel collapsible
$('.panel .tools .fa').click(function () {
var el = $(this).parents(".panel").children(".panel-body");
if ($(this).hasClass("fa-chevron-down")) {
$(this).removeClass("fa-chevron-down").addClass("fa-chevron-up");
el.slideUp(200);
} else {
$(this).removeClass("fa-chevron-up").addClass("fa-chevron-down");
el.slideDown(200); }
});
$('.todo-check label').click(function () {
$(this).parents('li').children('.todo-title').toggleClass('line-through');
});
$(document).on('click', '.todo-remove', function () {
$(this).closest("li").remove();
return false;
});
$("#sortable-todo").sortable();
// panel close
$('.panel .tools .fa-times').click(function () {
$(this).parents(".panel").parent().remove();
});
// tool tips
$('.tooltips').tooltip();
// popovers
$('.popovers').popover();
})(jQuery);
主题实时URL:http://themeforest.net/item/adminex-bootstrap-3-responsive-admin-template/7399319
我认为通过jquery可以实现。请帮助构建相同的。谢谢你。
您需要做一些更改:
html
的变化只是一个例子,当然你会根据你的学生来改变它。
index.html
来自
<li><a href="blank_page.html"> Blank Page</a></li>
到
<li class="menu-list nav-active">
<a href="">More options</a>
<ul class="sub-menu-list">
<li><a href="boxed_view.html">More option 1</a></li>
<li><a href="boxed_view.html">More option 1</a></li>
</ul>
</li>
/js/scripts.js
来自
jQuery('.menu-list').each(function() {
var t = jQuery(this);
if(t.hasClass('nav-active')) {
t.find('> ul').slideUp(200, function(){
t.removeClass('nav-active');
});
}
});
到
elem.parent().siblings('.nav-active').find('> ul').slideUp(200, function(){
t.removeClass('nav-active');
});
相关文章:
- jQuery-适用于移动设备的多级菜单
- 可替代多级上下文菜单
- slideDown菜单-添加更多级别的问题
- 悬停样式应该在动态加载多级菜单时保持单击状态
- 多级手风琴式导航菜单
- 如何在不插入整个代码的情况下嵌入现有的多级下拉菜单
- 如果菜单处于活动状态或非活动状态,则切换图标的类.多级按钮菜单
- 使用 jquery 的多级下拉菜单
- 记住菜单状态垂直多级导航
- 多级响应菜单..移动和非移动之间的转换
- 多级菜单的角度指令
- 常见问题解答的多级菜单
- 如何添加多级菜单
- 如何停止 e.prevent默认在创建响应式多级菜单时禁用子链接
- 使用Knockout JS和Bootstrap的多级菜单
- 响应多级菜单-如何关闭菜单时,链接被点击
- Codrops多级菜单-加载html页面,而不是ajax内容,但保持动画
- 使用js拖放进行多级菜单管理
- 多级菜单
- 尝试为响应式多级菜单制作一个小脚本