Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Zhihao Wang
Zhihao Wang
9,687 Points

How to keep an object rotated until the object is clicked again?

Here's my goal: I want to ultimately have it so that the hamburger menu rotates 90 degrees clockwise when it is clicked, and then when it is clicked a 2nd time, it rotates -90 degrees and returns to it's previous state. I've already tried toggling classes but when the hamburger menu is clicked it rotates then when it has finished the rotation goes back immediately to it's original position without any further user interaction.

Here's my current code:

 <nav class="col-md-8">
    <a href="#" class="icon-menu" id="menu"></a>
        <ul class="hideme">
            <a href="#"><li>Home</li></a>
            <li>/</li>
            <a href="#"><li>Portfolio</li></a>
            <li>/</li>
            <a href="#"><li>About</li></a>
            <li>/</li>
            <a href="#"><li>Contact</li></a>
        </ul>
  </nav>

.test{
   transform: rotate(90deg);
}

$('.hideme').hide();
$('#menu').click(function(){
  $('.hideme').toggle(500);
  $(this).toggleClass('test');
});

However, the toggling of the class test with the css transform property does not work as I want it to. When it is clicked, the css animation starts, but right after it completes a 90 deg rotation it blinks back to it's original state.

1 Answer

Colin Bell
Colin Bell
29,679 Points

Are you trying to do something like this? jsfiddle

Zhihao Wang
Zhihao Wang
9,687 Points

Hmm, yes that's exactly what I wanted to do.

Can you explain what you changed/added to make your code works?

Colin Bell
Colin Bell
29,679 Points

Is that all the code you are using? Can you put it in a jsfiddle like I did above so I can see the problem reproduced? That way I can take a look at it.

If you look at my js, it's essentially the same as yours (I just used different names for the elements, but the functions we're calling are the same), so I'm not exactly sure why yours would be acting weird.

Zhihao Wang
Zhihao Wang
9,687 Points

It is actually unpractical to do it over jsfiddle since they do not let you upload files and such. I'm using a web font icon tool called fontello, if you wouldn't mind, I have a dropbox folder with all my assets that you can check out.

https://www.dropbox.com/sh/dz0o797czszsorg/AACrBnSZNUUKlkNvwT9Nw4Raa?dl=0

Colin Bell
Colin Bell
29,679 Points

All you need to do is add 'display: inline-block' to the .icon-menu. It will also work with 'float: left'.

The 'a' element is inline by default, and inline elements aren't affected by the transform property.

You'll also have to play around with positioning and/or floats of both the .icon-menu and 'header nav ul li' selector after that.

I got it to function how I think you'd like it to by doing:

.icon-menu{
    transition: transform linear .2s;
    display: inline-block;
    float: left;
}

header nav ul{
    position: relative;
    display: inline-block;
    top: 10px;
}

Let me know if that works for you, and/or if you have any more questions.

Zhihao Wang
Zhihao Wang
9,687 Points

Thanks a lot! I don't know why I haven't come around to that when I've been working on this issue for quite a while.