Music to Code To
Slash PNG Sizes
I Have The Best Students EverRecently I demonstrated a simple “animated tabs” site navigation bar in CSS3. While the styles work well, there was an issue with the tab that represented the current, active page. In the code I provided in the article, it was necessary to apply a particular style for the current page tab to the appropriate link in the markup. The markup was:
- <ul role="navigation">
- <li><a href="#">Home</a></li>
- <li><a href="#">About Us</a></li>
- <li><a href="#">Products</a></li>
- <li><a href="#">Contact</a></li>
- <li><a href="#">Your Privacy</a></li>
- </ul>
While the CSS for the id was:
- ul[role=navigation] li a#forefront {
- position: relative; top: -0.2rem; z-index: 2;
- }
This is fine in principle, but the approach means that when we make a new page, we cannot simply copy and paste the navigation bar code; we must alter the application of the id to the tab that represents the new page, which also means that we cannot use the navigation as part of a server-side include.
In a previous article I have discussed a way of getting around this issue by using PHP. The advantage of a server-side method is that it always works, but at the cost of a small hit to server performance. If you could guarantee that the majority of visitors had JavaScript enabled on their browsers, you could use a client-side solution instead; here, I’ll use jQuery to keep the code concise.
After eliminating any reference to the id in our navigation bar markup (since what we are about to do will be generated solely by JQuery) you would need to add the following into the <head> of each page; ultimately, of course, this could be made part of an include also:
- <script src="http://code.jquery.com/jquery.min.js"></script>
- <script>
- $(document).ready(function(){
- $('ul[role="navigation"] a').each(function() {
- if (this.href === window.location.href)
- { $(this). attr('id', 'forefront');}
- });
- })
- </script>
This script is compact and efficient: it only loops through links found in an unordered list with the ARIA role of navigation on the page (note that selecting this in JQuery is exactly the same as the equivalent CSS attribute selector). Obviously the example at the top of this article is simply there for show, as this blog lacks a products page.
so we don't need the jQuery minimum length anymore:) cool!
