Witam! Mam problem z wysuwanym bocznym menu, otóż działa ono poprawnie, ale chciałbym uzyskać efekt: przed rozwinięciem np strzałka w prawo, po rozwinięciu zamienia się ona w strzałkę w lewo. Próbowałem podmieniać to w klasie visible, ale niestety nie działa. Proszę o pomoc.
Dokładnie chodzi mi o taki efekt: http://imgur.com/a/IGHoy
U mnie wygląda to tak: http://imgur.com/a/fYYc9
Mój kod:
część z HTMLa:
<div class="sidebar-btn">
<span class="glyphicon glyphicon-triangle-right" style="padding-bottom: 20px" ></span>
menu
</div>
Bootstrap.css:
#sidebar {
background: white;
width: 200px;
height: 100%;
display: block;
position: absolute;
left: -160px;
top: 50px;
transition: left 0.3s linear;
}
ul li {
list-style: none;
}
ul li a {
color: #053e62;
display: block;
padding-bottom: 10px;
}
#sidebar.visible {
left: 0px;
}
.sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
cursor: pointer;
margin: 20px;
top: 40%;
position: absolute;
right: -60px;
font-size: 15px;
}
.sidebar-btn span {
height: 5px;
margin-bottom: 5px;
display: block;
}
#sidebar-shadow {
margin-bottom: 5px;
display: block;
}
oraz:
<script>
$(document).ready(function() {
$('.sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>