JavaScript Navigation에 대한 세 가지 CSS 대안

웹 사이트 내비게이션 디자인에서 햄버거 메뉴를 구현하기 위해 JavaScript를 사용하는 데 익숙합니까? 실제로 대안에 액세스하기가 더 간단하고 쉽습니다. 이 기사는 사용자 경험을 향상시키고 웹 사이트 접근성을 향상시키기 위해 JavaScript가없는 세 가지 탐색 모드를 소개합니다.

점진적인 향상의 원칙에 따라 이전 버전이나 약한 기술을 사용하는 사용자의 웹 페이지 구축 우선 순위를 정한 다음 점차 향상된 기능을 추가하십시오. 기본 기술이 품질 경험을 제공 할 수 있다면 JavaScript에 의존 할 필요가 없습니다. 탐색에서 JavaScript를 피하면 JavaScript가 비활성화되어 있거나 네트워크 문제로 인해 스크립트가로드되지 않은 경우에도 사용자는 여전히 웹 사이트를 정상적으로 탐색 할 수 있습니다.

JavaScript 버거 메뉴의 세 가지 대안을 살펴 보겠습니다.

대체 솔루션 1 : 독립적 인 메뉴 페이지

내비게이션이 항상 각 페이지의 헤드에있을 필요는 없습니다. 프론트 엔드 경량 웹 사이트 또는 더 많은 내비게이션 프로젝트를 사용할 수있는 상황의 경우 모든 내비게이션 링크를 나열하기 위해 별도의 페이지를 작성하는 것이 더 실용적 일 수 있습니다. WordPress 테마 Susty는이 접근법을 채택합니다.

이 모드는 파일 시스템 라우팅을 사용하는 정적 웹 사이트에 특히 적합합니다. 프로젝트가 정적 웹 사이트 생성기를 사용하여 구축되면 페이지가 사용자가 감지 할 수있는 것보다 빠르게로드 될 수 있으며 템플릿도 모듈화됩니다.

메뉴 버튼을 닫기 버튼으로 교체하십시오. 닫기 버튼을 클릭 할 때 사용자를 이전 페이지로 다시 가져 오는 방법에는 여러 가지가 있습니다. 서버 측 CMS (예 : WordPress)를 사용하는 경우 $_SERVER['HTTP_REFERER'] 사용하여 이전 URL을 가져 와서 닫기 버튼의 URL로 설정할 수 있습니다.

그러나 서버 측 설정을 사용하지 않으면 이전 URL을 얻으려면 여러 줄의 JavaScript 코드가 필요할 수 있습니다.

 <code><a href="https://www.php.cn/link/61c68ac879a7ec23b78912aa04f59d78" onclick="handleClick(event)">×</a> function handleClick(event) { event.preventDefault(); window.history.back(); return false; }</code>

따라서이 접근법과 패턴은 양호하지만 특정 프로젝트에는 JavaScript가 필요할 수 있습니다.

대안 2 : 수평 롤링

이 방법은 링크 목록이 짧은 상황에 적합하며 사용자는 아무것도 열거 나 현재 페이지를 떠나지 않고 모든 탐색 항목에 액세스 할 수 있습니다. Github는이 방법을 하위 메뉴에서 사용합니다.

Flexbox와 CSS에서 스크롤 오버플로 조합을 사용하십시오!

대안 3 : 순수한 CSS 버거 메뉴

햄버거 메뉴 모드는 일반적으로 자바 스크립트를 사용하지만 필요하지 않습니다. CSS 의사 선택자 및 HTML을 사용하면 풍부한 모바일 메뉴를 만들고 실제로 필요한 다른 기능에 JavaScript를 사용할 수 있습니다.

대중적인 컨벤션이 그들이 유일한 방법이라는 것을 의미하지는 않는다는 것을 알 수 있습니다. 특히 내비게이션과 관련하여 더 쉽고 쉽게 액세스하는 방법이 있습니다. JavaScript가없는 기능적, 가벼우 며 몰입 형 내비게이션을 만드는 것은 쉽고 몇 가지 추가 이점이 있습니다. 흥미로운 순수한 CSS 네비게이션 모드를 만든 경우 의견에 공유하십시오!

위 내용은 JavaScript Navigation에 대한 세 가지 CSS 대안의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!