Javascript：更改'顯示'和'左'+切換類

Question

單擊菜單按鈕時，我想要做兩件事。首先，我希望酒吧變成一個十字架，這已經完成x.classList.toggle("change");，但什麼不工作是#navi div應該滑向右側並顯示。

這裏是我的嘗試：（不介意#mainicons，#description等。

function sidebarFunction(x) { 
 
    x.classList.toggle("change"); 
 
    ('#navi').style.left = "80px"; 
 
    ('#navi').style.display = "inline"; 
 
}; 
 

 
$(document).ready(function(){ 
 
    $("#navi").click(function(){ 
 
$("#navi .fa-chevron-down").toggleClass("rtoate180"); 
 
$("#navigation").slideToggle(500); 
 
    }); 
 
});

#more-bars{ 
 
    position:fixed; 
 
    cursor: pointer; 
 
    width:35px; 
 
    height:25px; 
 
    left: 18px; 
 
    top: 20px; 
 
    } 
 

 
    .bar1, 
 
    .bar2, 
 
    .bar3 { 
 
    position: relative; 
 
    width: 35px; 
 
    height: 5px; 
 
    margin-top:6px; 
 
    background-color: #843b62; 
 
    transition: 0.4s; 
 
    -webkit-transition: 0.4s; 
 
    -o-transition: 0.4s; 
 
    -moz-transition: 0.4s; 
 
    } 
 

 
    .change .bar1 { 
 
    -webkit-transform: rotate(-45deg) translate(-9px, 6px); 
 
    transform: rotate(-45deg) translate(-9px, 6px); 
 
    -ms-transform: rotate(-45deg) translate(-9px, 6px); 
 
    } 
 

 
    .change .bar2 { 
 
    opacity: 0; 
 
    } 
 

 
    .change .bar3 { 
 
    -webkit-transform: rotate(45deg) translate(-8px, -8px); 
 
    transform: rotate(45deg) translate(-8px, -8px); 
 
    -ms-transform: rotate(45deg) translate(-8px, -8px); 
 
    } 
 
    
 
    #more-bars:hover .bar1, #more-bars:hover .bar2,#more-bars:hover .bar3{ 
 
     background-color: #f67e7d 
 
    } 
 
    /* Main icons */ 
 

 
    #mainicons { 
 
     z-index:1; 
 
    position: fixed; 
 
    top: 250px; 
 
    left: 0px; 
 
    text-align: center; 
 
    } 
 

 
    #mainicons>a { 
 
    position: fixed; 
 
    margin-top: 40px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    } 
 

 
    #mainicons i { 
 
    display: block; 
 
    height: 50px; 
 
    width: 50px; 
 
    padding: 10px; 
 
    color: #fff; 
 
    background: #f67e7d; 
 
    font-size: 20px; 
 
    line-height: 50px; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
    } 
 

 
    #mainicons i:hover { 
 
    -webkit-box-shadow: inset 7px 0px 0px 0px #f67e7d; 
 
    -moz-box-shadow: inset 7px 0px 0px 0px #f67e7d; 
 
    box-shadow: inset 7px 0px 0px 0px #f67e7d; 
 
    color: #f67e7d; 
 
    background: #fff; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
    } 
 

 
    /*------ SIDEBAR -----*/ 
 

 
    #sidebar { 
 
    width: 300px; 
 
    height: 100%; 
 
    margin-left: -300px; 
 
    top: 0px; 
 
    } 
 

 
    /*------ Narrow sidebar -----*/ 
 

 
    #sidebar1 { 
 
    z-index: 10; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0; 
 
    width: 70px; 
 
    height: 200px; 
 
    } 
 

 
    /* Blog title */ 
 

 
    #blogtitle { 
 
    font-family: Raleway; 
 
    font-size: 8px; 
 
    color: #843b62; 
 
    width: 70px; 
 
    line-height: 30px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    word-wrap: break-word; 
 
    -webkit-transition: all 0.3s ease 0.3s; 
 
    -moz-transition: all 0.3s ease 0.3s; 
 
    -o-transition: all 0.3s ease 0.3s; 
 
    transition: all 0.3s ease 0.3s; 
 
    } 
 
    
 
    #blogname { 
 
    margin-top:-30px; 
 
    font-family: Raleway; 
 
    font-size: 8px; 
 
    color: #843b62; 
 
    width: 70px; 
 
    line-height: 30px; 
 
    margin-left:-70px; 
 
    text-align: center; 
 
    -webkit-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 
    } 
 

 

 
    #avatar:hover ~ #blogtitle { 
 
    -ms-transform: translate(-70px); 
 
    -webkit-transform: translate(-70px); 
 
    transform: translate(-70px); 
 
    -webkit-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 

 
    } 
 
    #avatar:hover ~ #blogname{ 
 
    -ms-transform: translate(70px); 
 
    -webkit-transform: translate(70px); 
 
    transform: translate(70px); 
 
     -webkit-transition: all 0.3s ease 0.3s; 
 
    -moz-transition: all 0.3s ease 0.3s; 
 
    -o-transition: all 0.3s ease 0.3s; 
 
    transition: all 0.3s ease 0.3s; 
 
    } 
 
    /* Avatar */ 
 

 
    #avatar { 
 
    margin: auto; 
 
    margin-top: 100px; 
 
    width: 50px; 
 
    height: 50px; 
 
    z-index:10; 
 
    } 
 

 
    #avatar img { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 10px; 
 
    -webkit-transition: all 0.6s ease; 
 
    -moz-transition: all 0.6s ease; 
 
    -ms-transition: all 0.6s ease; 
 
    -o-transition: all 0.6s ease; 
 
    transition: all 0.6s ease; 
 
    } 
 

 
    #avatar img:hover { 
 
    -ms-transform: rotate(360deg); 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
    /* Description */ 
 

 
    #description { 
 
    position: fixed; 
 
    margin-left: 80px; 
 
    top:20px; 
 
    color: #000; 
 
    background: #fff; 
 
    padding: 2px 10px 2px 10px; 
 
    width: 150px; 
 
    font-size: 13px; 
 
    line-height: 18px; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    opacity:0.5; 
 
    } 
 
    
 
    #description:after { 
 
