친절한효자손 취미생활

이전에 전체메뉴에 대해서 한번 글을 작성한 바 있습니다. 그것보다 좀 더 간단하게 꾸밀 수 있는 방식 입니다. 스크립트 필요없이 CSS만으로도 아코디언 스타일의 메뉴를 구현할 수 있습니다. 선택자만 조금 주의해서 생각하면 생각보다 코딩을 짜는데 큰 어려움은 없습니다.


    
    전체메뉴
    


    

HTML 상태 입니다. 시멘틱태그인 <nav>를 백그라운드로 사용하였고, 그 안쪽에는 또 한번 전체를 감싸주는 nav라는 id 값을 가진 div가 존재하며, 그 안쪽에 각각 div가 둘로 나뉘고 하나는 메인 메뉴, 다른 하나는 서브 메뉴라는것을 확인하실 수 있습니다.


@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');

/*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 kakaostory naver

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

또한 비밀댓글의 경우는 질문 내용을 공개하고 답글을 해드리고 있으니 참고하시기 바랍니다.