Home › Forums › JavaScript › need help creating a navigation menu that extends horizontal on mose hover
- This topic is empty.
-
AuthorPosts
-
February 19, 2013 at 11:16 am #42845klaudeleMember
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 buttonFebruary 19, 2013 at 11:34 am #125229Paulie_DMemberWhat 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?
February 19, 2013 at 12:27 pm #125253klaudeleMemberi don`t have any code because i don`t really know where to start from…
i`ve seen it on a website long time ago but i can`t remember where…thats bad…
on the bg image i`m thinking about some sound waves that goes along the extended imageFebruary 19, 2013 at 1:53 pm #125280Paulie_DMemberFair enough….http://codepen.io/Paulie-D/pen/ntHGI
February 19, 2013 at 3:18 pm #125292klaudeleMembersuper nice, thank you very mutch!
i`m trying to aling text verticaly now(meaning on a 90 degree angle) and i`m stuck again
any refferences on that? :)February 19, 2013 at 3:38 pm #125297klaudeleMemberthanks 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 sideFebruary 19, 2013 at 4:07 pm #125303klaudeleMemberthanks a lot dude!
here`s my final results : http://codepen.io/ChrisPlz/pen/ivCAkFebruary 19, 2013 at 5:40 pm #125326klaudeleMemberdunno 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…February 19, 2013 at 5:53 pm #125328klaudeleMemberhttp://codepen.io/anon/pen/cIxhg this is the saved link
February 20, 2013 at 1:20 am #125359Paulie_DMemberYou 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.
February 20, 2013 at 2:12 pm #125430klaudeleMemberok,
1. i`m searching for prefixes for browser differences now
and 2. whats a browser reset css?February 20, 2013 at 2:25 pm #125433Paulie_DMemberTry Googling it.
Of course, many of us prefer using [Normalize.css](http://necolas.github.com/normalize.css/ “)
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.