content: ''; 
 
position: absolute; 
 
border-style: solid; 
 
border-width: 18px 18px 18px 0; 
 
border-color: transparent #fff; 
 
display: block; 
 
width: 0; 
 
z-index: 1; 
 
left: -18px; 
 
top: 85px; 
 
} 
 

 
#avatar>img:hover + #description{ 
 
    opacity:0.75; 
 
    margin-left:110px; 
 
} 
 
    
 
    /* Search box */ 
 

 
    #search { 
 
    margin-top: 10px; 
 
    margin-left: 20px; 
 
    width: 180px; 
 
    height: 30px; 
 
    overflow: hidden; 
 
    color: #000000; 
 
    background: #fff; 
 
    } 
 

 
    /* Navigation */ 
 

 
    #navi { 
 
    cursor: pointer; 
 
    position:absolute; 
 
    top:20px; 
 
    left: 40px; 
 
    width: 170px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    padding-left: 10px; 
 
    overflow: hidden; 
 
    color: #000000; 
 
    background: #f67e7d; 
 
    font-size: 12px; 
 
    text-align: left; 
 
    display:none; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -ms-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
    } 
 

 
    #navi i { 
 
    position: absolute; 
 
    margin-left: 77px; 
 
    margin-top: 10px; 
 
    color: #000000!important; 
 
    font-size: 12px; 
 
    } 
 

 
    #navi .fa-chevron-down { 
 
    -webkit-transition: all 0.7s ease; 
 
    -moz-transition: all 0.7s ease; 
 
    -ms-transition: all 0.7s ease; 
 
    -o-transition: all 0.7s ease; 
 
    transition: all 0.7s ease; 
 
    } 
 

 
    .rtoate180 { 
 
    transform: rotate(180deg); 
 
    } 
 

 
    #navigation { 
 
    margin-top: 10px; 
 
    margin-left: 20px; 
 
    width: 180px; 
 
    overflow: hidden; 
 
    display: none; 
 
    background: #f67e7d; 
 
    } 
 

 
#navigation a { 
 
    display: inline-block; 
 
    text-decoration:none; 
 
} 
 

 
#navigationin span { 
 
    color: #ffb997; 
 
    font-size: 10px; 
 
    margin-bottom:5px; 
 
    display: inline-block; 
 
    text-transform:lowercase; 
 
    text-align:center; 
 
    -webkit-transition: all .3s ease; 
 
    -moz-transition: all .3s ease; 
 
    -o-transition: all .3s ease; 
 
    transition: all .3s ease; 
 
    } 
 

 
    #navigationin a:hover i { 
 
