쇼핑몰 CSS 관련 질문입니다.

Question

안녕하세요. ChatGPT의 도움을 빌려 자사 쇼핑몰의 CSS를 수정하다가 막힌 부분이 있어 질문드립니다.현재 사이트 상단의 메뉴에 마우스 커서를 올리면 보시는 것처럼 세로로 어두운 색의 드롭다운 메뉴가 나오는데, 너비가 좁기도 하고 단순 텍스트만 나열하는 식이라 아래처럼 개조하려고 합니다.보시는 바와 같이 드롭다운 메뉴가 가로로 꽉 차게 나오고 상품마다 이미지가 있어서 훨씬 접근성이 좋아보입니다. 이미지를 추가하는 것은 추후에 하기로 하고 우선 드롭다운 메뉴를 세로가 아닌 가로 형태로 만드는 작업을 하고 있는데...보시는 것처럼 드롭다운 메뉴가 부모 메뉴의 왼쪽에서 시작되는 것으로 고정되었습니다.position을 absolute에서 fixed로 바꾸면 뷰포인트를 기준으로 위치를 잡아준다길래 그렇게 했는데, 그렇게 하니 마우스를 아무리 갖다대도 드롭다운 메뉴가 출력이 안 되더라고요. 혹시 z-index 문제인가 싶어서 99999로 설정해봐도 변화가 없습니다.저는 개발자도 아니고 관련 지식도 거의 없어서 검색하면서 배우고 있는데 영 쉽지가 않네요.막연한 추측이라도 어디서부터 확인하면 좋을지 알려주시면 정말 감사하겠습니다.

킁킁탐정 · Accepted Answer

드롭다운 메뉴를 나열하는 방식을 변경하는건 꽤 단순합니다.이 관련해서는 알아야하는 핵심은 CSS Layout이며 이 중에서도 flexbox라는걸 학습하셔야합니다.다음은 https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp의 예제를 간단하게응용하여 수평으로 메뉴가 표시되도록 변경한 예제입니다.https://jsfiddle.net/kdLhyc4p/Flexbox 학습은 다음의 사이트를 이용하면 좋습니다.https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/CSS Layout에 관한 정보는 다음을 참고하세요.https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout

cancho79 · Answer

굳이 css만 가지고 하지 않는다면 메뉴를 hover또는 클릭시 전체메뉴가 나오는 영역을 분리해서 만드시는걸 추천드립니다.

Hmnya · Answer

혹시 구조가 1차메뉴(ul>li) 안에 2차메뉴(ul>li>ul>li)이지 않은가요...저도 작성자님과 비슷한 과제가 있어서 고민하고 있긴 한데1차메뉴 li에 position:relative;2차메뉴 ul에 position:absolute; left:50%; transform: translateX(-50%);이런식으로 하면 상위메뉴 기준으로 가운데로 오긴 하더라고요...다만 목표가 화면기준 가운데여서 여러가지로 고민하고 있습니다 ㅎㅎ

풍월상신(가니메디안) · Answer

relative-absolute 관계를, navMenuUL > LI --- navSubMenuUL 에서,navMenuUL --- navSubMenuUL 로 연결해주면 쉽게 해결되긴 합니다.codepen 코드를 직접 보시고 판단해보세요.https://codepen.io/Gunymedian/pen/abeXRBp

쇼핑몰 CSS 관련 질문입니다.

4개의 답변

Q&A 목록