반응형
HTML과 CSS만으로 반응하는 단계별 메뉴(세로네이게이션) 제작하기
모바일 전체메뉴를 제작하게 된 적이 있다.
전체메뉴는 구성이 메뉴구조가 아주 복잡하고 메뉴개수 또한 많이 있어 세로메뉴 즉 단계별 트리메뉴처럼 구성해야 하는 경우가 대부분이다.
이럴때 보통은 Javascript나 Jquery를 사용하여 메뉴를 제작하지만 HTML과 CSS만으로 반응하는 단계별 메뉴(세로네이게이션) 을 만드는 방법이 있어 설명을 해 본다.
1. 1차 메뉴 구성하기
See the Pen Untitled by younwook choi (@wooknim) on CodePen.
반응하는 단계별 메뉴(세로네이게이션) 제작
2. 2차 메뉴 구성하기
이제 Javascript라는 글자를 누르면 하위메뉴가 보이는 2차 메뉴를 구성해보자.(위의 소스에서 추가로 코딩해준다.)
See the Pen Untitled by younwook choi (@wooknim) on CodePen.
이제 위의 소스를 간략히 설명해보자.
하위 메뉴가 있는 <li>태그 안에 class가 "group-list"인 <ul>을 넣어 2차 메뉴를 추가했다.
<ul class="group-list">
<li><a href="#">변수</a></li>
<li><a href="#">연산자</a></li>
</ul>
하위메뉴인 .group-list는 Javascript가 클릭되기 전에는 화면에 보이지 않게 하려고 CSS에서
.group-list{
height: 100%; max-height: 0; overflow: hidden;
-webkit-transition: max-height .5s ease-in-out; transition: max-height .5s ease-in-out; }
위의 코드를 넣어 안보이도록 했다.
하위메뉴가 있는 Javascript 메뉴를 클릭하면 하위메뉴가 펼쳐지는 구조를 만들어야 하므로 Javascript 앞에 checkbox를 추가하여 클릭했을때 펼쳐질 수 있도록 한다.
.navlist input[type=checkbox]:checked + label + ul {
max-height: 1000px; }