-webkit-transform : rotate(360deg); 
 
-moz-transform : rotate(360deg); 
 
-ms-transform : rotate(360deg); 
 
-o-transform : rotate(360deg); 
 
transform : rotate(360deg); 
 
    color: #fff!important; 
 
    } 
 
    
 
    #navigationin a:hover span{ 
 
     color:#fff; 
 
    } 
 
    
 
#navigation i { 
 
    display: block; 
 
    color: #ffb997!important; 
 
    font-size: 20px; 
 
    margin: 0px 10px -10px 10px; 
 
    padding:5px; 
 
    -webkit-transition: all .5s ease-in-out; 
 
    -moz-transition: all .5s ease-in-out; 
 
    -o-transition: all .5s ease-in-out; 
 
    transition: all .5s ease-in-out; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<div id="mainicons"> 
 
<a href="/"><i class="fa fa-home"></i></a> 
 
<a href="/ask"><i class="fa fa-comment"></i></a> 
 
<a href="/submit"><i class="fa fa-download"></i></a> 
 
<a href="/about"><i class="fa fa-address-card"></i></a> 
 

 

 
</div> 
 
<!--End mainicons--> 
 

 
<div id="sidebar"> 
 

 
<div id="sidebar1"> 
 
<div id="more-bars" onclick="sidebarFunction(this)"> 
 
    <div class="bar1"></div> 
 
    <div class="bar2"></div> 
 
    <div class="bar3"></div> 
 
</div> 
 

 
<div id="avatar"><img src="{image:Avatar}"></div> 
 

 
<div id="description"> 
 
{Description}</div> 
 
<div id="blogtitle">@actorsblog</div> 
 
<div id="blogname">{BlogTitle}</div> 
 

 
<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div> 
 
    
 
<!--Navigation--> 
 
<div id="navigation"> 
 
    
 
<div id="navigationin"> 
 
<center> 
 
<a href="{text:Link One Url}"><i class="fa fa-user-circle"></i><span>{text:Link One Title}</span></a> 
 
<a href="{text:Link Two Url}"><i class="fa fa-question-circle"></i><span>{text:Link Two Title}</span></a> 
 
<a href="{text:Link Nine Url}"><i class="fa fa-folder-open-o"></i><span>{text:Link Nine Title}</span></a> 
 
<a href="{text:Link Three Url}"><i class="fa fa-star"></i><span>{text:Link Three Title}</span></a> 
 
<a href="{text:Link Four Url}"><i class="fa fa-film"></i><span>{text:Link Four Title}</span></a> 
 
<a href="{text:Link Eight Url}"><i class="fa fa-link"></i><span>{text:Link Eight Title}</span></a> 
 
<a href="{text:Link Five Url}"><i class="fa fa-file-video-o"></i><span>{text:Link Five Title}</span></a> 
 
<a href="{text:Link Six Url}"><i class="fa fa-file-image-o"></i><span>{text:Link Six Title}</span></a> 
 
<a href="{text:Link Seven Url}"><i class="fa fa-square-o"></i><span>{text:Link Seven Title}</span></a> 
 
<a href="{text:Twitter url}" target="_blank"><i class="fa fa-twitter-square"></i><span>twitter</span></a> 
 
<a href="{text:Instagram url} target="_blank""><i class="fa fa-instagram"></i><span>instagram</span></a> 
 
<a href="{text:Youtube url}" target="_blank"><i class="fa fa-youtube"></i><span>youtube</span></a> 
 
</center> 
 
</div> 
 
<!--End navigationin--> 
 
    
 
</div> 
 
<!--End Navigation--> 
 

 

 
</div> 
 
<!--End Sidebar1-->

謝謝:)

Answer 1

對於使用你的ID選擇一個元素編寫它像document.getElementById('navi') 或者如果使用jquery使用$('#navi')。對於滑動權工作使用不透明度，而不是顯示非e.For詳細信息您可以檢查this answer

而是改變風格，你可以切換一個班級，並達到預期的效果

檢查該樣本

function sidebarFunction(x) { 
 
    x.classList.toggle("change"); 
 
    
 
    document.getElementById('navi').classList.toggle('show') 
 
    
 
/* .opacity = "1"; 
 
    document.getElementById('navi').style.left = "80px"; 
 
    document.getElementById('navi').style.height = "30px";*/ 
 
    
 
}; 
 

 
$(document).ready(function(){ 
 
    $("#navi").click(function(){ 
 
$("#navi .fa-chevron-down").toggleClass("rtoate180"); 
 
$("#navigation").slideToggle(500); 
 
    }); 
 
});

#more-bars{ 
 
    position:fixed; 
 
    cursor: pointer; 
 
    width:35px; 
 
    height:25px; 
 
    left: 18px; 
 
    top: 20px; 
 
    } 
 

 
    .bar1, 
 
    .bar2, 
 
    .bar3 { 
 
    position: relative; 
 
    width: 35px; 
 
    height: 5px; 
 
    margin-top:6px; 
 
    background-color: #843b62; 
 
    transition: 0.4s; 
 
    -webkit-transition: 0.4s; 
 
    -o-transition: 0.4s; 
 
    -moz-transition: 0.4s; 
 
    } 
 

 
    .change .bar1 { 
 
    -webkit-transform: rotate(-45deg) translate(-9px, 6px); 
 
    transform: rotate(-45deg) translate(-9px, 6px); 
 
    -ms-transform: rotate(-45deg) translate(-9px, 6px); 
 
    } 
 

 
    .change .bar2 { 
 
    opacity: 0; 
 
    } 
 

 
    .change .bar3 { 
 
    -webkit-transform: rotate(45deg) translate(-8px, -8px); 
 
    transform: rotate(45deg) translate(-8px, -8px); 
 
    -ms-transform: rotate(45deg) translate(-8px, -8px); 
 
    } 
 
    
 
    #more-bars:hover .bar1, #more-bars:hover .bar2,#more-bars:hover .bar3{ 
 
     background-color: #f67e7d 
 
    } 
 
    /* Main icons */ 
 

 
    #mainicons { 
 
     z-index:1; 
 
    position: fixed; 
 
    top: 250px; 
 
    left: 0px; 
 
    text-align: center; 
 
    } 
 

 
    #mainicons>a { 
 
    position: fixed; 
 
    margin-top: 40px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    } 
 

 
    #mainicons i { 
 
    display: block; 
 
    height: 50px; 
 
    width: 50px; 
 
    padding: 10px; 
 
    color: #fff; 
 
    background: #f67e7d; 
 
    font-size: 20px; 
 
    line-height: 50px; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
    } 
 

 
    #mainicons i:hover { 
 
    -webkit-box-shadow: inset 7px 0px 0px 0px #f67e7d; 
 
    -moz-box-shadow: inset 7px 0px 0px 0px #f67e7d; 
 
    box-shadow: inset 7px 0px 0px 0px #f67e7d; 
 
    color: #f67e7d; 
 
    background: #fff; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
    } 
 

 
    /*------ SIDEBAR -----*/ 
 

 
    #sidebar { 
 
    width: 300px; 
 
    height: 100%; 
 
    margin-left: -300px; 
 
    top: 0px; 
 
    } 
 

 
    /*------ Narrow sidebar -----*/ 
 

 
    #sidebar1 { 
 
    z-index: 10; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0; 
 
    width: 70px; 
 
    height: 200px; 
 
    } 
 

 
    /* Blog title */ 
 

 
    #blogtitle { 
 
    font-family: Raleway; 
 
    font-size: 8px; 
 
    color: #843b62; 
 
    width: 70px; 
 
    line-height: 30px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    word-wrap: break-word; 
 
    -webkit-transition: all 0.3s ease 0.3s; 
 
    -moz-transition: all 0.3s ease 0.3s; 
 
    -o-transition: all 0.3s ease 0.3s; 
 
    transition: all 0.3s ease 0.3s; 
 
    } 
 
    
 
    #blogname { 
 
    margin-top:-30px; 
 
    font-family: Raleway; 
 
    font-size: 8px; 
 
    color: #843b62; 
 
    width: 70px; 
 
    line-height: 30px; 
 
    margin-left:-70px; 
 
    text-align: center; 
 
    -webkit-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 
    } 
 

 

 
    #avatar:hover ~ #blogtitle { 
 
    -ms-transform: translate(-70px); 
 
    -webkit-transform: translate(-70px); 
 
    transform: translate(-70px); 
 
    -webkit-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 

 
    } 
 
    #avatar:hover ~ #blogname{ 
 
    -ms-transform: translate(70px); 
 
    -webkit-transform: translate(70px); 
 
    transform: translate(70px); 
 
     -webkit-transition: all 0.3s ease 0.3s; 
 
    -moz-transition: all 0.3s ease 0.3s; 
 
    -o-transition: all 0.3s ease 0.3s; 
 
    transition: all 0.3s ease 0.3s; 
 
    } 
 
    /* Avatar */ 
 

 
    #avatar { 
 
    margin: auto; 
 
    margin-top: 100px; 
 
    width: 50px; 
 
    height: 50px; 
 
    z-index:10; 
 
    } 
 

 
    #avatar img { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 10px; 
 
    -webkit-transition: all 0.6s ease; 
 
    -moz-transition: all 0.6s ease; 
 
    -ms-transition: all 0.6s ease; 
 
    -o-transition: all 0.6s ease; 
 
    transition: all 0.6s ease; 
 
    } 
 

 
    #avatar img:hover { 
 
    -ms-transform: rotate(360deg); 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
    /* Description */ 
 

 
    #description { 
 
    position: fixed; 
 
    margin-left: 80px; 
 
    top:20px; 
 
    color: #000; 
 
    background: #fff; 
 
    padding: 2px 10px 2px 10px; 
 
    width: 150px; 
 
    font-size: 13px; 
 
    line-height: 18px; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    opacity:0.5; 
 
    } 
 
    
 
    #description:after { 
 
