Question

我手上有一点问题，我有一个Megamenu，适用于手机和桌面，我希望菜单中心的内容对齐，但我只能左右对齐。我可以将中心与

对齐

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

但随后悬停总是启用，移动版本打开所有菜单..我关闭它们中的每一个，然后菜单按预期工作.. 我开始的菜单就是这个小提琴：

用

代替实际代码

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 stackoverflow)

          $(".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 stackoverflow)

      });

Answer 1

尝试显示主要ul：

的flex和对齐方式

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

Answer 2

实际代码的小提琴：

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

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

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

Answer 3

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

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

.center{
    display: flex !important;
}

然后在.JS上我创建了一个打开子菜单（'ul'）和toogleclass的函数来覆盖类中心：

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

但是我有一点问题：当打开一个子菜单（点击主菜单的一个项目）时，如果我点击文档正文的任何地方，我希望该子菜单消失，如果我点击该子菜单（'ul'），或者子菜单上的一个特定项目它可以像我想要的那样工作，但如果我点击其他菜单项，前一个子菜单会保持打开状态，创建一个子菜单层，我必须点击这些子菜单才能使它们消失（或点击制作的主菜单项他们出现了）我不确定我是否清楚..

这是一个小提琴 https://codepen.io/anon/pen/JpBrRp

Megamenu的中心下拉列表

3 个答案: