[FE] 헤더에 hover할 때 메뉴 나오도록 하기 (getBoundingClientRect())

좌표까지 캡쳐를 뜬데엔 이유가있음 !

 

이거 하나 만드는데 너무 오래걸렸다 흑흑... 너무 멍청한 실수를 했기때문인데,

 

 

실수1) hover 처리를 자바스크립트에서 하려고 한 점, header 아래에 나올 <main>이 밀리면 안되고 메뉴에 덮여야 한다는 점.

• 자바스크립트에서 mouseover 이벤트로 menu가 활성화되는 클래스를 추가하려고 함
• d:none속성을 넣었다 뺐다 하고, 메뉴위에 마우스가 있을때 떠있게하고, 나갈때 사라지도록 설정함

여기서 부드러운 액션에 opacity속성을 쓰지않은 이유

: opacity를 쓰면 마우스가 헤더에 가지않고 메뉴가 뜨는 곳에 가기만 해도 갑자기 메뉴가 생긴다. 저 공간 자체에 투명으로 숨어있게 되기 때문에 아예 사라져야하는 상황은 opacity를 쓸 수 없었음. (그래서 setTimeout으로 시간차로 생기게 해서 뭔가 부드러운 느낌을 주려고 오만 난리를 침)

 

👉 설정했더니 메인에 있는 글씨 (글자가 있습니다) 가 밀려서 실패.

 

일반적인 접었다 펴기 공식처럼 height:0으로 두고 hover조건에서 펼치지 못한 이유

자손에 높이를 가진 박스가 하나뿐이면 없앴다가 줄 수 있는데, 나같은 경우는 자손의 자손들에 개별 높이를 가지고있는것들이 많았다. 그레서 메뉴박스 자체의 높이를 0으로 설정해봤자 안에서 글씨를 감싸는 박스들의 개별높이가 살아있기때문에 글씨만 동동 떠있게 됨. 그렇다고 그 모든 높이를 0으로 바꾸고 hover때 부여해주기엔 .... 이건 좀 아닌것 같았다.

 

✔️ 이 부분 결국 코드수정하면서 top과 opacity속성을 써서 구현했다.! 다음 포스팅에 정리해둠!

 

 

 

 

실수2) position 속성만으로만 해결할 수 있다고 생각한 점

.octaheader>div {
    position: relative;
}

.octaheader>div:hover .header-m {
    display: flex;
}

.header-m {
    position: absolute;
    display: none;
    left: 460px;
}

 

[css 응용] 스크립트 없이 드롭다운 메뉴 만들기 (drop down menu)

위 포스팅을 참고해서 부모속성(헤더와 메뉴를 모두 감싸고 있다)에 relative를 주고, 튀어나올 메뉴에다가 absolute를 줬다. 이때 hover는 각 li가 아니라 li들을 감싸고 있는 div에다가 줘야 (쉽게말하면 부모속성) li안의 a링크로 마우스가 옮겨갔을때 배경이 사라지지않는다.

 

이제 main이 밀리지않고 덮이니까 잘됐다고 생각하고 있었는데 아맞다... 이거 화면 반응형이다 ㅠ ㅠ

(저기있는 460은 내가 보고있던 화면에서의 위치로 그냥 숫자를 박아둔것)

 

 

 

---

 

 

🔥 해결책) 좌표구해서 대입하기

그럼 가변하는 left의 위치를 어떻게 구해야 할지 고심을 많이 했다.

전체 넓이의 1/5 이런식으로 left를 잡기엔 화면이 바뀔때마다 조금씩 틀어져서 이건 좀 아닌것 같았고.

// 찾아보며 알게된 뷰포트 폭 가져오는법 ==============
// 화면 너비와 부모 요소의 너비 가져오기
const viewportWidth = window.innerWidth;
const parentWidth = parent.clientWidth; // 부모 요소의 너비

// left 값을 동적으로 계산 (예: 부모 요소 너비의 중앙으로 정렬)
// const leftValue = (parentWidth - menu.clientWidth) / 2;

 

그러던 중, 그나마 눈에 보이는 OctaP로고의 좌표를 따올 수 있지 않을까? 라는 생각이 들었다! 다행히 가능한 방법이 있었다. 감사합니다 자바스크립트...................

 

#️⃣ getBoundingClientRect() getBoundingClientRect() 메서드는 DOM 요소의 위치와 크기 정보를 제공하는 메서드. 이 메서드를 호출하면 요소의 위치, 폭, 높이 등에 관한 정보를 담고 있는 DOMRect 객체를 반환한다. 속성들! x: 요소의 왼쪽 가장자리의 X 좌표 (page X 좌표) y: 요소의 위쪽 가장자리의 Y 좌표 (page Y 좌표) width: 요소의 폭 height: 요소의 높이 top: 요소의 상단 가장자리의 Y 좌표 right: 요소의 오른쪽 가장자리의 X 좌표 bottom: 요소의 하단 가장자리의 Y 좌표 left: 요소의 왼쪽 가장자리의 X 좌표

 

Element.getBoundingClientRect() - Web API | MDN

 

window.addEventListener("load", function () {
    let octaheader = this.document.querySelector(".octaheader");
    let menu = this.document.querySelector(".header-m");
    let logo = octaheader.querySelector(".logo-mini");

    function setLeftPosition() {
        let x = logo.getBoundingClientRect().left;
        console.log(typeof (x)); //number 반환
        let leftValue = x - 22; //추가로 폭 조절해줌

        // left 속성 설정
        menu.style.left = leftValue + "px";
        console.log(leftValue); //캡쳐에 있던 최종 좌표
    }
    
    // 초기화 및 리사이즈 이벤트에 대한 처리
    setLeftPosition(); //초기화하여 현재 화면에서의 x값 넣기
    window.addEventListener("resize", setLeftPosition); //화면이 변했을때 이벤트로 함수 전달
});

여기서 나오는 left(x좌표) 는 화면의 좌상단 꼭지점을 0으로 해서, 실제 컨텐츠 크기까지를 구해준다. 그리고 메뉴박스가 아이콘보다 더 옆으로 가야해서, 구해진 크기보다 왼쪽으로 좀더 옮겨줘야 메뉴박스만의 x좌표가 구해지기에 추가로 조절을 해줬다!

 

그리고 잊지말고 마지막에 함수 실행을 해줘야 현재 화면에서(onload 이벤트) 맞는 좌표가 들어가고,

화면이 변했을때 이벤트리스너에있는 함수가 작동해서 (resize이벤트) 다시 left값을 전달해준다.

 

지난주에 콜백함수 다시 보고 와 모르겠다 모르겠다 했는데 어쩌다보니 여기서 콜백함수를 쓰게됐다. 쓰려고 쓴건 아니고 어떻게저떻게 하다보니 형태가 어 ..? 콜백이었네 콜백을 이렇게 쓰는거네 배워가는 중. (신기함)

 

그리고 relave와 absolute속성은 단순히 내가 원하는 자리에 지정해서 놓으려고 쓴다. 까지만 인지하고 있었는데 이런식으로 이벤트가 일어날때마다 동적으로 바꿀수 있다니까 활용법을 새로 배운 기분이다. 

 

 

 

🔽 추가로 구현할 점

다행히 원하는 바는 다 만들었지만 그래도 너무 메뉴가 뿅 튀어나오는건 별로라 어떻게든 부드럽게 뜨게 만들 방법을 찾아봐야겠다. height도 못쓰고 opacity도 못쓰면 대체 뭘 해야 될까 🤔

 

 

+++ 악 라이브서버에선 잘나왔는데 프로젝트에 올리니까 씹힌다 ㅠ ㅠ 대체 뭐가문제지..............