HTML and CSS Reference
Finally, we added a click event listener to the items in the bottom navigation. Similar to the
arrow navigation, we start by disabling the automatic animation, setting activeSlideshow to
false . Next, we trigger changeSlide() , passing in the index of whichever slide was clicked,
which is easy to determine using jQuery's index() method.
Now the slideshow navigation animation is complete and ready to impress your visitors.
5. Animated Icons
CSS-Tricks has a simple but elegant effect in its footer when the user mouses over various
buttons. Besides the color changing and an icon being added, the effect is animated in
browsers that support transition, making the icon appear to slide into place .
Let's create a similar effect, starting with some mark-up:
< a href =" # " class =" hover-panel ">
< h3 > Panel Title </ h3 >
< p > Additional information about the panel goes in a paragraph here </ p >
</ a >
One thing to note about this mark-up is that it has block elements nested in an <a> element,
which makes sense semantically, but it's valid only if you're using the HTML5 doc type.