Rotate when hover on navigation and stay when clicked. When clicked on other navigation, siblings rotate back to original position

Question

I'd like to have a text(navigation) rotate 45 degrees on hover. When the text is clicked/selected I'd like the text to remain in that position. When the user clicks on the other nav, then the siblings class will be removed and rotated back to 0deg. Anyone can offer a solution?

<script type="text/javascript"> $(document).ready(function(){ $(".nav li a").click(function(){ $(this).toggleClass("active"); $(this).siblings().removeClass("active");}); }); </script>

HTML:

<nav class="desktop"> <ul id="nav" class="nav"> <li><a href="#about" title="Next Section">ABOUT</a></li> <li><a href="#services" title="Next Section">SERVICES</a></li> <li><a href="#homepage" title="Next Section"><img src="images/logo.png"></a></li> <li><a href="#works" title="Next Section">WORKS</a></li> <li><a href="#contact" title="Next Section">CONTACT</a></li> </ul> </nav>

.desktop #nav li
{
display:inline-block;
width:150px;
font-size:120%;
-webkit-transition:-webkit-transform 0.5s;  For Safari 3.1 to 6.0 
transition:transform 0.5s;
}

.desktop #nav li:hover, .active
{
display:inline-block;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}`

Answer 1

The problem is your Javascript part:

$(this).siblings().removeClass("active");

You want to access the child elements of the lists. $(this) is the anchor tag you click on and therefor there are no siblings inside this li element.

Try this:

$(this).parent().siblings().each(function () {
        $(this).children().removeClass("active");
    });
})

This gets the parent list element and is afterwards iterating through the other li's child-elements to remove the active class.

I pasted your code in a JSFiddle - it is pretty ugly and not styled properly but you can see the javascript works.

Edit: The problem with your 90° is that you apply the CSS transition to your li element. Thats why on hover your li element is rotating and on click the anchor inside the li is rotating as well.

A better approach to mine is to put the active class on the list element so you dont have to change anything on the css since the click will prevent the hover from working.

See here: Updated fiddle

$(document).ready(function () {
$(".nav li").click(function () {
    $(this).toggleClass("active");
    $(this).siblings().removeClass("active");
})

});

Answer 2

Change the CSS to this :

.desktop #nav li {
    display:inline-block;
    width:150px;
    cursor:pointer
}

.desktop #nav li a{
    display:inline-block;
    transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transition: transform 0.3s ease 0s;
    -webkit-transition: transform 0.3s ease 0s;
    -moz-transition: transform 0.3s ease 0s;
    -o-transition: transform 0.3s ease 0s;
} 

.desktop #nav li:hover a, .desktop #nav li.active a{
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}

and jQuery code to this :

$(document).ready(function(){ 
    $(".nav li").click(function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
    }); 
});

The problem with your code was, when you hover to the <li> tag, it rotates to 45deg so it will move out of the cursor area. So hover out event will be fired and <li> tag will again rotate to 0deg. Again it comes in cursor area and this goes forever !

Here you can rotate <a> tag instead of <li> tag and it will do the work.

Working Demo : http://jsfiddle.net/VQ2x2/7/

Answer 3

I think you had mistaken in your code. The code should be something like this:

$(document).ready(function(){
   $(".nav li a").click(function(){
      $(this).toggleClass("active");
      $(this).parent().siblings().find("a").removeClass("active");
   });
});

OR

you may also try this:

$(document).ready(function(){
   $(".nav li a").click(function(){
      $(this).parent().parent().find("a").removeClass("active");  //It will remove active class from all anchor elements.
      $(this).toggleClass("active");
   });
});