Grow your CSS skills. Land your dream job.

Nav bar ribbons – what is the best option?

  • # December 12, 2011 at 1:17 pm

    I have a pretty standard horizontal nav bar with drop down menus running across the page. I was thinking of adding a ribbon effect to the left side but am questioning what would be the most efficient code.

    Should I make make a ribbon as an add on to the nav bar already in place, using this source (see nub on far right)?

    Or should I just recreate the whole nav as a ribbon, like this?

    It seems to me that the second option is more efficient. The only issue I have is I can’t adjust the css to get rid of a tiny triangle that appears as residue. See the jfiddle: http://jsfiddle.net/tobeeornot/4QBfM/

    # December 12, 2011 at 1:26 pm

    That generator is awesome!

    You can get rid of the little triangle by taking way the .ribbon-content:after http://jsfiddle.net/4QBfM/1/

    # December 12, 2011 at 1:32 pm

    @TheDoc

    Many thanks. But what option is better do you think?

    # December 12, 2011 at 2:12 pm

    I think they are both pretty similar. I’d go with whichever one is easier to implement.

    # December 12, 2011 at 2:13 pm

    Ok, cool!

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

You must be logged in to reply to this topic.

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