Блог

Я использую slimmenu для своего веб-сайта. но, к сожалению, подменю исчезает с экрана моего рабочего стола, если есть вложенные дочерние элементы. Поэтому я попытался добавить класс «edge» с помощью «ul», когда он исчезнет с экрана.

Вот скриншот предварительного просмотра, в котором я использовал код https://codepen.io/themeix/pen/gyxGNO

Но мой код не работает. Вот мой HTML-код.

 <div class="main-menu-area">
   <div class="logo-area">
      <h1>My Logo  </h1>
   </div>
   <div class="menu-warpper">
      <div class="navigation-navbar">
         <ul id="navigation" class="slimmenu">
            <li><a href="#">Main Item</a></li>
            <li><a href="#">Main Item</a></li>
            <li><a href="#">Main Item</a></li>
            <li><a href="#">Main Item</a></li>
            <li>
               <a href="#">Main Item</a>
               <ul>
                  <li>
                     <a href="#">Sub Menu 1</a>
                     <ul>
                        <li>
                           <a href="#">Sub Menu 2</a>
                           <ul>
                              <li>
                                 <a href="#">Sub Menu 3</a>
                                 <ul>
                                    <li>
                                       <a href="#">Sub Menu 4</a>
                                       <ul>
                                          <li>
                                             <a href="#">Sub Menu 5</a>
                                             <ul>
                                                <li><a href="#">Sub Menu 6</a></li>
                                             </ul>
                                          </li>
                                       </ul>
                                    </li>
                                 </ul>
                              </li>
                           </ul>
                        </li>
                     </ul>
                  </li>
                  <li><a href="#">Sub Menu 1</a></li>
               </ul>
            </li>
         </ul>
      </div>
   </div>
</div>
  

Я попробовал следующий js-код, чтобы ввести класс edge, но, к сожалению, он добавляется для всех ul, когда пункты подменю выходят за пределы экрана.. Я хочу вводить только для определенного ($ this) элемента подменю, когда он выходит за пределы экрана.

 jQuery(".slimmenu li").on('mouseenter mouseleave', function(e) {
    if (jQuery('ul', this).length) {
        var elm = jQuery('ul:first', this);
        var off = elm.offset();
        var l = off.left;
        var w = elm.width();
        var docH = jQuery(".navigation-navbar").height();
        var docW = jQuery(".navigation-navbar").width();
        var isEntirelyVisible = (l   w <= docW);
        if (!isEntirelyVisible) {
            jQuery(this).addClass('edge');
        } else {
            jQuery(this).removeClass('edge');
        }
    }
});
  

в этом js code добавляется класс edge для всех элементов подменю, но я хочу ввести его только для текущего элемента .has-submenu при наведении курсора мыши и его выходе из экрана. и removeclass также не работает, когда я оставляю мышь. Кто-нибудь может помочь мне решить эту проблему для меня с помощью js?

удалите ширину вашего меню …. между навигационной ссылкой ограниченное пространство, и именно поэтому это произошло.