css)화면 전체로 나타났다 사라지는 반응형 네비게이션 메뉴

toggle 버튼으로 나타났다 사라지게 하는 반응형 네비게이션 메뉴

참고한 CSS Online Tutorial 유투브

수정한 소스코드

fullscreen_navigation_menu.html

fullscreen_navigation_menu_style.css

open.png

close.png

---

예제에서는 구글 웹폰트 중에서 Poppins를 사용하였다.

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,...&display=swap');

display는 웹 폰트의 로딩에 따른 동작을 설정해준다. [참고]

• auto : 브라우저 기본 방식. 웹 폰트가 다운로드되지 않으면 해당 텍스트의 렌더링을 차단한다.
• block : FOIT(Flash of Invisible Text)방식. 웹 폰트가 로딩되지 않으면 최대 3초까지 렌더링하지 않고, 로딩이 완료되면 웹 폰트를 적용한다.
• swap : FOUT(Flash of Unstyled Text)방식. 우선, 폴백 폰트로 글자를 렌더링하고, 웹 폰트가 로딩되면 웹 폰트를 적용한다. 폴백(fallback)폰트는 웹 폰트가 적용되지 않은 unstyled 상태를 뜻한다.
• fallback : 100ms 동안은 텍스트를 표현하지 않고, 그 후에 폴백 폰트로 전환한다. 2초가량의 전환시간 안에 로딩이 완료되면 웹 폰트로 전환하고, 그렇지 않으면 폴백 폰트를 유지한다.
• optional : fallback 모드에서는 전환시간 이후에 다운로드된 웹 폰트는 적용되지 않고 캐시에 저장되고, 다시 사용자가 방문했을 때, 바로 웹 폰트를 적용한다. optional은 네트워크 상태에 따라 브라우저가 웹 폰트의 적용여부를 결정하는 점이 fallback과 다르다.

반응형으로 메뉴를 보여주기 위하여 position 속성은 fixed로 설정한다. [참고]

fixed는 화면이 바뀌더라도 고정된 위치를 설정할 수 있고, 브라우저의 상대위치를 기준으로 위치가 결정된다.

메뉴가 화면의 중앙에 위치하도록 flex container의 justify-content와 align-items 속성을 center로 지정한다.

 

우측 상단의 토글버튼(toggleIcon)에 menuToggle()를 onclick 이벤트로 등록하여서 menu-overlay와 toggleIcon요소에 각각 active 클래스를 추가한다.

menu-overlay요소가 active할 때는 원래크기(scale(1))로, 그렇지 않을 때는 안보인다(scale(0)).

토클버튼도 평소에는 open.png이미지에서 active할 때는 close.png로 바껴서 보인다.

   function menuToggle(){
     var nav = document.getElementById('menu-overlay');
     nav.classList.toggle('activle');
     var btn = document.getElementById('toggleIcon');
     btn.classList.toggle('active');
   }

 

메뉴의 내용에 마우스를 갖다대면(hover) 노란색 선이 왼쪽(before)에서 나타났다가, 오른쪽으로 사라지게 한다.

글자 중앙높이의 선이 오른쪽을 기준으로 사라지는(scaleX(0)) 보통 상태와 왼쪽을 기준으로 나타나는(scaleX(1)) hover상태를 트랜지션(transition) 애니메이션으로 설정한다.

#menu-overlay ul li a:before
{
  transform: scaleX(0);
  transform-origin: right;
  transition: 0.5s transform;
}

#menu-overlay ul li a:hover:before
{
  transform: scaleX(1);
  transform-origin: left;
  transition: 0.5s transform;
}