Home › Forums › JavaScript › Re-creating a navigation. How to disable an animation when another class is added. › Re: Re-creating a navigation. How to disable an animation when another class is added.
XordanI 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+
Hope you enjoy !