버튼으로 열고 닫을수있는 우측 메뉴 질문좀 드릴께요~!

버튼으로 열고 닫을수있는 우측 메뉴 질문좀 드릴께요~!

QA

버튼으로 열고 닫을수있는 우측 메뉴 질문좀 드릴께요~!

답변 1

본문

아래 그림 처럼 쇼핑몰 메인페이지에서 우측으로 열고 닫을수있는 메뉴가 있는데요~

이게 자꾸 자동으로 열리고 닫혀서 계속 열려있게 하고 버튼을 누르면 닫을수 있도록 하는방법이 있을까요? 

ec87543acf36020bb9daa3382a484e4d_1505452608_4573.jpeg
 


/* 우측 메뉴 */

var openQuick = setTimeout( function() { classie.toggle ( UIF_RightArea , 'RightOpen' ); }, 3000 );

var closeQuick = setTimeout( function() { classie.toggle ( UIF_RightArea , 'RightOpen' ); }, 5000 );

$( ".RightAreaBtn" ).click( function(){ 

clearTimeout(openQuick);

clearTimeout(closeQuick);

classie.toggle( UIF_RightArea , 'RightOpen' );

});







/*************************************************/

/* 우측 메뉴 */

/*************************************************/

#UIF_RightArea { position:fixed; top:0; right:0; height:100%; width:180px; background:#ffffff; border-left:1px solid #EAEAEA; z-index:190; }

#UIF_RightArea {

visibility: visible;

-ms-transform: translate(95%, 0);

-moz-transform: translate3d(95%, 0, 0);

-o-transform: translate3d(95%, 0, 0);

-webkit-transform: translate3d(95%, 0, 0);

transform: translate3d(95%, 0, 0);

-moz-transition: all 0.5s;

-o-transition: all 0.5s;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

#UIF_RightArea.RightOpen {

visibility: visible;

-ms-transform: translate(0, 0);

-moz-transform: translate3d(0, 0, 0);

-o-transform: translate3d(0, 0, 0);

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

#UIF_RightArea .RightAreaBtn { position:absolute; display:block; width:20px; height:40px; top:calc(50% - 20px); left:-20px; background:#FF0000; color:#fff; cursor:pointer; border-radius:3px 0 0 3px; }

#UIF_RightArea .RightAreaBtn::before { display:block; height:40px; line-height:40px; font-size:20px; text-align:center; content: "\f104"; font-family:'FontAwesome'; }

#UIF_RightArea .RightAreaBtn:hover { background:#8041D9; box-shadow:-1px 1px 2px rgba(0,0,0,0.2); }

#UIF_RightArea.RightOpen .RightAreaBtn::before { content: "\f105"; font-family:'FontAwesome'; }



이 질문에 댓글 쓰기 :

답변 1

전체 소스를 못봐서 그러는데

아래처럼만 해줘도 되지 않을까 싶습니다.


	/* 우측 메뉴 */
//	var openQuick = setTimeout( function() { classie.toggle ( UIF_RightArea , 'RightOpen' ); }, 3000 );
//	var closeQuick = setTimeout( function() { classie.toggle ( UIF_RightArea , 'RightOpen' ); }, 5000 );
	$( ".RightAreaBtn" ).click( function(){ 
//			clearTimeout(openQuick);
//			clearTimeout(closeQuick);
			classie.toggle( UIF_RightArea , 'RightOpen' );
	});
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 33
© SIRSOFT
현재 페이지 제일 처음으로