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

[Attila Hajzer]

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.

[Xordan]

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:

Slideup Boxes

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

• Home
• About
• Contact

Hope you enjoy !

[rodolpheb]

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

[Xordan]

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.

[Xordan]

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.

Slideup Boxes

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

• Home
• About
• Contact

Enjoy it !

[Author]

Posts