Grow your CSS skills. Land your dream job.

Re-creating a navigation. How to disable an animation when another class is added.

  • # May 10, 2013 at 2:01 am

    I’m doing my best and trying to re-create this navigation: http://www.scoopweb.com/Debridement

    without stealing the code.

    So far I’ve got this : http://jsfiddle.net/attilahajzer/6Sxak/5/

    I’ve gotten to a comfortable medium. but can’t seem to figure out how to disable the animation on the active class of a navigation item.

    # May 10, 2013 at 11:33 pm

    I take a look on both solutions. There is one thing I really don’t like in both of it. You take the same approach by duplication the caption of you menu in a span to slide up and down. But this mean, a screen reader will also read it twice, even a web crawler like Google. I think the final effect is cool and sample so I start from your code and clean up a bit of CSS and change the approach. I decide to use an attribute “data-caption” to store the label of the menu and remove all spans inside the anchor. I use the pseudo class :after to build the blue block to replace the span.two. No need of any span anymore. So I move the anchor top from 0 to -100% inside the list element to show the anchor or the :after block element on :hover and .active class. Here’s my result:

    < !DOCTYPE html>


    Slideup Boxes

    This is using CSS3 transitions and transforms, so browser compatibility should be something like: Safari 3+, Firefox 4+, Opera 10+, Chrome Whatever+


    Hope you enjoy !

    # May 11, 2013 at 2:03 am

    That was fantastic thank you so much! i didn’t know css had a attr(data-caption) feature. howcome i’ve never come across it with css learning tool sites? (or is it maybe an HTML5 feature?) I truly appreciate your help and will keep this in mind!

    # May 11, 2013 at 5:12 am

    Hi, after that you’ll need a tiny javascript script to highlight the current page.

    # May 13, 2013 at 2:33 pm

    I attilahajzer, you can put about any custom attribute on HTML element. But data-* are valid attributes for HTML5 and is a standard use with jQuery. For :after and :before pseudo class you can use any attribute on your element to output data in content rule. For example, you can output href of any anchor with content: attr(href). Hope you like this solution and it fit your needs and answer your request properly. For the active menu, just put the class “active” on your backend on the right element. No need of any javascript for this.

    # May 18, 2013 at 1:25 am

    How do i add the bottom triangle on the .active :after?

    I know that we need the Content:””; then to position it. but relative? and would that be relative to the parent ? (so the li? or the a?) then the triangle.

    http://jsfiddle.net/attilahajzer/6Sxak/10/

    # May 22, 2013 at 9:21 am

    The :after is allready use to replace the second span and display the blue box when the menu slideup. You can use the :before pseudoclass to add it. and you can make a triangle pointer with borders. I update my code to add a border on top of the nav and the triangle to the active menu. Search for “Change:” in my code to see what I change and undertand the change you have to do in your code to make it work.

    < !DOCTYPE html>


    Slideup Boxes

    This is using CSS3 transitions and transforms, so browser compatibility should be something like: Safari 3+, Firefox 4+, Opera 10+, Chrome Whatever+


    Enjoy it !

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

You must be logged in to reply to this topic.

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