我有一个菜单,如这个 fiddle 所示:
http://jsfiddle.net/Gk_999/mtfhptwo/3
(function ($) {
$.fn.menumaker = function (options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function () {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function () {
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function () {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function () {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function () {
if ($(window).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function ($) {
$(document).ready(function () {
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
});
})(jQuery);
现在,在 jsFiddle 中,由于菜单是响应式的,所以工作正常。 但是,如果我们全屏运行它,将鼠标悬停在父 li 列表上时,它的子项会强制显示在右侧,如下所示。
问题是,如果父列表中的元素太多,&如果我们将鼠标悬停在最右边的元素上,它的子元素就会强制出现在右边,&移出屏幕窗口,结果,一个出现水平滚动条。
所以当 children 离开屏幕时,我想让他们在左边,而不是右边。
编辑: 在此处检查全屏输出:https://jsfiddle.net/Gk_999/mtfhptwo/3/embedded/result/
任何帮助...???
最佳答案
我猜这只能用 JavaScript 来完成。
使用以下 mouseenter
事件更新您的就绪函数。当有人将鼠标移到具有 has-sub
类的 li
上时,它将触发。
(function ($) {
$(document).ready(function () {
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
$("li.has-sub").on("mouseenter", function(){
var element = this).find("ul");
//remove the class beforehand so it always defaults to the right.
$(element.removeClass("showleft");
//if the rendered menu and it's page offset are wider then the body
if (element.offsetWidth + element.offset().left > document.body.offsetWidth)
{
element.addClass("showleft");
}
});
});
将此添加到 css:
.showleft {
left : -230px !important;
}
成功了,看这里:
关于javascript - HTML 自定义菜单控件问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31876304/