Now we just need to add the script that will animate our simple navigation menu.
Add the following code within the anonymous function at the bottom of the
<body>
:var ul = $("nav ul"); ul.removeClass("purecss"); ul.find("a").each(function(){ var a = $(this); a.append("<span>" + a.text() + "</span>"); }); ul.find("a").hover(function() { $(this).find("span").fadeIn("slow"); }, function() { $(this).find("span").hide(); });
The first thing we did was cache a reference to the <ul>
located inside our <nav>
element. We'll be referencing it several times so it is more efficient to only select it from the DOM a single time. For performance reasons, it is generally best to minimize the number of DOM operations that are carried out.
We then remove the purecss
class from the element so that our standard CSS hover states are no longer effective. We use JavaScript to do this so the basic hovers still work...