본문 바로가기
Programming Language/Javascript

왼쪽 사이드 토글버튼

by 뒹굴거리는프로도 2018. 12. 12.
반응형
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$("#leftSlideBtn").click(function(){
        var LIcon = $("#inair-leftIcon");
        var RIcon = $("#inair-rightIcon");
 
        if(LIcon.css("display"== "inline"){
            /*왼족으로 밀고 싶을 때*/
            $("#inair-leftIcon").css("display""none");
            $("#inair-rightIcon").css("display""inline");
            $("#leftSlideBtnDiv").animate({left: "-260"}, 350);
 
            $("#ia-article").css("position","relative");
            $("#ia-article").animate({left: "-240"}, 350);
        }else{
            /*오른쪽으로 보이게 하고 싶을 때 */
            $("#inair-leftIcon").css("display""inline");
            $("#inair-rightIcon").css("display""none");
            $("#leftSlideBtnDiv").animate({left: "0"}, 350);
 
            $("#ia-article").css("position","static");
            $("#ia-article").animate({left: "0"}, 350);
        }
 
        $("#ia-aside-submenu").animate({width:"toggle"}, 350);
 
    });
cs


1
2
3
4
5
6
7
8
9
10
#leftSlideBtn{
    width: 10px;
    height: 10px;
    /* border: 1px solid #72abe6; */
    padding: 8px 1.3px;
    border-radius-right: 3px;
    background: #359ed0;
    color: white;
    border-radius: 0px 5px 5px 0px;
}
cs


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="ia-body" class="container-fluid noPadding">
        <!-- aside  -->
        <aside id="ia-aside">
            <div id="ia-aside-submenu" class=" hiddenScroll">
                <div class="tab-content ia-aside-tab"></div>
            </div>
        </aside>
        <div  id="leftSlideBtnDiv" style="top:50%; position: relative; z-index: 1;">
            <span id="leftSlideBtn" >
            <i class="fas fa-chevron-left" id="inair-leftIcon" style="display:inline;"></i>
            <i class="fas fa-chevron-right" id="inair-rightIcon" style="display:none;"></i>
            </span>
        </div>
        <!-- article -->
        <!--  타이틀 breadcrumb-->
 
        <article id="ia-article" class="container-fluid ia-article-tab">
            <div id="ia-article-head">
 
...
cs










반응형