Mads Kristensen Mads Kristensen - 4 months ago 19
CSS Question

button slide on hover

I am forced to have my navbar in the middle, because the width of my dropdownbox is 300 px; I would like the button "login" to be in the right side, and when you hover over the "Login", the width slides from right to left, so the dropdownbox width fits the page. And when you remove the mousepointer, the button slide from left to right, to be in the "normal" position.

I have been playing around with this, but how can I solve that it does not slides back again automatically, instead of pushing a button?

This is how I would like it

This is how it is now

Width of the dropdown box

Answer

you're post is a little confusing to understand. At the moment the code requires you to press the button to first display and then hide the element. What I got is that you'd like this to be automatic.

One way to do this is for a desktop only solution is to use hover instead of click. But this creates some issues of its own (can't click sign-in fast enough), I'm not sure you want to go down this road.

$(".myButton").hover(function () { /* Do this */ });