Forums

  • # February 5, 2013 at 1:57 am

    Okay, so to outline the situation:

    * I have a banner element near the top of the page

    * The banner element has a menu sitting directly above it

    * The active navigation item is indicated by giving it a background colour matching that of the banner

    * The banner has a repeating background patter

    * I would like the active navigation item to seamlessly continue the background pattern, no matter which item is active

    * It needs to work in IE7

    Here is a mockup:

    Also, here is a jsFiddle with the markup for you to experiment with: http://jsfiddle.net/joshnh/CpMbb/

    I’d really like to do this with CSS only as it’s just a styling issue, but I also need to keep it dynamic (it must work in a responsive environment).

    Any suggestions would be greatly appreciated. Thanks in advance!

    UPDATE:

    Keith Chu suggested that I have the banner extend under the navigation (https://twitter.com/Catharsis/status/298688479246835712) like so: http://jsfiddle.net/CpMbb/1/

    The only problem with that solution is that it introduces an issue in regards to the background showing through on the right hand side of the navigation.

    UPDATE 2:

    After talking a little more with Keith, we’ve managed to come up with what seems to be a working solution (and by we, I mean Keith, I only changed one line of his proposal): http://jsfiddle.net/joshnh/UazCp/

    Basically, the background colour and pattern has been placed on the unordered list, and the list items are given a white background. That background is then removed when given a class of active.

    What are your thoughts? Any problems with this approach? Any ways to improve it?

    # February 5, 2013 at 2:47 am

    You could do it like this:

    http://codepen.io/chriscoyier/pen/DFdJi

    # February 5, 2013 at 2:54 am

    If you want an easy, cross-browser, responsive solution, I think @chriscoyier‘s one is really good. Just be sure to add a fallback to :not() if not supported.

    # February 5, 2013 at 2:59 am

    That sounds great Joshua. Especially since background-color: transparent is a CSS1 specification (if no mistake).

    # February 5, 2013 at 3:03 am

    You don’t really need :not() – you could just adjust JS to add both .active and .inactive classes and style based on that. And use an actual table. (nobody will die).

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag