Grow your CSS skills. Land your dream job.

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

  • # February 19, 2013 at 11:16 am

    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

    # February 19, 2013 at 11:34 am

    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?

    # February 19, 2013 at 12:27 pm

    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

    # February 19, 2013 at 1:53 pm

    Fair enough….http://codepen.io/Paulie-D/pen/ntHGI

    # February 19, 2013 at 3:18 pm

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

    # February 19, 2013 at 3:25 pm

    Here’s a fork of @Paulie_D‘s pen with the text rotated http://codepen.io/ChrisPlz/pen/ivCAk

    # February 19, 2013 at 3:38 pm

    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

    # February 19, 2013 at 3:49 pm

    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

    # February 19, 2013 at 4:07 pm

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

    # February 19, 2013 at 4:08 pm

    @klaudele, that’s still my pen, you have to save and it will give you a new URL

    # February 19, 2013 at 5:40 pm

    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…

    # February 19, 2013 at 5:53 pm

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

    # February 20, 2013 at 1:20 am

    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.

    # February 20, 2013 at 2:12 pm

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

    # February 20, 2013 at 2:25 pm

    Try Googling it.

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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".