下拉菜单从右到左动态地改变打开方向取决于浏览器宽度

Question

我正在构建一个递归菜单栏。它有多个 ul li ul li ul li。菜单元素的打开位置是从左到右。

但是，如果浏览器宽度很小，那么我打开的菜单项;然后菜单项转到右侧屏幕。

我希望如果浏览器宽度小于我打开的菜单项，则菜单项打开方向从右到左更改。

我尝试构建jQuery代码，但无法正常工作。

我的问题是：

• 如果浏览器宽度小于菜单菜单方向已更改但有一些错误，

• 如果浏览器调整的大小大于菜单，菜单宽度不会达到100%，需要刷新浏览器！

  $(document(.ready(function(( {

  $(".anamenu li").on('mouseenter mouseleave', function(e) {
      e.preventDefault;
      if ($('ul', this).length) {
          var elm = $('ul:last', this);
          var off = elm.offset();
          var l = off.left;
          var w = elm.width();
          var docH = $(".disgovde").height();
          var docW = $(".disgovde").width();
          var isEntirelyVisible = (l + w <= docW);
          if (!isEntirelyVisible) {
              $("ul.anamenu li ul ul > li ul").css({
                  "left": "auto",
                  "right": "100%",
              });
              $("ul.anamenu li ul").css({
                  "left": "auto",
                  "right": "0",
              });
              $("ul.anamenu li > ul ul").css({
                  "left": "200px",
                  "right": "0",
              });
              $("ul.anamenu > li ul ul").css({
                  "left": "auto",
                  "right": "100%",
              });
          } else {
              $("ul.anamenu  li ul ul > li ul").css({
                  "left": "200px",
                  "right": "0",
              });
  
          }
      }
  });
  

  }(;

$(document).ready(function() {
        $(".anamenu li").on('mouseenter mouseleave', function(e) {
            e.preventDefault;
            if ($('ul', this).length) {
                var elm = $('ul:last', this);
                var off = elm.offset();
                var l = off.left;
                var w = elm.width();
                var docH = $(".disgovde").height();
                var docW = $(".disgovde").width();
                var isEntirelyVisible = (l + w <= docW);
                if (!isEntirelyVisible) {
                    $("ul.anamenu li ul ul> li ul").css({
                        "left": "auto",
                        "right": "100%",
                    });
                    $("ul.anamenu li ul").css({
                        "left": "auto",
                        "right": "0",
                    });
                    $("ul.anamenu li > ul ul").css({
                        "left": "200px",
                        "right": "0",
                    });
                    $("ul.anamenu > li ul ul").css({
                        "left": "auto",
                        "right": "100%",
                    });
                } else {
                    $("ul.anamenu li ul ul > li ul").css({
                        "left": "200px",
                        "right": "0",
                    });
                }
            }
        });
    });

<!-- begin snippet: js hide: false console: true babel: false -->

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
a:hover {
    text-decoration: none;
}
body {
    height: 100vh;
    /*
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    */
}
.disgovde {
        width: 100%;
    }
    .icgovde {
        max-width: 1110px;
        width: 100%;
        margin: 0 auto;
        padding-left: 5px;
        padding-right: 5px;
    }
    .ustmenu {
        height: 155px;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        -webkit-flex-direction: row;
    }
    .ustmenu ol, .ustmenu ul {
        list-style: none;
    }
    .ustlogo img {
        /*width: 100%;*/
        /*margin-top: 50px;*/
        opacity: 1;
        -webkit-transition: opacity 0.3s ease-in-out;
        -moz-transition: opacity 0.3s ease-in-out;
        -ms-transition: opacity 0.3s ease-in-out;
        -o-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out;
    }
    .ustlogo img:hover {
        /*width: 100%;*/
        /*margin-top: 50px;*/
        opacity: .5;
        -webkit-transition: opacity 0.3s ease-in-out;
        -moz-transition: opacity 0.3s ease-in-out;
        -ms-transition: opacity 0.3s ease-in-out;
        -o-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out;
    }
    .ustsag {
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        -webkit-flex-direction: column;
    }
    .menu {
        /*height: 45px;*/
        display: flex;
        display: -webkit-flex;
        align-items: center;
        flex-direction: row;
        -webkit-flex-direction: row;
        justify-content: flex-end;
        margin-top: 15px;
        background: #fff;
    }
    ul.anamenu {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        justify-content: space-between;
        height: 35px;
    }
    ul.anamenu > li {
        /*padding: 10px;*/
        float: left;
        height: 45px;
        position: relative;
        z-index: 2;
        width: max-content;
    }
    ul.anamenu > li > a {
        display: block;
        font-family: manualeregular;
        font-size: 15px;
        color: #0099cc;
        padding: 0 15px;
        line-height: 35px;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translate3D(0, 0, 0);
        -moz-transform: translate3D(0, 0, 0);
        -ms-transform: translate3D(0, 0, 0);
        -o-transform: translate3D(0, 0, 0);
        transform: translate3D(0, 0, 0);
    }
    ul.anamenu > li:hover > a {
        background-color: #0099cc;
        color: #fff;
        border-radius: 6px 6px 0 0;
    }
    ul.anamenu ul {
        background: #0099cc;
        width: 200px;
        position: absolute;
        top: 35px;
        left: 0;
        right: 100%;
        opacity: 0;
        transition: 250ms all;
        -webkit-transition: 250ms all;
        -moz-transition: 250ms all;
        -ms-transition: 250ms all;
        -o-transition: 250ms all;
        visibility: hidden;
    }
    ul.anamenu ul li {
        position: relative;
        border-bottom: 1px solid #ededed40;
    }
    ul.anamenu ul li:last-child {
        border-bottom: none;
    }
    ul.anamenu ul li a {
        display: block;
        padding: 12px 12px;
        font-size: 15px;
        color: #fff;
        font-family: manualeregular;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translate3D(0, 0, 0);
        -moz-transform: translate3D(0, 0, 0);
        -ms-transform: translate3D(0, 0, 0);
        -o-transform: translate3D(0, 0, 0);
        transform: translate3D(0, 0, 0);
    }
    ul.anamenu > li ul ul {
        top: 0;
        left: 180px;
        background: #0099cc;
    }
    /*
    ul.anamenu > li ul:last-child ul ul {
        left: auto;
        right: 100%;
    }
*/
    ul.anamenu > li:hover > ul {
        opacity: 1;
        visibility: visible;
        top: 35px;
    }
    ul.anamenu ul li:hover > ul {
        visibility: visible;
        opacity: 1;
        left: 200px;
        z-index: 1;
    }
    ul.anamenu ul li ul li:hover {
        background-color: #ededed;
    }
    ul.anamenu ul li:hover {
        background-color: #ededed;
    }
    ul.anamenu ul li > ul li:hover > a {
        color: #0099cc;
    }
    ul.anamenu ul li:hover > a {
        color: #0099cc;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="disgovde">
    <div class="icgovde">
        <div class="ustmenu">
         <div class="ustsag">
                <div class="menu" style="display: flex;">
                    <ul class="anamenu">
                        <li><a href="index.php">ANASAYFA</a></li>
                        <li><a href="hakkimizda/hakkimizda-1">HAKKIMIZDA</a></li>
                        <li><a href="kategori/urunlerimiz"><span class="asagiok"></span>ÜRÜNLERİMİZ</a>
                            <ul class="altmenu">
                                <li><a href="kategori/genel-celik"><span class="sagok"></span>Genel Çelik</a>
                                    <ul class="altmenu">
                                        <li><a href="kategori/imalat-celigi"><span class="sagok"></span>İmalat Çeliği</a>
                                            <ul class="altmenu" style="left: 200px; right: 0px;">
                                                <li><a href="detay/1040">1040</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="hizmetler/hizmetler">HİZMETLER</a></li>
                        <li><a href="referanslar/bayilikler">BAYİLİKLER</a></li>
                        <li><a href="galeri/galeri">GALERİ</a></li>
                        <li><a href="iletisim/iletisim">İLETİŞİM</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="cizgi"></div>
</div>

Answer 1

应使用媒体查询根据屏幕宽度设置不同的样式。

遵循移动优先原则，将下拉列表样式设置为垂直打开，然后在 css 设置这样的媒体查询下方。

@media screen and (min-width: 768px) {
  .anamenu ul {
    // Modify dropdown styling to open horizontally.
  }
}