The arrow is rotated 180 degrees by clicking on the dropdown menu
I have a dropdown menu and the arrow to the right of it rotates 180 degrees when I click on it! The problem is I set the arrow to html and not javascript. But I thought there was a way to put it in css when transitioning from C # navi to #navigation ..
Here's my code
<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navigation").slideToggle(500);
});
});
</script>
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<div id="navigation">
<div id="navigationin">
Sorry I can't get it to work. Thanks for any help you can give!
(if you want to use it at www.typhotoshop.tumblr.com in the left hover pane)
+3
source to share
2 answers
All you have to do is add a css3 transition to your arrow and add / remove a custom class to the last one to rotate 180 ° where the transition occurs.
#navi .fa-chevron-down {
transition: all 0.5s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
add to js toggleclass when clicking on navi
$("#navi .fa-chevron-down").toggleClass("rtoate180");
A working snippet is shown below:
$(document).ready(function(){
$("#navi").click(function(){
$("#navi .fa-chevron-down").toggleClass("rtoate180");
$("#navigation").stop().slideToggle(500);
});
});
#navi .fa-chevron-down {
transition: all 0.5s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navi"> NAVIGATION
<i class="fa fa-chevron-down"></i>
</div>
<div id="navigation">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
<div id="navigationin"></div>
+4
source to share