친절한효자손 취미생활

오늘도 유익한 자바스크립트를 하나 배웠습니다. CSS로 메뉴 스타일을 꾸미는 방법들은 앞서 2단 및 3단 드롭다운 메뉴를 만드는 부분에서 충분히 설명을 드렸습니다. 이번에는 자연스럽게 아래로 쓸려 내려오는 아코디언 스타일의 2단 메뉴 입니다.


    
    Accordion Dropdown nav Menu
    
    
    


    


먼저 HTML 부분 입니다. 메인 메뉴는 가로 스타일이며, 서브 메뉴는 세로 형태 입니다. 서브메뉴가 길어야 아코디언 효과를 제대로 만끽할 수 있으니까요. 다음은 CSS 스타일 부분 입니다.


@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%;
}

#nav:after {
    content: "";
    display: block;
    clear: both;
}

.main {
    margin: 30px;
}

.main>li {
    position: relative;
    float: left;
    width: 210px;
    height: 30px;
    box-sizing: border-box;
    line-height: 30px;
    text-align: center;
    background: #ccc;
}

.main>li:hover .sub {
    /*display: block;*/
}

.main>li a {
    display: block;
    transition: all 0.3s;
}

.main>li a:hover {
    background: #009688;
    color: #fff;
}

.sub {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 1;
    width: 100%;
    background: #eee;
    opacity: 0.8;
}

이 부분에 대한 설명은 방금도 말씀드렸듯 전시간에 메뉴 구성하는 방법에 대한 강좌에서 설명을 드렸으니 아직 잘 이해가 안 되신다면 아래의 글들을 먼저 정독해 주시기 바랍니다.


HTML + CSS 깊이 2단계인 메뉴 드롭다운 만들기

CSS 드롭다운 2단구성 한꺼번에 전체메뉴 나타나게 만들기

CSS 3단 메뉴 드롭다운 소스 코드



이제 여기에서 아코디언 애니메이션 효과를 주기 위해서 제이쿼리를 사용하게 됩니다. 근데 이상하게도 이 방법이 최신 버전에서는 사용이 되지 않습니다. jQuery 1.8.1 버전에서 동작합니다. 참고해 주시기 바랍니다. 해당 버전에 대한 웹페이지는 여기를 누르시면 바로 이동하실 수 있습니다. 다운을 받으시던지 아니면 head 안쪽에 link를 걸어주시면 됩니다. JavaScript 구성은 다음과 같습니다.


$(document).ready(function(){
    $(".main>li").mouseover(function(){
        $(this).children(".sub").stop().slideDown();
    });
    $(".main>li").mouseleave(function(){
        $(this).children(".sub").stop().slideUp();
    });
});

이렇게 해주시면 됩니다. 선택자를 유의해 주세요. 설명하자면 .main 의 클래스값을 가지고 있는 ul의 자식 선택자인 li 요소에 마우스를 올리면, function 값으로 저장되고, this=이 값이 .children=자식 요소인 .sub의 클래스값을 가진 두번째 ul을 slideDown 즉, 슬라이드 다운 하겠다는 뜻이 됩니다.


중간에 있는 stop()의 의미는, 중복되는 명령어들을 처리하는 용도로, 여기에서는 마우스가 올라갔을 경우 마우스가 가만히 있으면 정확히 한번만 슬라이드다운 아코디언 메뉴가 실행되겠지만, 호버된 상태에서 조금이라도 마우스를 움직일때마다 새로운 명령으로 인식하여 슬라이드 메뉴가 계속 실행되게 됩니다. 이런 부작용을 방지하기 위해서 stop()을 넣게 됩니다. 위의 코딩대로 짜여진 결과값은 아래에서 직접 마우스를 움직이시면서 확인 가능합니다.


See the Pen Accordion Dropdown nav Menu by rgy0409 (@rgy0409) on CodePen.


이렇게 완성 됩니다. 이렇게 해서 간단하게 jQuery를 활용한 자바스크립트, CSS 스타일로 아코디언 형식의 드롭다운 메뉴를 완성하였습니다. 끝.



"친절한효자손 취미생활" 을 검색!


알리익스프레스 할인

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

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

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