Megamenu 的中心下拉菜单

Question

我手上有个小问题，我有一个 Megamenu，可以在移动和桌面上使用，我想让菜单中心的内容对齐，但我只能左对齐或右对齐。我可以将中心与

对齐

> ul {
display: flex;  //it was none
justify-content: center;
align-self: center;
...
}

但是悬停始终启用并且移动版本打开了所有菜单..我关闭了每个菜单，然后菜单按预期工作.. 我开始使用的菜单是这个 fiddle：

Fiddle 实际代码与

display: flex;
justify-content: space-between;

按预期工作，但菜单全部打开..

FIDDLE: https://codepen.io/anon/pen/JpBrRp

我的代码：

<div class="menu-container">
    <div class="menu">
        <nav  class="navbar-toggleable-md">
            <div id="toggle" class="navbar-toggler"><a></a>
            </div>
        </nav>

        <ul id="my_styles" class="rowcenter" >
            <li>
                <ul>
                    <li>
                        <a href="#">menu</a>
                        <ul>
                            <li><a href=...</a>x</li>
                            <li><a href=..</a>z</li>
                        </ul>
                    </li>
                </ul>
            </li>

.css:

.menu-container {
    width: 100%;
    margin: 0 auto;
}

.menu {
    > ul {
        margin: 0 auto;
        width: 100%;
        list-style: none;
        padding: 0;
        position: relative;
        //position: relative;
        /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        &:before,
        &:after {
            content: "";
            display: table;
        }
        &:after {
            clear: both;
        }
        > li {
            float: left;
            padding: 0px;
            margin: 0px;
            a {
                text-decoration: none;
                padding: 1.5em 2.1em;
                display: block;
            }
            &:hover {

            }
            > ul {
                display: none;
                justify-content: center;
                align-self: center;
                width: 100%;
                background: #3a3f48;
                padding: 20px;
                position: absolute;
                z-index: 1001;
                left: 0;
                margin: 0;
                list-style: none;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                &:before,
                &:after {
                    content: "";
                    display: table;
                }
                &:after {
                    clear: both;
                }
                > li {
                    margin: 0;
                    padding-bottom: 0;
                    list-style: none;
                    width: 25%;
                    background: none;
                    float: left;
                    a {
                        color: #ffffff;
                        padding: .2em 0;
                        width: 95%;
                        display: block;
                        border-bottom: 1px solid #ccc;
                    }
                    > ul {
                        display: block;
                        padding: 0;
                        margin: 10px 0 0;
                        list-style: none;
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box;
                        &:before,
                        &:after {
                            content: "";
                            display: table;
                        }
                        &:after {
                            clear: both;
                        }
                        > li {
                            float: left;
                            width: 100%;
                            padding: 10px 0;
                            margin: 0;
                            font-size: .8em;
                            a {
                                border: 0;
                            }
                        }
                    }
                }
                &.normal-sub {
                    width: 300px;
                    left: auto;
                    padding: 10px 20px;
                    > li {
                        width: 100%;
                        a {
                            border: 0;
                            padding: 1em 0;
                        }
                    }
                }
            }
        }
    }
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (max-width: 959px) {
    .menu-container {
        width: 100%;
    }
    .menu-mobile {
        display: block;
    }
    .menu-dropdown-icon {
        &:before {
           //display: block;
        }
    }
    .menu {
        > ul {
            display: none;
            > li {
               width: 100%;
                float: none;
                display: block;
                a {
                    padding: 1.5em;

                    display: block;
                }
                > ul {
                    position: relative;
                    &.normal-sub {
                        width: 100%;
                    }
                    > li {
                        float: none;
                        width: 100%;
                        margin-top: 20px;
                        &:first-child {
                            margin: 0;
                        }
                        > ul {
                            position: relative;
                            > li {
                                float: none;
                            }
                        }
                    }
                }
            }
        }
        .show-on-mobile {
            display: block;
        }
    }
}

JS:

/* global $ - Mega menu ***********/
      $(document).ready(function() {

          "use strict";

          $('.menu > ul > li:has(ul)').addClass('menu-dropdown-icon');
          //Checks if li has sub (ul) and adds class for toggle icon - just an UI

          $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
          //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)

          $(".menu > nav > div > a").before("<a href=\"#\" class=\"menu-mobile\"><img width='34px' height='34px' src=\"/assets/images/Menu_icons/hmb.png\"></a>");

          //Adds menu-mobile class (for mobile toggle menu) before the normal menu
          //Mobile menu is hidden if width is more then 959px, but normal menu is displayed
          //Normal menu is hidden if width is below 959px, and jquery adds mobile menu
          //Done this way so it can be used with wordpress without any trouble

          $(".menu > ul > li").hover(function(e) {
              if ($(window).width() > 943) {
                  $(this).children("ul").stop(true, false).fadeToggle(150);
                  e.preventDefault();
              }
          });
          //If width is more than 943px dropdowns are displayed on hover

          $(".menu > ul > li").click(function() {
              if ($(window).width() <= 943) {
                  $(this).children("ul").fadeToggle(150);
              }
          });
          //If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from Whosebug)

          $(".menu-mobile").click(function(e) {
              $(".menu > ul").toggleClass('show-on-mobile');
              e.preventDefault();
          });
          //when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from Whosebug)

      });

Answer 1

尝试显示 flex 并证明主要 ul:

display: flex; justify-content: space-between;

Answer 2

Fiddle 的实际代码：

display: flex;
justify-content: space-between;

按预期工作，但菜单全部打开..

FIDDLE: https://codepen.io/anon/pen/JpBrRp

Answer 3

我得到了答案，我认为这不是正确的答案，但它有效..

在 .css 我创建了一个名为 center 的 class：

.center{
    display: flex !important;
}

然后在 .JS 上我创建了一个打开子菜单 ('ul') 和 toogleclass 的函数以覆盖 class center:

$(".menu > ul > li").click(function(e) {
              if ($(window).width() > 943) {
                  $(this).children('ul').fadeToggle(15);
                  $(this).children('ul').toggleClass('center');
                  e.preventDefault();
              }
          });

但是我有一个小问题：打开子菜单（单击主菜单的一项）时，如果我单击该子菜单（'ul'), 或者子菜单上的一个特定项目，它按我想要的方式工作，但如果我点击其他菜单项目，前一个子菜单保持打开状态，创建子菜单层，我必须点击它们才能使它们消失（或点击主菜单使它们出现的菜单项）我不确定我是否清楚..

这里有一个Fiddlehttps://codepen.io/anon/pen/JpBrRp

Megamenu 的中心下拉菜单

Center dropdown on Megamenu

javascript

css

jquery

megamenu

angularjs