Как создать переполнение-x меню навигации по горизонтали автоматически - PullRequest
Новая
       25

Как создать переполнение-x меню навигации по горизонтали автоматически

2 голосов
/ 07 мая 2019 
<div style="width:320px">
  <div class="menu-name owl-carousel owl-theme">
    <div class="item">
      <div class="name quicksand aktip" id="one">Profile</div>
    </div>
    <div class="item">
      <div class="name quicksand aktip" id="two">About us</div>
    </div>
  </div>
</div>

JS 

var $owl = $('.owl-carousel');
            $owl.owlCarousel({
                center: false,
                margin: 0,
                autoWidth:true,
            });

У меня проблема, когда я пишу About us будет две строки.и когда я пишу About, это то, что мне нужно, одна строка.Я хочу продолжать писать about us и одну строку

вот мой полный код https://jsfiddle.net/dedi_wibisono17/0npx9g15/18/

1 Ответ

1 голос
/ 07 мая 2019

Это то, что вы хотите?

Я удалил 

 center: false,
 autoWidth:true,

от 

$owl.owlCarousel({
      margin: 0,
});


var $owl = $('.owl-carousel');
$owl.owlCarousel({
  margin: 0,
});

$('.owl-carousel').on('click', '.owl-item.active', function(e) {
  var carousel = $('.owl-carousel').data('owl.carousel');
  e.preventDefault();
  carousel.to(carousel.relative($(this).index()), false, true);
});


//add class aktip
$(".name").click(function(e) {
  var id = $(this).attr("id");
  var toShow = '#show-' + id;

  $(".name").removeClass("aktip");
  $(this).addClass("aktip")

  $(".isi-content").not(toShow).hide();
  $(toShow).fadeIn();
});
.menu-name {
  background: tomato;
  color: white;
  border-bottom: 2px solid #eaeaea;
  overflow-x: auto;
  white-space: nowrap;
}

.name {
  border: 1px solid white;
  padding: 10px;
  cursor: pointer;
  margin: 8px;
  transition: margin 0.4s ease;
}

.aktip {
  background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div style="width:320px">
  <div class="menu-name owl-carousel owl-theme">
    <div class="item">
      <div class="name quicksand aktip" id="one">Profile</div>
    </div>
    <div class="item">
      <div class="name quicksand" id="two">About Us</div>
    </div>
    <div class="item">
      <div class="name quicksand" id="three">Gallery</div>
    </div>
    <div class="item">
      <div class="name quicksand" id="four">Contact</div>
    </div>
    <div class="item">
      <div class="name quicksand" id="five">Details</div>
    </div>
  </div>
</div>
...