자바스크립트 제이쿼리 모바일 사이드 메뉴 예제 (jQuery Mobile Sidebar)

자바스크립트 (JavaScript)

 

See the Pen 모바일 사이드 바 예제 by kimyangsun (@kimyangsun) on CodePen.

 

자바스크립트 제이쿼리 모바일 사이드 메뉴 예제 (jQuery Mobile Sidebar) 코드펜 소스코드 입니다.

제가 옛날에 퍼블리싱 공부를 시작할때 차근차근 만들어본 모바일 메뉴 기능인데 오랜만에 이 코드들을 보니까 예전에 공부할때 생각이 나면서, 예전 코드들을 보니까 고쳐줘야할 부분들이 막 보이고 그러는거 같아요 ㅋㅋㅋ

 

사이드 메뉴 안에는 3차메뉴까지 모두 열리도록 작업이 되어 있습니다.

 

또 예전에 공부할때 짠 코드라 그런가 주석으로 자세하게 설명을 적어가면서 작업한게 보이네요.

요새는 이렇게까지 자세하게 주석을 남기진 않는거같아요... 초심을 찾아야 할 거 같습니다.. :)

 

/* 토글 사이드 바 버튼 관련 */
$('.toggle-side-bar-btn').click(function(){
    //console.log("토글 사이드바 버튼클릭");
    
    var $clicked = $(this);
    var nowAnimating = $clicked.attr('data-ico-now-animating');
    
    /* 만약 토글 사이드바 버튼의 요소가 Y가 되면 */
    if ( nowAnimating == "Y" ){
        return;
        /* 함수를 리턴하여 다시 안눌리게 한다 */
    }
    
    /* 만약 클릭된 버튼에 active 클래스가 있다면 */
    if ( $clicked.hasClass('active') ){
        /* 사이드바를 없앤다 */
        hideLeftSideBar();
    }
    else {
        /* active 클래스가 없으면 나타나게 한다 */
        showLeftSideBar();
    }
    
    /* 아이콘의 색을 빨간색으로 만듬 */
    $clicked.attr('data-ico-now-animating', 'Y');
    
    /* 아이콘에 active 클래스가 없으면 active 클래스를 넣어주고 있으면 빼줌 */
    $clicked.toggleClass('active');
    
    /* 버튼 아이콘의 색이 변한 후에 0.4초 뒤에 다시 원래색으로 돌아오게 만듬 */
    setTimeout(function(){
        $clicked.attr('data-ico-now-animating', 'N');
    }, 400);
});

/* 왼쪽 사이드바 함수 */
function showLeftSideBar(){
    /* 메뉴바가 나올때 안에 펼쳐져 있는 메뉴들을 다 접기위해 엑티브를 없앤다 */
    $('.left-side-bar > .menu-1 ul > li.active').removeClass('active');
    $('.left-side-bar-box').addClass('active');
};
function hideLeftSideBar(){
    $('.left-side-bar-box').removeClass('active');
};

/* 메뉴 접히고 펼치기 */
$('.left-side-bar > .menu-1 ul > li').click(function(e){
    //console.log("메뉴 클릭됨");
    
    /* 만약 클릭된 메뉴에 엑티브 클래스가 있으면 */
    if ( $(this).hasClass('active') ){
        /* 클릭된 메뉴의 엑티브를 없앤다 */
        $(this).removeClass('active');
    }
    else {
        /* 클릭된 메뉴의 형제의 엑티브를 없앤다 */
        $(this).siblings('.active').removeClass('active');
        
        /* 클릭된 메뉴(지역)의 엑티브를 없앤다 */
        $(this).find('.active').removeClass('active');
        
        /* 클릭된 메뉴의 엑티브를 만든다 */
        $(this).addClass('active');
    }
    
    /* 클릭된 메뉴 안에 다른 메뉴를 클릭하면 위에있는 메뉴가 같이 클릭되는데 그것을 막아준다 */
    e.stopPropagation();
});

/* 좌측 사이드바 배경을 클릭했을때 */
$('.left-side-bar-box').click(function(){
    //console.log('배경클릭');
    
    /* 토글 사이드바 버튼을 클릭한 효과를 만듬 */
    $('.toggle-side-bar-btn').click();
});

/* 사이드바를 클릭할때 상위요소인 배경이 같이 클릭되어서 사이드바가 들어가버리기 때문에 그것을 막음 */
$('.left-side-bar').click(function(e){
    e.stopPropagation();
});