스크립트 없이 CSS만 사용하여 아코디언 스타일 전체 메뉴 구성하기
이전에 전체메뉴에 대해서 한번 글을 작성한 바 있습니다. 그것보다 좀 더 간단하게 꾸밀 수 있는 방식 입니다. 스크립트 필요없이 CSS만으로도 아코디언 스타일의 메뉴를 구현할 수 있습니다. 선택자만 조금 주의해서 생각하면 생각보다 코딩을 짜는데 큰 어려움은 없습니다.
<nav>
<div id="nav">
<div id="main">
<ul>
<li><a href="#">MENU-1</a></li>
<li><a href="#">MENU-2</a></li>
<li><a href="#">MENU-3</a></li>
<li><a href="#">MENU-4</a></li>
<li><a href="#">MENU-5</a></li>
</ul>
</div>
<div id="sub">
<ul>
<li><a href="#">SubMENU-1</a></li>
<li><a href="#">SubMENU-2</a></li>
<li><a href="#">SubMENU-3</a></li>
<li><a href="#">SubMENU-4</a></li>
</ul>
<ul>
<li><a href="#">SubMENU-5</a></li>
<li><a href="#">SubMENU-6</a></li>
<li><a href="#">SubMENU-7</a></li>
<li><a href="#">SubMENU-8</a></li>
</ul>
<ul>
<li><a href="#">SubMENU-9</a></li>
<li><a href="#">SubMENU-10</a></li>
<li><a href="#">SubMENU-11</a></li>
<li><a href="#">SubMENU-12</a></li>
</ul>
<ul>
<li><a href="#">SubMENU-13</a></li>
<li><a href="#">SubMENU-14</a></li>
<li><a href="#">SubMENU-15</a></li>
<li><a href="#">SubMENU-16</a></li>
</ul>
<ul>
<li><a href="#">SubMENU-17</a></li>
<li><a href="#">SubMENU-18</a></li>
<li><a href="#">SubMENU-19</a></li>
<li><a href="#">SubMENU-20</a></li>
</ul>
</div>
</div>
</nav>
HTML 상태 입니다. 시멘틱태그인 <nav>를 백그라운드로 사용하였고, 그 안쪽에는 또 한번 전체를 감싸주는 nav라는 id 값을 가진 div가 존재하며, 그 안쪽에 각각 div가 둘로 나뉘고 하나는 메인 메뉴, 다른 하나는 서브 메뉴라는것을 확인하실 수 있습니다.
/*RESET*/
* { margin: 0; padding: 0; }
body { font: 17px 'Nanum Gothic', sans-serif;}
a { text-decoration: none; color: #404040; }
li { list-style: none; }
/*BODY*/
nav {
width: 100%;
height: 50px;
background: #a7a7a7
}
#nav {
position: relative;
width: 500px;
margin: 0 auto;
}
#nav:hover #sub {
transform: scaleY(1);
}
#main ul li {
float: left;
width: 20%;
height: 50px;
text-align: center;
line-height: 50px;
}
#main ul li a {
display: block;
transition: all 0.3s;
}
#main ul li a:hover {
background: yellow;
}
#sub {
position: absolute;
top: 50px;
width: 500px;
transform: scaleY(0);
transform-origin: top;
transition: all 0.2s;
}
#sub ul {
float: left;
width: 20%;
}
#sub ul li {
height: 40px;
text-align: center;
line-height: 40px;
}
#sub ul li a {
display: block;
font-size: 12px;
background: #a7a7a7;
transition: all 0.3s;
}
#sub ul li a:hover {
background: yellow;
}
CSS 스타일 부분입니다. 여기서 중요 포인트는 바로 #nav 입니다. 두 메뉴를 모두 감싸는 저 nav라는 id의 div에 마우스를 올렸을 때, sub라는 id값의 div가 동작하게 되는 것 입니다. 그래야 #sub div에 마우스를 올려도 결국은 #nav div 안에서 진행되는 행동이기 때문에 서브메뉴가 닫히지 않습니다.
#sub 속성을 보시면 포지션 (위치값)이 설정되어 있습니다. 서브메뉴가 나타나는 위치를 지정해주기 위해서 사용되었고, 그 부모요소인 시멘틱태그 <nav>에 position: relative; 요소가 마크업 되어 있습니다. 만약 위치설정이 되어있지 않다면, transform의 최종 위치도 틀어져서 화면상 가장 위에서 아코디언처럼 펼쳐지게 될 것입니다. 여기에서는 메인 메뉴 바로 아래로부터 생성되게 해야 하기 때문에 위치 지정은 필수 입니다. 결과화면은 아래에 있습니다. 직접 마우스를 가져다 올려보세요.
See the Pen DIV - All Sub Menu (CSS 전체메뉴) by rgy0409 (@rgy0409) on CodePen.
이렇게 간단하게 완성시킬 수 있습니다. 위의 코드를 참고삼아서 한번 직접 테스트해 보시기 바랍니다. 꼭 이게 절대적인 방법이 아니고 더 간단하게 구현하실수도 있으실 것입니다. 끝.
"친절한효자손 취미생활" 을 검색!
