Hy everyone , Im looking to create a navigation menu that extends horizontaly on mouse hoover,
Lets 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
i dont have any code because i dont really know where to start from...
ive seen it on a website long time ago but i cant remember where...thats bad...
on the bg image i`m thinking about some sound waves that goes along the extended image
thanks chris!
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
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.
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...
Hy everyone , I
m looking to create a navigation menu that extends horizontaly on mouse hoover, Lets 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 buttonWhat have you tried so far?
Have you seen this on another site...if so, which one?
Do you have ANY code you can show us.
Certainly, a hover state that is wider than the unhovered is quite simple.
If there something about the bg image that is special?
i don
t have any code because i dont really know where to start from... ive seen it on a website long time ago but i cant remember where...thats bad... on the bg image i`m thinking about some sound waves that goes along the extended imageFair enough....http://codepen.io/Paulie-D/pen/ntHGI
super nice, thank you very mutch! i
m trying to aling text verticaly now(meaning on a 90 degree angle) and im stuck again any refferences on that? :)Here's a fork of @Paulie_D's pen with the text rotated http://codepen.io/ChrisPlz/pen/ivCAk
thanks chris! 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
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
thanks a lot dude! here`s my final results : http://codepen.io/ChrisPlz/pen/ivCAk
@klaudele, that's still my pen, you have to save and it will give you a new URL
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...
http://codepen.io/anon/pen/cIxhg this is the saved link
You will have to remember that the Codepen hasn't included any prefixes for browser differences on the transition. You will have to do that yourself.
Also, Codepen has included a browser reset CSS so you will have to include one too.
ok, 1. i`m searching for prefixes for browser differences now and 2. whats a browser reset css?
Try Googling it.
Of course, many of us prefer using [Normalize.css](http://necolas.github.com/normalize.css/ ")