Преобразование загрузчика navbar и содержимого как rtl - PullRequest
Новая
       6

Преобразование загрузчика navbar и содержимого как rtl

0 голосов
/ 28 февраля 2019

Я пытаюсь преобразовать следующее направление навигационной панели и поведение подменю в другое направление.

Это исходный код, а под ним отредактированный, который нуждается в дополнительной настройке, чтобы быть "правильным"осталось ":

Оригинал: 

// dropdown menu on hover 
var $screensize = $(window).width();
$('.dropdown').on("mouseover", function() {

  $(this).find('> .dropdown-menu').stop(true, true).slideDown('fast');
  $(this).bind('mouseleave', function() {

    $(this).find('> .dropdown-menu').stop(true, true).css('display', 'none');
  });
});

//Change position for drop down
$(function() {
  $(".dropdown li").on('mouseenter mouseleave', function(e) {
    if ($('.dropdown-menu', this).length) {
      var elm = $('.dropdown-menu', this);
      var off = elm.offset();
      var l = off.left;
      var w = elm.width();
      var docW = $(window).width();

      var isEntirelyVisible = (l + w <= docW);

      if (!isEntirelyVisible) {
        $(elm).addClass('dropdown-reverse');
      } else {
        $(elm).removeClass('dropdown-reverse');
      }
    }
  });
});
.dropdown-menu {
  margin-top: -2px;
}

li.dropdown .dropdown-menu .dropdown-menu {
  left: 100%;
  margin-top: -30px;
}

.dropdown-reverse {
  left: auto!important;
  right: 100%!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">


<nav id="menu" class="navbar navbar-expand navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <ul class="dropdown-menu">
          <li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a><ul class="dropdown-menu">
          <li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a><ul class="dropdown-menu">
          <li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Я отредактировал вышеприведенное и добавил .navbar{float: right; } в CSS, text-align:right для li dropdown, а также dir="rtl" в верхней строкеnav в HTML.Но, тем не менее, поведение не такое, как задумано, поскольку добавление rtl css привело к тому, что он потерял уважение к размеру экрана, как это изображение (это оригинал): enter image description here

Но теперь он открывает только первые два справа, но третье подменю открывается поверх первого.

Вот скрипка для теста: https://jsfiddle.net/2b8h30Lx/41/

...