질문있습니다

Question

섹션 3. SCSS 핵심이론 활용 예제(Examples of using)까지 듣고

평소에 관심 있던 네비바 디자인을 연습삼아 하고 있습니다.

밑에 링크는 제가 관심있던 네비바 디자인를 사용하고 있는 웹사이트 입니다.

밑에 링크는 codeopen으로 제가 비슷하게 만들어 봤습니다.

네비바 아이템에 마우스 오버되면 서브 메뉴가 스르륵 내려가게 하고 싶습니다.

현재 디스플레이 none block 으로 만들었습니다.

opacity 으로 적용 했지만 해결되지 않았어요.

혹시 좋은 방법 없을까 하고 질문올립니다.

Answer

display: none과 display: block을 사용하시면 transition을 주실 수 없어요.

그래서 display: none을 아래처럼 해주세요.

selector {

opacity: 0;

visibility: hidden;

transition: 0.5s;

}

selector:hover {

opacity: 1;

visibility: visible;

}

삼성화재 네비게이션처럼 하시려면 제이쿼리 slideDown() slideUp()을 사용하세요.

또는 순수 CSS로 만드실 경우 height: 0와 overflow: hidden을 조합해서 사용하시면 만들 수 있습니다.