content: ''; 
 
position: absolute; 
 
border-style: solid; 
 
border-width: 18px 18px 18px 0; 
 
border-color: transparent #fff; 
 
display: block; 
 
width: 0; 
 
z-index: 1; 
 
left: -18px; 
 
top: 85px; 
 
} 
 

 
#avatar>img:hover + #description{ 
 
    opacity:0.75; 
 
    margin-left:110px; 
 
} 
 
    
 
    /* Search box */ 
 

 
    #search { 
 
    margin-top: 10px; 
 
    margin-left: 20px; 
 
    width: 180px; 
 
    height: 30px; 
 
    overflow: hidden; 
 
    color: #000000; 
 
    background: #fff; 
 
    } 
 

 
    /* Navigation */ 
 

 
    #navi { 
 
    cursor: pointer; 
 
    position:absolute; 
 
    top:20px; 
 
    left: 40px; 
 
    width: 170px; 
 
    height: 0px; 
 
    line-height: 30px; 
 
    padding-left: 10px; 
 
    overflow: hidden; 
 
    color: #000000; 
 
    background: #f67e7d; 
 
    font-size: 12px; 
 
    text-align: left; 
 
    /*display:none;*/ 
 
    opacity:0; 
 
    -webkit-transition: left 0.5s ease; 
 
    -moz-transition: left 0.5s ease; 
 
    -ms-transition: left 0.5s ease; 
 
    -o-transition: left 0.5s ease; 
 
    transition: left 0.5s ease; 
 
    } 
 

 
    #navi i { 
 
    position: absolute; 
 
    margin-left: 77px; 
 
    margin-top: 10px; 
 
    color: #000000!important; 
 
    font-size: 12px; 
 
    } 
 

 
    #navi .fa-chevron-down { 
 
    -webkit-transition: all 0.7s ease; 
 
    -moz-transition: all 0.7s ease; 
 
    -ms-transition: all 0.7s ease; 
 
    -o-transition: all 0.7s ease; 
 
    transition: all 0.7s ease; 
 
    } 
 

 
    .rtoate180 { 
 
    transform: rotate(180deg); 
 
    } 
 

 
    #navigation { 
 
    margin-top: 10px; 
 
    margin-left: 20px; 
 
    width: 180px; 
 
    overflow: hidden; 
 
    display: none; 
 
    background: #f67e7d; 
 
    } 
 

 
