Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript need help creating a navigation menu that extends horizontal on mose hover

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #42845
    klaudele
    Member

    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

    #125229
    Paulie_D
    Member

    What 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?

    #125253
    klaudele
    Member

    i 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 image

    #125280
    Paulie_D
    Member
    #125292
    klaudele
    Member

    super 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? :)

    #125297
    klaudele
    Member

    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

    #125303
    klaudele
    Member

    thanks a lot dude!
    here`s my final results : http://codepen.io/ChrisPlz/pen/ivCAk

    #125326
    klaudele
    Member

    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…

    #125328
    klaudele
    Member

    http://codepen.io/anon/pen/cIxhg this is the saved link

    #125359
    Paulie_D
    Member

    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.

    #125430
    klaudele
    Member

    ok,
    1. i`m searching for prefixes for browser differences now
    and 2. whats a browser reset css?

    #125433
    Paulie_D
    Member

    Try Googling it.

    Of course, many of us prefer using [Normalize.css](http://necolas.github.com/normalize.css/ “)

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.