navigasi jquery melangkaui gelongsor sisi

Dalam reka bentuk web moden, menu navigasi merupakan komponen yang sangat penting. Dengan populariti peranti mudah alih, kepelbagaian saiz skrin telah membawa kepada beberapa cabaran. Apabila terdapat terlalu banyak elemen dalam menu navigasi, ia boleh melebihi lebar skrin, jadi cara diperlukan untuk membolehkan pengguna mengakses semua pilihan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk melaksanakan menu navigasi gelongsor mendatar.

Pertama, kita perlu menyediakan struktur dan gaya HTML. Berikut ialah struktur menu navigasi asas:

<div class="nav-container">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Join Us</a></li>
  </ul>
</div>

Kami menggunakan CSS untuk mengatur menu navigasi ini secara mendatar dan menetapkan lebarnya serta gaya lain.

.nav-container {
  overflow-x: scroll;
  white-space: nowrap;
}

.nav {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.nav li {
  display: inline-block;
  text-align: center;
  width: 120px;
}

.nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
}

Kini, kami menyediakan HTML dan CSS asas. Seterusnya, kami akan menggunakan jQuery untuk membuat menu navigasi slaid secara mendatar. Kami akan mencipta kesan di mana menu navigasi meluncur secara mendatar apabila butang anak panah diklik.

Pertama, kita perlu menambah pengendali acara klik untuk butang anak panah. Berikut ialah coretan kod jQuery yang akan mengesan klik butang anak panah kiri dan kanan serta mengalihkan menu navigasi berdasarkan arah butang anak panah:

$('.nav-arrow').on('click', function() {
  var direction = $(this).data('direction');
  var distance = $('.nav li:first-child').outerWidth();

  if (direction === 'prev') {
    $('.nav-container').animate({scrollLeft: '-=' + distance});
  } else {
    $('.nav-container').animate({scrollLeft: '+=' + distance});
  }
});

Kami menambah atribut arah data pada butang anak panah untuk membezakan antara butang anak panah kiri dan kanan. Apabila pengguna mengklik pada butang anak panah, kami akan mengesan sifat arah datanya dan menggunakan kaedah animate() jQuery untuk menggerakkan kedudukan menu navigasi dengan lancar.

Kami juga boleh menambah beberapa kesan interaktif untuk meningkatkan pengalaman pengguna. Sebagai contoh, apabila pengguna mencapai hujung paling kiri atau kanan menu navigasi, kami boleh melumpuhkan butang anak panah yang sepadan.

$('.nav-container').on('scroll', function() {
  var distance = $('.nav li:first-child').outerWidth();
  var scrollLeft = $(this).scrollLeft();

  if (scrollLeft === 0) {
    $('.nav-arrow.prev').addClass('disabled');
  } else {
    $('.nav-arrow.prev').removeClass('disabled');
  }

  if (scrollLeft + distance >= $('.nav').outerWidth()) {
    $('.nav-arrow.next').addClass('disabled');
  } else {
    $('.nav-arrow.next').removeClass('disabled');
  }
});

Kami menambah pengendali acara tatal untuk mengesan kedudukan tatal menu navigasi. Apabila menatal ke hujung kiri, kami menambah kelas yang dilumpuhkan pada butang anak panah kiri supaya ia tidak boleh diklik. Begitu juga, kami menambah kelas yang dilumpuhkan untuk butang anak panah kanan apabila menatal ke hujung kanan.

Akhir sekali, kita boleh menambah fungsi permulaan untuk menetapkan keadaan awal butang anak panah dan menu navigasi.

function initNav() {
  var distance = $('.nav li:first-child').outerWidth();
  var navWidth = $('.nav').outerWidth();
  var containerWidth = $('.nav-container').outerWidth();

  if (navWidth > containerWidth) {
    $('.nav-arrow.next').removeClass('disabled');
  }

  $('.nav-arrow').css('top', ($('.nav').outerHeight() / 2 - $('.nav-arrow').outerHeight() / 2));

  $('.nav li').each(function() {
    var itemWidth = $(this).outerWidth();
    if (itemWidth > distance) {
      distance = itemWidth;
    }
  });

  $('.nav li').each(function() {
    $(this).css('width', distance + 'px');
  });
}

initNav();

Dalam fungsi initNav(), kami mula-mula mengesan lebar menu navigasi dan lebar bekas. Jika lebar menu navigasi melebihi lebar bekas, kami akan mendayakan butang anak panah kanan.

Seterusnya, kami memusatkan butang anak panah secara menegak dan menetapkan item menu navigasi kepada lebar yang sama. Oleh kerana lebar setiap item menu mungkin berbeza, kita perlu mengesan dan menetapkan lebar maksimum item menu.

Setakat ini, kami telah melengkapkan penggunaan jQuery untuk mencapai kesan gelongsor mendatar menu navigasi. Anda boleh melihat pelaksanaan kod lengkap pada JSFiddle berikut:

https://jsfiddle.net/36qa5x1t/

Ringkasan:

Artikel ini menerangkan cara melaksanakan navigasi menggunakan jQuery Kesan gelongsor menu mendatar. Kami memperkenalkan struktur HTML dan CSS asas dan menggilap menu navigasi ini dengan menambahkan pengendali acara klik dan tatal serta beberapa kesan interaktif. Saya berharap melalui artikel ini, anda boleh lebih memahami cara menggunakan jQuery untuk mencapai kesan interaktif pada halaman web.

Atas ialah kandungan terperinci navigasi jquery melangkaui gelongsor sisi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!