HTML 自定义菜单控件问题

Question

我的菜单如下所示 fiddle:

(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 中，由于菜单是响应式的，所以工作正常。但是，如果我们运行它全屏显示，当鼠标悬停在 parent li 列表上时，它的 children 会强制出现在右侧，如下所示。

问题是，如果我们在parent列表中的元素太多，&如果我们悬停在最右边的元素上，它的children就会强制出现在右边，&移出屏幕 window，结果出现水平 scroll-bar。

所以我想 children 在他们移出屏幕时在左边，而不是在右边。

编辑： 在此处检查全屏输出：https://jsfiddle.net/Gk_999/mtfhptwo/3/embedded/result/

任何帮助...???

Answer 1

首先，做一件事，使用 java 脚本和您的子 div 获取文档的宽度，设置子菜单悬停时生成的最小宽度 div 如果它大于最小高度而不是将你的子菜单（sub div）动画化到你想要的任何地方，或者你也可以使用 java 脚本 css 属性赋予样式。

Answer 2

我猜这只能用 JavaScript 来完成。

使用以下 mouseenter 事件更新您的就绪函数。当有人将鼠标移到 li 和 has-sub class.

上时，它会触发

(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;    
}

有效，看这里：

http://jsfiddle.net/mtfhptwo/4/

HTML 自定义菜单控件问题

HTML Custom Made Menu Control issue

html

javascript

css

menu

html-lists