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

보통 웹사이트에서 자주 사용하는 3가지 타입의 상단 헤더 기능입니다.
저번에 제이쿼리를 이용해서 만든 코드를 업로드했는데, 상황에 따라 제이쿼리 없이 자바스크립트 만으로도 작업이 필요한 경우가 있는 경우도 많아 만들어 봤습니다. :)
예제 1
https://codepen.io/kimyangsun/pen/WNaOyKJ
자바스크립트 header gnb 탑메뉴 예제 1 (PC & 모바일) 코드펜 소스코드입니다.
탑메뉴 중에서도 자주 쓰이는 형태인데 2차메뉴까지 존재하는 경우 대부분 이런형식으로 작업하기에 예제를 만들어두면 좋을거 같아서 코드를 짰습니다.
물론 웹접근성도 준수하는 코드로 제작하였습니다. (ex : 키보드 접근성)
모바일 메뉴도 작업해뒀기에 새창으로 들어가서 화면을 조절해가며 확인하면 될 거 같습니다. :)
예제 2
https://codepen.io/kimyangsun/pen/gOBRKdx
자바스크립트 header gnb 탑메뉴 예제 2 (PC & 모바일) 코드펜 소스코드입니다.
이것도 탑메뉴 중에서 자주 쓰이는 형태중 하나입니다.
이건 3차메뉴까지 존재하는 경우인데 이런형식으로 작업하기에 예제를 만들어두면 좋을거 같아서 코드를 짰습니다.
물론 웹접근성도 준수하는 코드로 제작하였습니다. (ex : 키보드 접근성)
이 형태는 3차메뉴까지 보여줘야 하기에 반응형 1240px 에서 모바일 토글버튼으로 변하게 작업된 상태입니다.
그래서 현재 블로그 게시글에서는 너비가 작아 모바일 형태로 보이네요 ㅎㅎ..
자세히 확인하시려면 새창으로 들어가서 화면을 조절해가며 확인하면 될 거 같습니다. :)
예제 3
https://codepen.io/kimyangsun/pen/YzjJgLL
자바스크립트 header gnb 탑메뉴 예제 3 (PC & 모바일) 코드펜 소스입니다.
예제 1 처럼 2차 메뉴까지 보여주는데 이건 한번에 보여주는게 아닌 각각 해당하는 1차 메뉴에 대한 2차 메뉴만 보여주는 방식입니다.