바닐라 자바스크립트 header gnb 탑메뉴 예제 3개 (PC & 모바일)

자바스크립트 (JavaScript)

 

보통 웹사이트에서 자주 사용하는 3가지 타입의 상단 헤더 기능입니다.

저번에 제이쿼리를 이용해서 만든 코드를 업로드했는데, 상황에 따라 제이쿼리 없이 자바스크립트 만으로도 작업이 필요한 경우가 있는 경우도 많아 만들어 봤습니다. :)

 

---

 

예제 1

See the Pen 자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일) with Vanilla JS by kimyangsun (@kimyangsun) on CodePen.

 

https://codepen.io/kimyangsun/pen/WNaOyKJ

 

자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일) 코드펜 소스코드입니다.

탑메뉴 중에서도 자주 쓰이는 형태인데 2차메뉴까지 존재하는 경우 대부분 이런형식으로 작업하기에 예제를 만들어두면 좋을거 같아서 코드를 짰습니다.

물론 웹접근성도 준수하는 코드로 제작하였습니다. (ex : 키보드 접근성)

모바일 메뉴도 작업해뒀기에 새창으로 들어가서 화면을 조절해가며 확인하면 될 거 같습니다. :)

 

 

---

 

예제 2

See the Pen 자바스크립트 header gnb 탑메뉴 예제 2 (PC & 모바일) with Vanilla JS by kimyangsun (@kimyangsun) on CodePen.

 

https://codepen.io/kimyangsun/pen/gOBRKdx

 

자바스크립트 header gnb 탑메뉴 예제 2 (PC & 모바일) 코드펜 소스코드입니다.

이것도 탑메뉴 중에서 자주 쓰이는 형태중 하나입니다.

이건 3차메뉴까지 존재하는 경우인데 이런형식으로 작업하기에 예제를 만들어두면 좋을거 같아서 코드를 짰습니다.

물론 웹접근성도 준수하는 코드로 제작하였습니다. (ex : 키보드 접근성)

 

이 형태는 3차메뉴까지 보여줘야 하기에 반응형 1240px 에서 모바일 토글버튼으로 변하게 작업된 상태입니다.

그래서 현재 블로그 게시글에서는 너비가 작아 모바일 형태로 보이네요 ㅎㅎ..

자세히 확인하시려면 새창으로 들어가서 화면을 조절해가며 확인하면 될 거 같습니다. :)

 

 

---

 

예제 3

See the Pen 자바스크립트 header gnb 탑메뉴 예제 3 (PC & 모바일) with jQuery by kimyangsun (@kimyangsun) on CodePen.

 

https://codepen.io/kimyangsun/pen/YzjJgLL

 

자바스크립트 header gnb 탑메뉴 예제 3 (PC & 모바일) 코드펜 소스입니다.

 

예제 1 처럼 2차 메뉴까지 보여주는데 이건 한번에 보여주는게 아닌 각각 해당하는 1차 메뉴에 대한 2차 메뉴만 보여주는 방식입니다.