웹3 - 1강 (5/10)

Gmarket 3차메뉴 구성

코드펜 : 이동

웹3 gmarket - 5/10 1강

[ 3차메뉴 구성 tip]

리스트에 관련된 서브메뉴를 구현할 때는 디테일한 레이아웃을 구현하기 전에 박스를 만들고 위치를 잡은 후 
hover를 먼저 구현해야 한다. 
1. html에 서브메뉴 구조 추가하기 (반드시 텍스트 작성)
2. css에서 fixed나 absolute 우선 적용
3. html에서 원하는 위치에 relative 작성
4. 위치속성으로 위치잡기
5. list 2번에서 서브메뉴 구조 추가하기
6. css에서 서브메뉴 display: none; 처리하기
7. hover 구현하고 list 1,2 번에서 제대로 작동하는지 확인하기
8. 확인 후 display: none;과 hover 주석처리하고 디테일한 구조 구현
9. 디테일한 구조 구현 후 나머지 list에 구조 붙여넣기 (붙여넣기 시 html에서 구조 닫은 후 안전하게 복붙하기

3차 메뉴 구조

 

[ 3차메뉴 위치잡기 ]

모든 카테고리(li) 위에 마우스를 올려도 3차메뉴의 위치가 항상 같아야 하기 때문에 .container에 position:relative;를 적용시킨 후 css에서 .g-market-3_nav에 right: 0; top: 0;을 적용해야한다