Grow your CSS skills. Land your dream job.

Tabbed navigation with CSS transitions

  • # January 14, 2013 at 10:18 pm

    Hello again CSS peeps,

    I’m developing a new website for work, and I have wanted to use CSS transitions on the navigation.

    [Your text to link here...](http://www.petsdomain.com.au/natures_test/Natures-NAV-TEST_transitions.html “”)

    Ideally I want it so that the coloured blocks are divs coloured with css, and the text be real text.

    I couldnt seem to get the blocks to slide down over the text, the rollover wouldn’t trigger at all.

    Here is an example using a sprite of what I’m trying to achieve (ignore the fact that the text obviously scrolls down due to the sprite.)

    [Your text to link here...](http://www.petsdomain.com.au/natures_test/NB-Test_nav.html “Nature’s Best – Test nav”)

    What I want to do is have the coloured block slide down and COVER the text below it.

    Any ideas?

    # January 15, 2013 at 12:09 pm

    Use the adjacent sibling selector to toggle the other div. `#div1:hover + #div2 {
    //what should happen when hover.
    }`
    the div1 is the text. this doesnt have to be a div. and then after the + the div you want to effect.

    http://jsfiddle.net/6BfR6/307/

    # January 15, 2013 at 12:18 pm

    @plaedien, what I do for situations like that is use a linear-gradient, then move the background on hover..

    http://codepen.io/ChrisPlz/pen/cGvkh

    That’s an extremely reduced case…

    # January 15, 2013 at 12:27 pm

    and with diff colors…

    http://codepen.io/ChrisPlz/pen/lBpLv

    I did it this way because of the textured background you’re working with..if you were working with a solid background, I’d say go transparent to background color on the gradient, and change the background colors of the `

  • ` tags, as that would cut down on the css involved.
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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