05 - 22 검은사막 메인 페이지 마크업 (3) - 메뉴 제이쿼리

 

 

메뉴에 드롭다운 애니메이션 넣어주기 위한 제이쿼리 추가 + 스크립트 연결

각 메뉴 위드값 설정

 

서브 메뉴 z-index 값 조절 ( 본문 h2에 묻히지 않게 )

 

 

틀은 완료 + 제이쿼리 붙여주기 

+ css animaition ( 밑줄 효과 , 마우스 호버 효과 )

 

 

 

$(this) 사용. ( 각각의 li들 선택해주는 효과 )

addclass 아니면 slideToggle, Slidedown 등을 쓰면 될 것 같은데

제이쿼리 제일 최신의 버전 올려서 했는데 동작을 안하는 문제가 발생

 

 

도큠넷을

도큐멘트로 수정

의외로 이런 실수들이 많이 나오는듯

 

여튼 테스트.

 

일단 그래도 안됨. 동작을 안함. 재 확인 필요.

 

 

 

선택자를 바꾸니까 제대로 동작함. 아마 선택자 문제였던 것으로 보임. 선택자 다시.

 

이유 -> nav에 바로 li 이렇게 선택하면 안되는 것 같음. 도중에 ul을 껑충했는데 제이쿼리에선 그게 안되나봄.

그래서 nav>li 가 아니라 ul>li 이런 식으로 선택해주니까 제대로 동작함. 선택을 딱 딱 순서에 맞게 분명하게 해줘야 되는듯.

 

 

+ 속도 조절 -> 300

 

* 각종 i 태그 추가 ( xeicon )

 

 

 

 

:: css 밑줄 호버 애니메이션 ( 가운데에서 퍼져나가는 )

 

 

 

 

그런데 아무래도 a에다가 양쪽 패딩값을 주는 식으로 마크업을 해서 밑줄이 넓~게 적용되는 문제가 발생.

 

a에 display:block 추가 ( 높이만큼 클릭 가능하게 )

 

 

 

a가 아닌 li에 마진 값으로 정렬.

a의 패딩값 해제, 

밑줄 영역은 잘 잡혔지만 이번엔 서브메뉴 레이아웃이 깨지는 문제 발생.

 

 

 

 

 

* 우선 a가 아닌 li에 호버 시 밑줄 효과로 변경 ( 서브메뉴 안에 마우스가 있어도 밑줄 효과가 사라지지 않게 )

 

서브메뉴에 left:-27px 값 줘서 레이아웃 해결

 

 

* 밑 li 레이아웃 패딩 바텀 추가.

 

* 메인 h2 문구 마우스 활성화가 안되는 문제.

 

 

 

reset.css 기본값 문제였음.

 

-webkit user select: none; 을 해제해주니까 선택이 가능해짐.

 

 

https://github.com/wonpoem/blackdesert/tree/master/blackdesert

GitHub - wonpoem/blackdesert: blackdesert mark up study

 

https://rkqtlr15159.cafe24.com/blackdesert/

검은사막