- 자바스크립트향 첨가 드롭다운 메뉴2024년 04월 21일
- Lv. 34 라이츄
- 작성자
- 2024.04.21.:10
아 배수판별 해달라고요? 내 보낼라카나?
일단 드롭다운 메뉴가 뭐냐면
이런거다. 저기 오른쪽에 점 세개 눌린거. 이건 잘 안 보이지만
이거. 위키피디아에 있는 언어 선택란인데 이것도 그거다.
오늘의 참고문헌은
https://www.doyeon0430.com/engineer/django/25/
요기입니다. 아주 간단하게 설명 잘 됐음.
사실 HTML에서는 그렇게 특별하게 설명할 거 없다. CSS의 경우 드롭다운 메뉴에서 평소에 안 보이는... 그러니까 위키피디아로 치자면 언어 변경을 눌렀을 때 나오는 수많은 언어들은 평소에 안 보였다가 우리가 버튼을 누르면 그 때 나와야 하잖아요? 그것때문에 하위 메뉴에 display=block을 준다. 자바스크립트 없이 드롭다운 메뉴를 만들때도 마찬가지.
내 10년 전쯤 드롭다운 메뉴 갖고 끙끙거릴때는 드롭다운 메뉴 만들라면 position 앱솔루트 릴레이티브 막 주고 플로트 주고(왼쪽으로) 디스플레이 블록이여 인라인이여 몇픽셀이여… 이러면서 거의 사투를 벌였는데 이거는 지금도 크게 다르지는 않다. 대신 지금은 float: left; 주는 대신 display: flex; 주고 방향이랑 정렬만 정하면 돼서 편할…거라고 생각했는데 아니더라…
.dropdown-contents { margin-top:5px; position: absolute; display: none; background: linear-gradient(to bottom, #f7cac9, #91a8d1); border-radius: 5%; animation: fade-in 1s ease; width: 136px; } .dropdown-contents a { text-align: left; text-decoration: none; color: #5f4b8b; display: block; font-size: 16pt; padding: 5px; }
이게 그 부분 관련된 CSS이다. 이거는 자바스크립트로 제어할거라 드롭다운 메뉴에 들어갈거랑 메뉴 링크만 넣었는데, CSS만으로 할 때는 .dropdown-contents:hover로 display: block 줘야 한다. 이건 무슨 소리냐면 마우스를 올렸을 때 보여줘라 이런 얘기인데, 회사나 단체의 홈페이지 상단에 쓰이는 드롭다운 메뉴는 대부분 이런 식이다.
const dropdown = document.querySelector('.dropdown-bar'); const dropdownContent = document.querySelector('.dropdown-contents'); dropdown.addEventListener('click',()=>{ if(dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block" } });
일단 원문하고 다른 점을 몇가지 서술하자면, 원문에는 메뉴 옆에 삼각형이 있어서 클릭할때마다 바뀐다. 근데 내가 만든 드롭다운 메뉴에는 그 삼각형이 없기때문에 그거 관련된 코드가 없다. 그리고 원문에는 var로 가져오는데, 본인은 DOM 가져올 때 따로 생성할 거 외에 내용이 딱히 바뀌는 게 없겠다 싶으면 다 const로 가져온다. 그래도 되냐고요? 저거 한번에 됐는데요?
이거 근데 CSS만 쓰는 드롭다운 메뉴는 메뉴 서너개도 커버되던데 자바스크립트는 안되나...?
'Coding > JavaScript' 카테고리의 다른 글
숫자 야구에 새 게임 버튼을 넣어보자 (0) 2024.04.29 자바스크립트로 숫자 야구를 만들어보자 (0) 2024.04.28 [HTML 요소] 체크박스 (0) 2024.04.09 현재 시각을 십이지시로 바꿔보자 Ver.JS (0) 2024.02.12 테마 변경을 해 보자(feat. 라디오 버튼) (0) 2024.02.10 다음글이전글이전 글이 없습니다.댓글