How to Do Transition in the Hover

Question

How to Do Transition in the Hover

Navigation

#1 by (1 votes)

3

I'm making an effect for MENU using CSS and jQuery.

Problem
transition works from the element itself with hover action. Home The reverse does not work.

The CSS below does the following:

You have a Mobile MENU hidden to the left of the site. And when I use a jQuery function to call the .showMenu class, the MENU runs to the left:0 position. But when I click back on the button that executes the jQuery function, the MENU does not return the same way it came - running.

The MENU simply disappears.

// CSS
nav#menu-navigation{
    position:fixed;
    background-color: #FFF;
    width: 80%;
    max-width: 256px;
    height: 70%;
    top: 0;
    left: -400px;
    bottom: 20px;
    margin: auto;
    overflow: auto;
    transition: left 0.3s ease;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    &.show-menu{
        left: 0px;
        z-index: 1;
        transition: left 0.3s ease;
    }
}

// jQuery
$(document).ready(function(){

    $('.open-menu').on('click tap', function(){
        $('nav#menu-navigation, main').toggleClass('show-menu');
    });

});

jquery css

asked by anonymous 01.07.2015 / 19:17

1 answer

generate query dynamically with union Redirect from "domain.com.br" to "subdomain.xyz.com.br"

score 1 · Accepted Answer

Apparently, the transition is OK:

$('button').click(function(){
  $('div').toggleClass('show');
});

div {
  position: fixed;
  overflow: auto;
  left: -100px;
  transition: left 0.3s ease;
}
div.show {
  left: 0px;
  transition: left 0.3s ease;
}
button {
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Teste</div>
<button>Toggle</button>

This leads me to think that maybe the problem is another one.

Looking at your CSS, I see that you put z-index: 1; into .show-menu . Maybe you have put this because some other CSS was moving it to 0 and had to increase to 1 to be visible. That would be a good explanation for what you described.

Then try to add z-index: 1; direct to nav#menu-navigation .