#navigation a { 
 
    display: inline-block; 
 
    text-decoration:none; 
 
} 
 

 
#navigationin span { 
 
    color: #ffb997; 
 
    font-size: 10px; 
 
    margin-bottom:5px; 
 
    display: inline-block; 
 
    text-transform:lowercase; 
 
    text-align:center; 
 
    -webkit-transition: all .3s ease; 
 
    -moz-transition: all .3s ease; 
 
    -o-transition: all .3s ease; 
 
    transition: all .3s ease; 
 
    } 
 

 
    #navigationin a:hover i { 
 
-webkit-transform : rotate(360deg); 
 
-moz-transform : rotate(360deg); 
 
-ms-transform : rotate(360deg); 
 
-o-transform : rotate(360deg); 
 
transform : rotate(360deg); 
 
    color: #fff!important; 
 
    } 
 
    
 
    #navigationin a:hover span{ 
 
     color:#fff; 
 
    } 
 
    
 
#navigation i { 
 
    display: block; 
 
    color: #ffb997!important; 
 
    font-size: 20px; 
 
    margin: 0px 10px -10px 10px; 
 
    padding:5px; 
 
    -webkit-transition: all .5s ease-in-out; 
 
    -moz-transition: all .5s ease-in-out; 
 
    -o-transition: all .5s ease-in-out; 
 
    transition: all .5s ease-in-out; 
 
    } 
 
    
 
    #navi.show{ 
 
    opacity:1; 
 
    height:30px; 
 
    left:80px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<div id="mainicons"> 
 
<a href="/"><i class="fa fa-home"></i></a> 
 
<a href="/ask"><i class="fa fa-comment"></i></a> 
 
<a href="/submit"><i class="fa fa-download"></i></a> 
 
<a href="/about"><i class="fa fa-address-card"></i></a> 
 

 

 
</div> 
 
<!--End mainicons--> 
 

 
<div id="sidebar"> 
 

 
<div id="sidebar1"> 
 
<div id="more-bars" onclick="sidebarFunction(this)"> 
 
    <div class="bar1"></div> 
 
    <div class="bar2"></div> 
 
    <div class="bar3"></div> 
 
</div> 
 

 
<div id="avatar"><img src="{image:Avatar}"></div> 
 

 
<div id="description"> 
 
{Description}</div> 
 
<div id="blogtitle">@actorsblog</div> 
 
<div id="blogname">{BlogTitle}</div> 
 

 
<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div> 
 
    
 
<!--Navigation--> 
 
<div id="navigation"> 
 
    
 
<div id="navigationin"> 
 
<center> 
 
<a href="{text:Link One Url}"><i class="fa fa-user-circle"></i><span>{text:Link One Title}</span></a> 
 
<a href="{text:Link Two Url}"><i class="fa fa-question-circle"></i><span>{text:Link Two Title}</span></a> 
 
<a href="{text:Link Nine Url}"><i class="fa fa-folder-open-o"></i><span>{text:Link Nine Title}</span></a> 
 
<a href="{text:Link Three Url}"><i class="fa fa-star"></i><span>{text:Link Three Title}</span></a> 
 
<a href="{text:Link Four Url}"><i class="fa fa-film"></i><span>{text:Link Four Title}</span></a> 
 
<a href="{text:Link Eight Url}"><i class="fa fa-link"></i><span>{text:Link Eight Title}</span></a> 
 
<a href="{text:Link Five Url}"><i class="fa fa-file-video-o"></i><span>{text:Link Five Title}</span></a> 
 
<a href="{text:Link Six Url}"><i class="fa fa-file-image-o"></i><span>{text:Link Six Title}</span></a> 
 
<a href="{text:Link Seven Url}"><i class="fa fa-square-o"></i><span>{text:Link Seven Title}</span></a> 
 
<a href="{text:Twitter url}" target="_blank"><i class="fa fa-twitter-square"></i><span>twitter</span></a> 
 
<a href="{text:Instagram url} target="_blank""><i class="fa fa-instagram"></i><span>instagram</span></a> 
 
<a href="{text:Youtube url}" target="_blank"><i class="fa fa-youtube"></i><span>youtube</span></a> 
 
</center> 
 
</div> 
 
<!--End navigationin--> 
 
    
 
</div> 
 
<!--End Navigation--> 
 

 

 
</div> 
 
<!--End Sidebar1-->