친절한효자손 취미생활

이전에 전체메뉴에 대해서 한번 글을 작성한 바 있습니다. 그것보다 좀 더 간단하게 꾸밀 수 있는 방식 입니다. 스크립트 필요없이 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.


이렇게 간단하게 완성시킬 수 있습니다. 위의 코드를 참고삼아서 한번 직접 테스트해 보시기 바랍니다. 꼭 이게 절대적인 방법이 아니고 더 간단하게 구현하실수도 있으실 것입니다. 끝.





알리익스프레스 할인

이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

잠깐! 비밀로 남겨야 할 만한 내용인가요? 그렇다면 차라리 이메일을 보내주시기 바랍니다.