슬라이드 아웃 메뉴 만들기

Sep 16, 2025

어떻게

[삼]

그를 개선하는 좋은 방법 사용자 경험 사이트에서 슬라이드 아웃 메뉴를 추가하는 것입니다. 사용자가 페이지에있을 수있는 곳이면 사용자가 원하는 곳을 찾을 수 있도록 눈길을 끄는 방법을 만듭니다. 톱 탐색으로 다시 스크롤 할 필요가 없습니다.

우리는 특히 사이트의 슬라이드 아웃 메뉴를 좋아합니다. 아이스크림 팔러 화장품 , 에 의해 설계된 히로 카 하세가와 (원하는 사이트가 보이면, 클라우드 스토리지 영감을 얻으려면). 자신의 웹 사이트 에서이 슬라이드 아웃 효과를 복제하는 방법을 찾으려면 계속 읽으십시오. 인상을 만드는 웹 사이트를 만들려면 Keen? 권리 웹 호스팅 서비스 또는 웹 사이트 빌더 그 일을 할 것입니다.

01. 문서 시작

첫 번째 단계는 페이지 문서를 정의하는 것입니다. 이것은 헤드 및 본문 섹션을 포함하는 웹 페이지를 나타내는 HTML 컨테이너로 구성됩니다. 헤드 섹션이 외부 CSS 및 JavaScript 리소스를로드하는 데 사용되는 동안 본문 섹션은 단계 # 2에서 생성 된 가시 페이지 콘텐츠를 저장하는 데 사용됩니다.

 & lt; Doctype HTML & gt;
& lt; html & gt;
& lt; head & gt;
& lt; Title & gt; 슬라이드 아웃 메뉴 & lt; / title & gt;
& lt; 링크 rel = "스타일 시트"유형 = "text / css"media = "screen"href = "styles.css"/ & gt;
& lt; script src = "code.js"& gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
*** 2 단계
& lt; / body & gt;
& lt; / html & gt;

02. 페이지 컨텐츠

페이지 내용은 탐색 컨테이너와 함께 제목 제목으로 구성됩니다. 이 탐색은 일련의 링크를 저장하고 '데이터 동작'속성이 할당되었습니다. JavaScript 및 CSS가 컨테이너 및 요소에 스타일링 및 기능을 적용하기 위해 사용되는이 속성입니다.

 & lt; h1 & gt; 슬라이드 아웃 메뉴 & lt; / h1 & gt;
& lav 데이터 - 액션 = "확장"& gt;
  & lt; 스팬 & gt; & amp; # 9776; & lt; / span & gt;
  & lt; a href = "#"& gt; page 1 & a & gt;
  & lt; a href = "#"& gt; Page 2 & a & gt;
  & lt; a href = "#"& gt; page 3 & a & gt;
& lt; / nav & gt;

03. CSS 개시

이제 HTML이 완료되므로 'Styles.css'라는 새 파일을 만들어 프리젠 테이션 서식을 시작합니다. 이 단계에서는 HTML 문서와 그 본문을 검정색 배경과 함께 눈에 띄는 테두리 간격이 없도록 설정합니다. 색상은 컨텐츠 텍스트의 기본 색상으로 흰색으로 설정되어 있습니다.

 HTML, BODY {
  디스플레이 : 블록;
  너비 : 100 %;
  높이 : 100 %;
  배경 : # 000;
  색상 : #fff; }

04. 네비게이션 설정

네비게이션은 사용자가 스크롤 한 위치에 관계없이 전체 화면을 다루는 것으로 보이도록 모든 것이 고정 된 위치 지정 및 z-index가있는 것으로 표시되는 것으로 표시됩니다. 처음에는 화면의 가시적 인 뷰포트의 왼쪽에있는보기에서 벗어납니다. 전환 규칙이 적용되어 1 초 동안 변경 시간을 움직이게합니다.

 NAV {
  디스플레이 : 블록;
  위치 : 고정;
  박스 크기 조정 : Border-Box;
  TOP : 0;
  왼쪽 : -100VW;
  Z- 색인 : 9999;
  패딩 : .5em 1em .5em 1em ;;
  너비 : 100VW;
  높이 : 100VH;
  텍스트 - 정렬 : 센터;
  배경 : 빨간색;
  전환 : 모두 1S; }

05. NAV OPEN 및 ICON.

'열기'클래스가 적용된 경우 탐색의 왼쪽 위치가 0으로 설정되어 이전 단계에서 정의 된 애니메이션 전환을 트리거합니다. 탐색의 첫 번째 자식은 고정 된 위치 지정을 사용하여 항상 화면의 왼쪽의 중앙에 보이지 않도록 확장 된 아이콘입니다.

 nav.open {
  왼쪽 : 0;
}
Nav * : 첫 번째 자식 {
  위치 : 고정;
  패딩 : 1em;
  커서 : 포인터;
  왼쪽 : 0;
  상단 : 50VH;
  지우기 : 둘 다; }

06. 탐색 링크

네비게이션 컨테이너 내부의 각 앵커 링크는 기본 텍스트의 4 배로 설정됩니다. 색상은 검은 색으로 설정되어 있으며, 수직 간격을 보장하기 위해 상단에 마진이 적용되어 있습니다. 디스플레이를 '블록'으로 설정하면 각 링크가 자동으로 세로로 쌓인 것으로 보이게됩니다.

 NAV A {
  디스플레이 : 블록;
  글꼴 크기 : 4em;
  색상 : # 000;
  글꼴 - 가족 : arial;
  텍스트 장식 : 없음;
  마진 톱 : .2em;
}

07. 자바 스크립트 리스너

'code.js'라는 새 파일을 만듭니다. 이 단계는 페이지가로드 될 때까지 대기하며, '확장'으로 설정된 모든 탐색의 첫 번째 자식을 검색합니다. 이 첫 번째 자식은 열려있는 아이콘이며 '클릭'이벤트 리스너가 적용되거나 "Open '클래스가 적용되지 않거나없는 요소를 전환 할 수 있습니다.

 window.addeventListener ( "LOAD", 함수 () {
  var nodes = document.querySelectorAll ( 'nav [data-action = "확장"* : 첫 번째 자식');
  for (var i = 0; i & lt; nodes.length; i ++) {
  노드 [i].deventListener ( "클릭", 함수 () {
  if (this.parentnode.classname == ") this.parentnode.classname =" ";
  그렇지 않으면 this.parentnode.classname = "open";
  });
  }
});
***

이 기사는 원래 Creative Web Design Magazine Web Designer의 문제 274에 게시되었습니다. 여기 문제를 구입하십시오 또는 웹 디자이너를 구독하십시오 ...에

관련 기사:

최고 웹 탐색 동향
10 명의 훌륭한 사용자 경험의 규칙
시각적 단서를 사이트에 추가하십시오

슬라이드 아웃 메뉴 만들기

01. 문서 시작

02. 페이지 컨텐츠

03. CSS 개시

04. 네비게이션 설정

05. NAV OPEN 및 ICON.

06. 탐색 링크

07. 자바 스크립트 리스너

어떻게 - 가장 인기있는 기사

Smugmug Storefront를 설정하고 최적화하는 방법

귀하의 Apple iCloud 스토리지가 가득 찼습니까? 공간을 확보하는 방법은 다음과 같습니다

Framer X를 사용하여 대화 형 프로토 타입을 구축

WordPress를 Visual Builder로 설정하는 방법

Zbrush의 생물 속도 조각

화려한 좀비를 칠하는 방법

Photoshop CC에서 페인 터로 효과 생성

Photoshop에서 감각적 인 일몰 만들기

카테고리