측면 슬라이딩 이상의 jquery 탐색

현대 웹 디자인에서 탐색 메뉴는 매우 중요한 구성 요소입니다. 모바일 장치의 인기로 인해 화면 크기가 다양해지면서 몇 가지 문제가 발생했습니다. 내비게이션 메뉴의 요소가 너무 많으면 화면 너비를 초과할 수 있으므로 사용자가 모든 옵션에 접근할 수 있도록 하는 방법이 필요합니다. 이 기사에서는 jQuery를 사용하여 수평 슬라이딩 탐색 메뉴를 구현하는 방법을 소개합니다.

먼저 HTML 구조와 스타일을 준비해야 합니다. 다음은 기본 탐색 메뉴 구조입니다.

<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>

CSS를 사용하여 이 탐색 메뉴를 가로로 정렬하고 너비와 기타 스타일을 설정합니다.

.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;
}

이제 기본 HTML과 CSS가 준비되었습니다. 다음으로 jQuery를 사용하여 탐색 메뉴를 수평으로 슬라이드하게 만듭니다. 화살표 버튼을 클릭하면 탐색 메뉴가 가로로 슬라이드되는 효과를 만들어 보겠습니다.

먼저 화살표 버튼에 대한 클릭 이벤트 핸들러를 추가해야 합니다. 다음은 왼쪽 및 오른쪽 화살표 버튼 클릭을 감지하고 화살표 버튼의 방향에 따라 탐색 메뉴를 이동하는 jQuery 코드 조각입니다.

$('.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});
  }
});

왼쪽과 오른쪽을 구별하기 위해 화살표 버튼에 데이터 방향 속성을 추가했습니다. 화살표 버튼. 사용자가 화살표 버튼을 클릭하면 데이터 방향 속성을 감지하고 jQuery의 animate() 메서드를 사용하여 탐색 메뉴의 위치를 ​​부드럽게 이동합니다.

사용자 경험을 향상시키기 위해 몇 가지 대화형 효과를 추가할 수도 있습니다. 예를 들어 사용자가 탐색 메뉴의 맨 왼쪽이나 오른쪽 끝에 도달하면 해당 화살표 버튼을 비활성화할 수 있습니다.

$('.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');
  }
});

탐색 메뉴의 스크롤 위치를 감지하기 위해 스크롤 이벤트 핸들러를 추가했습니다. 가장 왼쪽으로 스크롤할 때 왼쪽 화살표 버튼에 비활성화된 클래스를 추가하여 클릭할 수 없도록 했습니다. 마찬가지로 맨 오른쪽으로 스크롤할 때 오른쪽 화살표 버튼에 대해 비활성화된 클래스를 추가합니다.

마지막으로 화살표 버튼과 탐색 메뉴의 초기 상태를 설정하는 초기화 함수를 추가할 수 있습니다.

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();

initNav() 함수에서는 먼저 탐색 메뉴의 너비와 컨테이너의 너비를 감지합니다. 탐색 메뉴의 너비가 컨테이너 너비를 초과하는 경우 오른쪽 화살표 버튼을 활성화합니다.

다음으로 화살표 버튼을 수직으로 중앙에 배치하고 탐색 메뉴 항목의 너비를 동일하게 설정합니다. 각 메뉴 항목의 너비가 다를 수 있으므로 메뉴 항목의 최대 너비를 감지하고 설정해야 합니다.

지금까지 jQuery를 사용하여 탐색 메뉴의 수평 슬라이딩 효과를 구현했습니다. 다음 JSFiddle에서 전체 코드 구현을 볼 수 있습니다.

https://jsfiddle.net/36qa5x1t/

요약:

이 문서에서는 jQuery를 사용하여 탐색 메뉴의 가로 슬라이딩 효과를 얻는 방법을 소개합니다. 우리는 기본 HTML 및 CSS 구조를 도입하고 클릭 및 스크롤 이벤트 핸들러와 일부 대화형 효과를 추가하여 이 탐색 메뉴를 개선했습니다. 이 기사를 통해 jQuery를 사용하여 웹 페이지에서 대화형 효과를 얻는 방법을 더 잘 이해할 수 있기를 바랍니다.

위 내용은 측면 슬라이딩 이상의 jquery 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!