Hy everyone , I`m looking to create a navigation menu that extends horizontaly on mouse hoover,
Let`s say i have 3 buttons:home, about , more.What i want to do is when i hover over “home” button the other two buttons should shrink into the right side of the menu and the hovered button will display the entire background image that it has, and when i hover over the second button, “about” button it should do the same as first and only the buttons that are on the right side of this button should shrink into the right, first button should remain intact when i hover over the second button
here is another thing that i`m trying to acomplish, when you hover a button the other ones should get really small in the right of the screen, about the size of the text height, a little bigger for them to fit nice, is that even possible?
for example if you hover the second button, the first will remain in its natural state
the hovered one expands and the rest of them really shrink there in the right side
This reply has been reported for inappropriate content.
You’d use the
~ selector and reduce the width of any following elements, I just can’t seem to get it right now, and don’t have time to figure out how to fix it.
Here’s the start though: http://codepen.io/ChrisPlz/pen/ivCAk
dunno yet…i`m new to this codepen thing…
problem is…after geting the code into a html and a css file chrome wont display it as it should…it looks retarded on chrome, text is not flipped transition is not working and when i hover they go all crazy :( .firefox displayes it ok but i still had to make some changes to px numbers to fit right…
You must be logged in to reply to this topic.