css transition ,transform 메뉴 바 효과 넣기 +hover

#header .gnb_wrap .gnb>li>a:hover:after {
    opacity: 1;
}

header 상단 메뉴 nav 메뉴 부분에 커서를 가져가면, 밑줄로 메뉴바가 나오는 효과를 넣어보자!

 

---

 

1. 먼저 강조할 선 만들기

#header .gnb_wrap .gnb>li>a:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    background: #1f5dab;
    width: 100%;
    }

자식 선택자로 class를 지정해 준 후,

꾸며주는 요소이기 때문에 :after 로 선을 만든다. 

메뉴의 길이는 글씨에 꽉 찰 수 있게 width:100% 를 넣어주고

영향을 받지 않도록 position으로 띄운다. 

 

1-1 상위클래스에 기준 정해주기

#header .gnb_wrap .gnb>li>a {
    display: block;
    line-height: 38px;
    padding: 0 12px;
    color: #fff;
    position: relative;
}

글씨 a 에는 박스요소로 넓이를 지정해 준 후

after 의 position:absolute 의 기준이 되도록, position: relative 로 기준을 정해준다. 

(바가 더 길었으면 좋겠으면 padding으로 간격을 넓혀줌)

 

 

---

 

 

2. transition 애니메이션 효과 넣기 

 

transition: all 1s; > 컨텐츠 전체를 1초로 나타내라 

메뉴바를 부드럽게 나타낼 수 있도록 transition 효과를 사용해 전체를 1초에 걸쳐서 표현

단 이효과는 hover과 함께 발동된다. 

#header .gnb_wrap .gnb>li>a:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    background: #1f5dab;
    width: 100%;
    transition: all 1s;
    opacity: 0;
}

기존 코드에 transition을 지정한후 opcity (투명도) 값을 0으로 지정해 사라지게 한 후 hover 을 발동하자

 

---

 

 

3. hover 효과 추가

 

#header .gnb_wrap .gnb>li>a:hover:after {
    opacity: 1;
}

#header .gnb_wrap .gnb>li>a:hover:after 

*주의 상위 클래스에 after 요소 앞으로 위치한다. (li에 hover 주어도 상관없음)

after 요소에 투명도로 가려주었던 것을 다시 보여주기 위해 opcity 값을 1로 조정한다.

 

---

 

 

4. transform 으로 가운데서 부터 바 펼치기 

좀더 액션을 주기위해 글씨 가운데서 부터 바가 펼쳐지도록 transform 효과를 줘보자. 

 

 

after 클래스에 지정

transform: scaleX(0);  변형 효과 : sacleX 좌표 가운데서 부터 가로로 0 확대 

 

hover 클래스에 지정

transform: scaleX(1);  변형 효과 : sacleX 좌표 가운데서 부터 가로로 1배수 확대 

#header .gnb_wrap .gnb>li>a:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    background: #1f5dab;
    width: 100%;
    transition: all 1s;
    transform: scaleX(0);
}
#header .gnb_wrap .gnb>li>a:hover:after {
    transform: scaleX(1);
}

완성코드 

잘보이진 않지만 

 

메뉴글씨에 커서를 가져가면 ( hover )

메뉴바가 1초로 서서히  ( transition:all 1s )

가운데 지점 ( transform : scaleX(0) ) 에서부터 1배수 원래 크기로 나타난다 ( transform : scaleX(1) )