자바스크립트향 첨가 드롭다운 메뉴

아 배수판별 해달라고요? 내 보낼라카나?

---

일단 드롭다운 메뉴가 뭐냐면

이런거다. 저기 오른쪽에 점 세개 눌린거. 이건 잘 안 보이지만

이거. 위키피디아에 있는 언어 선택란인데 이것도 그거다.

 

오늘의 참고문헌은 

https://www.doyeon0430.com/engineer/django/25/

[JavaScript] 자바스크립트로 예쁜 드롭다운 메뉴바 만들기

요기입니다. 아주 간단하게 설명 잘 됐음.

---

사실 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만 쓰는 드롭다운 메뉴는 메뉴 서너개도 커버되던데 자바스크립트는 안되나...?