These “sliding” style navigation bars have been around a while, I just thought I’d take a crack at doing it myself as the opportunity came up recently. Turns out it’s really pretty darn easy. I put two examples together for it.

The Idea

The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it’s animation abilities. As such, the “magic line” will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

HTML

Typical list here…. It has the “group” class because it’s going to be a horizontal row and will need the clearfix so it has height. The ID is for the JavaScript to target it.

<div class="nav-wrap">
 <ul class="group" id="example-one">
    <li class="current_page_item"><a href="#">Home</a></li>
    <li><a href="#">Buy Tickets</a></li>
    <li><a href="#">Group Sales</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">The Show</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Magic Shop</a></li>
 </ul>
</div>

Notice the .nav-wrap div around it. That is used because of the styling, the bars go full width of the screen the but the navigation is centered within. This centering brings up an issue when we start the JavaScript.

CSS

Do the ol’ inline list elements with floated left anchors to get the list horizontal and avoid stairstepping. The magic line is absolutely positioned under the bar, so that it doesn’t cause jitter (mouse over a link, animates over, mouse is now on magic line not the link, animates back, etc.) Everything else is purely stylistic.

.nav-wrap { margin: 50px auto;  background-color: rgba(0,0,0,0.6); border-top: 2px solid white; border-bottom: 2px solid white; }
#example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; }
#example-one li { display: inline; }
#example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
#example-one li a:hover { color: white; }
#magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; }

jQuery JavaScript

1. When DOM is ready…
2. Set up variables including current left offset of the navigation
3. Set up resize function on the window to reset that offset should it change (because of the centering)
4. Append the magic line to the nav
5. Set up position and width of the magic line for the current page item
6. Also set the original width and position as data, so it can be used to animate back to
7. On hover, calculate the new width and new left position and animate to it
8. On the hover callback (mouse out), animate back to original

$(function(){
    var $el, leftPos, newWidth,
        $mainNav = $("#example-one"),
        pageOffset = $mainNav.offset().left;

    // Fixing the offset if the window changes size
    $(window).resize(function() {
        pageOffset = $mainNav.offset().left;
    });

    $mainNav.append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");

    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").offset().left - pageOffset)
        .data("origLeft", $magicLine.offset().left - pageOffset)
        .data("origWidth", $magicLine.width());

    $("#example-one li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.offset().left - pageOffset;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    });
});

Issues

Opera is weird about it. It makes the original width of the magic line the full width of the nav bar and shortens it from the right on hovers. I haven’t been able to figure it out. If you do, awesome, let me know I’ll update this article and demos.

Alternate Version

Check out the demo link below for an alternate version that uses a background instead of a line, and animates color as well as position and width. Basically the same, except the CSS is slightly different and the JavaScript pulls the color of the new list item from a rel attribute in the HTML.

Color animations in jQuery require the color plugin. I was just moaning about how it doesn’t work with RGBa color, and someone sent me a patch that does, which is included in the download. I’m really sorry, but I can’t remember their name! Speak up if it was you and I’ll update this and credit the patch to you.

All Yours

As always, feel free to do whatever you want with it. Preferably, use it in corporate projects and earn wheelbarrows of cash.

View Demo   Download Files

ul li:nth-child(3n+3) {
  color: #ccc;
}

What the above CSS does, is select every third list item inside unordered lists. That is, the 3rd, 6th, 9th, 12th, etc. But how does that work? And what other kinds of things can you do with nth-child? Let’s take a look.

It boils down to what is in between those parentheses. nth-child accepts two keywords in that spot: even and odd. Those should be pretty obvious. “Even” selects even numbered elements, like the 2nd, 4th, 6th, etc. “Odd” selects odd numbered elements, like 1st, 3rd, 5th, etc.

As seen in the first example, nth-child also accepts equations in between those parentheses. The simplest possible equation? Just a number. If you put simply a number in the parentheses, it will match only that number element. For example, here is how to select only the 5th element:

ul li:nth-child(5) {
  color: #ccc;
}

Let’s get back to the “3n+3″ from the original example though. How does that work? Why does it select every third element? The trick is understanding the “n” and algebraic equation that represents. Think of “n” as starting at zero and then a set of all positive integers. Then complete the equation. So the 3n is “3xn”, and the whole equation together is “(3xn)+3″. Now substituting in the zero and positive integers, we get:

(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
etc.

How about the :nth-child(2n+1)?

(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element
etc.

Hey wait! That’s the same as “odd”, so probably don’t need to use that one very often. But wait now. Haven’t we exposed our original example as being overly complicated? What if instead of “3n+3″, we used “3n+0″, or even simpler “3n”.

(3 x 0) = 0 = no match
(3 x 1) = 3 = 3rd Element
(3 x 2) = 6 = 6th Element
(3 x 3) = 9 = 9th Element
etc.

So as you can see, the matches are exactly the same, no need for the “+3″. We can use negative n values, as well as use subtraction in the equations. For example, 4n-1:

(4 x 0) – 1 = -1 = no match
(4 x 1) – 1 = 3 = 3rd Element
(4 x 2) – 1 = 7 = 7th Element
etc.

Using “-n” values seems a little weird, because if the end result is negative there is no match, so you’ll need to add to the equation to get it back positive again. As it turns out, this is a rather clever technique. You can use it to select the “first n elements” with “-n+3″:

-0 + 3 = 3 = 3rd Element
-1 + 3 = 2 = 2nd Element
-2 + 3 = 1 = 1st Element
-3 + 3 = 0 = no match
etc.

Sitepoint has a nice reference guide, which includes this handy-dandy table which I’ll shamelessly republish here:

Browser Compatibility

nth-child is one of those rather unfortunate CSS attributes that is caught between nearly full cross-browser compatibility, except for completely zero support in IE, even IE 8. So when it comes to it’s use, if the end result is “progressive enhancement” in some fashion (e.g. applying a cool color palette to table rows, for example), then by all means, go for it. But you probably shouldn’t use it if you are doing something more important, like relying on it for site structure. For example, removing the right margin from every third box in a three by three grid of boxes, so they will fit properly.

One saving grace here is that if you are using jQuery, which supports all CSS selector including :nth-child, the selector will work, even in Internet Explorer.

Still not getting it?

I’m not a big fan of the phrase “I’m a visual learner”. Of course you are, everybody is. Visual aids are enormously helpful in situations just like this. To help, I put together a little nth-child tester page. There, you can type in equations and see the results of what it selects below.

First, have you guys heard of Threadsy? I hadn’t, but apparently they got 2nd place at TechCrunch 50, which is pretty great. It’s a web application that combines several of your online “input streams” (e.g. Email, Twitter, and Facebook). I think that’s actually all they do right now, which I find kind of awesome, because those are the only ones I use anyway.

I have 500 invites to give away for it. First come first serve as I understand it. Just click this to sign up.

I really quite like it. The Threadsy team has done a killer job in creating an interface to combine these things that is totally usable and nice. No small chore when trying to pack so much functionality into basically one screen. I’ve been using it off and on. I haven’t been able to 100% switch just because old habits are hard to break and I love my Gmail/Tweetie combo so much already.

Second, there are a ton of ways you can help out the bad situation in Haiti. I’m sure many of you have already. I’ve done a few different things and plan to do a few more. As designers, there is a really cool new one: The Haiti Poster Project.

You design and print 11″x17″ posters (yes, you have to print your own, that is part of your contribution). The posters are collected and sold. The goal is to raise $1,000,000 for Doctors Without Borders. I think this is a great idea, especially how it’s not a “contest” where you could do all the work and then be rejected and not even be sure you did any good. Everyone wins here.

I’ve been mulling the idea of going with a link style in which a link’s underline “slides-up” to become a background highlight on hover.

I started mulling over a few ideas on how to do this myself. Ultimately, I tried two different things but neither one of them is absolutely perfect.

Take One

We know we’re going to be using jQuery here (or some JavaScript library), because of the animation. My first though was to set relative positioning on the links, then use jQuery to append empty <span>’s to each link. The span would be 1px tall (like an underline), be absolutely positioned 1 pixel down from the bottom, and have a width of 100% (as long as the link). Then on hover, you would animate the height of the span to the line-height.

$(function() {

    var $el = $(),
        linkHeight = parseInt($("p").css("line-height")),
        speed = 175;  //  1000 = 1 second

    $("#first a").each(function() {

        $el = $(this);

        // If the link spans two lines, put a line break before it.
        if ($el.height() > linkHeight) {
            $el.before("<br />");
        }

        $el.prepend("<span></span>");

    }).hover(function() {

        $el = $(this);

        $el.find("span").stop().animate({ height: linkHeight, opacity: 0.3 }, speed);

    }, function() {

        $el = $(this);

        $el.find("span").stop().animate({ height: "1px", opacity: 1 }, speed);

    });

});

As it turns out, this kinda works, but it’s littered with little weird problems and cross browser inconsistencies. For example, what if a link breaks into two lines? The span certainly wouldn’t work in that case. So I tried to fix it by first measuring the height of the link and if that was higher than the line-height (like it would be if it’s two lines), then insert a break before it, so it’s all on one line. Works, but it can create some weirdly ragged paragraphs.

Other more major problems: no version of IE will animate the span up properly. The span will always sit on top of the text, so it needs to be have opacity for the text to be readable. I tried wrapping the text in an <em> and fighting it with z-index, but no dice. And even in Firefox, a link that begins a new line, for whatever reason, doesn’t want to work.

So, Take One is a flop…

Take Two

The biggest problem it seemed to me with Take One was the multi-line links. In trying to think of a way to solve that, it seemed like using the actual background property of the link would be the best way to go.

In this take, I created a big block of red color as an image. I set that as the background to the link, but pushed it down using background positioning. I set the overflow on the links to hidden, and pushed down that background just far enough that only a sliver showed through. Then on hover, the background position is animated to pull it back up underneath the entire link.

$(function() {

    var $el = $(),
        speed = 175;  //  1000 = 1 second

    // SECOND TECHNIQUE
    $("#second a").hover(function() {

        $el = $(this);

        $el.stop().animate({ backgroundPosition: "(0px 0px)", color: "white" }, speed);

    }, function() {

        $el = $(this);

        $el.stop().animate({ backgroundPosition: "(0px 15px)", color: "#900" }, speed);

    });

});

One of the concerns with this technique is how different browsers handle line-height. If I set up the underline to be 1px tall in Firefox, many browsers (e.g. WebKit) show no underline at all, as apparently the line-height is one less pixel tall and thus the entire background image is hidden. As such, I made it 2px tall in Firefox, and then WebKit showed it as 1px. Inconsistant, but it works.

This would be a “perfect” solution, except IE 7 cludges links that are multi-line or the begin a new line, covering the entire link in background from the start. IE 8 gets it right.

So in the end, neither one of these is totally perfect. If you have an alternate solution to this “underline animates up to be a background on hover”, let me know.

You can see the demos here.

UPDATE

As suggested by a few people, I added a Technique #3, which is an adaptation of #2. The links now have bottom borders of 1px (border color and background color match), and the background slides up from a greater distance away, which should solve the IE 7 issue.

View Demo   Download Files

Note

It’s PHP. So if you download it to check it out, throw it up on your web server to test it out (or somewhere you run PHP locally).

Navigation

The navigation is all AJAX’d up using the jQuery .load() functionality. I just think it’s kinda fun. It supports “deep linking”, so if you were to link to this page with a hash-tag of a page (e.g. /DocTemplate/#parameters.php) , it will see that and load that page up.

If you were to use this template to document some kind of JavaScript thingy, it should be noted that when content is loaded in this way the JavaScript on that page won’t be “active”.

If you don’t like or can’t use the AJAX navigation, simply remove the two JavaScript <script> links in the file common/doctype-and-head.php. It will fall back to simply reloading the page to go to those pages, with current navigation highlighting fully intact.

And…

The index.php file has all the different text style stuff available. Not much, but just the typical hierarchy of header tags, code styling, emphasis/strong tags, links, callout class, etc.

There is a good bit of CSS3 stuff going on from rounded corners to drop shadows to :hover:after with generated content. It should degrade just fine though.

As with anything else on this site, feel free to use it for whatever you’d like, no attribution of any kind required.

As you might imagine, it’s incredible simple. Let’s take a look.

Because we are wishing to achieve this “bump down” affect on all links and links are inline elements, margin-top won’t work. We don’t want to use padding either, because that would change the size of the box itself which might leading to shifting other elements around it as well which is undesirable. The perfect fit is position: relative, which allows us to bump around elements from their original static positioning.

a:active {
  position: relative;
  top: 1px;
}

On this site, this is a zoom-in look of the one-pixel down shift:

Subtle, but it moves.

Concerns

On this site I use it just like the code above, meaning it affects every link on the site. Some people have said it feels like overkill. Personally I like it and like the consistency, but if you are in the overkill camp (but still like it), use more specific selectors on the anchor element to use in more specific areas of your site.

More importantly, setting a different positioning value for the active state of a link is something you need to be very careful about. If you have any links on your site that are absolutely positioned, having the active state change to relative position will (probably) make them go flying away and render them unclickable. You can fix this on a case-by-case basis by making the active state of those links retain absolute positioning, and even make their top value one higher (or bottom value one lower).

Milestones

Snippets Launched

The biggest addition to this site in 2009 was the snippets area. It has been a popular resource which makes me happy since that’s the reason this site is around. It’s been slowing down a little, but I’m not too worried about that. You are welcome to contribute snippets of course, to help keep that area bigger and better.

Born and Died

2009 saw the death of “Status”, a project between me and Richard Felix Jr. But also saw the birth of Are My Sites Up? (kinda wild that’s only been one year since AMSU went up). Are My Sites Up was based on yearly pricing, so we are seeing the first round of people renewing their service right now, which is awesome.

Digging Into WordPress

I wrote a book this year with co-author Jeff Starr. As awesome as that was, I consider the blog that goes with it an equal accomplishment. I think I just love blogging.

Speaking

2009 was the first year I spoke at any events. The first being the Front End Design Conference in 2009. Between then and now, I’ve spoken at a number of other cool events. I hope to do some more of that in 2010. I’ll be at the CMS Expo in May, but other than that nothing else lined up.

Design

There were two biggish redesigns in 2009. One in September and one in December. Kind of strangely close together. At the time of this writing I’m calling it v6, and for the record, I rather like it. Probably won’t last long, but even when I do redesign, as you all know, it’s mostly just refinements and alignments rather than crazy huge overhauls. For example, the sidebar has been on the right since day one.

Writing Style

In the last few months I’ve been writing more editorial style posts. I plan to continue doing that as I enjoy it and I enjoy the conversion that is a result of it. I don’t plan to have it take over the site though. I plan to do tutorials and tips/tricks as well.

Chicago

Around the 4th of July I moved from Portland to Chicago. I like Portland the city (and the entire surrounding state) better, but I like Chicago as well and enjoy being closer to home and the Badgers.

Work

I was and still am a full time designer at Chatman Design. We’ve done some pretty fun and successful projects for local clients. We’ve also see some sites deteriorate and one thing we are working on right now is taking one of those and rehauling it. I’m excited to see that launch, if and when we can convince the client that they need it.

Statistics

• The highest-ever RSS feed subscriber count was 39,690.
• There have been 549 posts published, which makes 280 of them this year alone, and probably more than that since I’ve removed some old useless ones.
• 3,105 people have used the CSS-Tricks contact form, which makes 1,885 of them this year. Last year I said I responded to 90%, I’m thinking that’s closer to 75% this year. I really try, but I can’t do individual troubleshooting for the most part anymore.
• I’m up to screencast #79, with #80 and #81 already thought up in my head. That makes only 31 this year, less prolific than last year. I still love doing them but they are the least return on investment thing that I do with my time.
• I spoke at 7 events.
• There are 4,786 members of the forums who have posted 22,183 messages. This has about quadrupled since last year, although the forums see about 1/10 the traffic of the rest of the site. Huge shout out to all the forums guys who help keep that place so ridiculously helpful.
• Search engines provide 39% of traffic, 38% from referring sites, and 21% direct. I think that’s a solid mix.
• The most popular single article of the year was the Auto-Playing Featured Content Slider, responsible for 241,333 pageviews and 1.65% of total traffic.
• The single highest traffic day was August 24th, with 94,037 pageviews from the Moving Boxes post. Apparently, people like slidy JavaScript things.

To Come

Free Stuff, Soon

As part of all this thank you business, I have a plan to give away a whole bunch of books I have amassed and could use a better home. I’m still reigning in all the details. But it’s going to be fun, trust me.

Who Knows!

Again this year, it’s really hard to say what the future holds for 2010. I have less definite plans this year than I did last year, partially on purpose since I always have so much stuff on my plate I don’t like making major plans on top of it all. I am genuinely excited to live through it though.

Most of all, thank you to everyone who visits this site on a regular basis and participates in the community here. The year of 2009 was the first that this site solidified it’s place as not only something I do for fun but also as a part of my life and career. That’s only possible because of people like you.

Partly tongue-in-cheek of course… but not entirely. The list of things a modern web designer should know is long, and each skill feels like it could be a lifetime in itself. Good luck learning that in a 2 or 4 year program (not that that isn’t a good start).

Then Jeffrey Veen chimed in:

Now it’s screen rendering. Next, it will be the performance implications of downloading fonts with international character sets. After that? Maybe inconsistent browser support of kerning metrics, ligatures, or other Open Type Metrics.

It’s going to be a long road.

Kinda puts thing in perspective doesn’t it?

In the long long ago, we used <font> tags. Then there was CSS, but we still only had the “core” web fonts. People were fed up and technologies like sIFR emerged. Now @font-face is really getting legs, but there are legal implications. So services like TypeKit emerge to help. But now font hinting creeps in and we get unhappy again. Then after that is solved, as Mr. Veen points out, there will be a long line of new things to be unhappy about. I can think of a few myself, for example, since fonts are vector, why can’t we apply strokes to them on the web?

I think we’re all going to need to be critical and help push things forward, but remain glass-half-full at the progress that has been made.

The area I redesigned is just a part of the overall page, so don’t be distracted by the fact that there isn’t overall admin navigation and what-have-you.

Before

Click to see full-size

Problems:

• White space used ineffectively
• Tabs feel cramped
• Ordering of fields doesn’t make sense (e.g. Why is “Meta Description” and 5 other fields in between the product title and the price, the two most important fields)
• Page length is too long, why not break images into a separate tab
• Promotions and discounts tabs could be combined
• Next/Previous navigation at bottom of page is useless
• Reset form button is useless
• Shouldn’t have to scroll to save
• Meta keywords are useless

After

Click to see full size

Improvements

• Tabs replaced by larger clickable links on top row
• Next/Previous navigation at top right corner. This way you can click-click-click and the link will always be in the same place.
• Fields grouped more logically
• Page length shortened by removing some things, and moving things around. At the same time the entry fields are actually much larger.
• Two save buttons present, so you never have to scroll to save, and is named “Save all changes” which should help with confusion over what the button actually saves (it saves everything not just the top or bottom half). The button also provides a break line to separate the basics from the deeper more specific stuff.
• Buttons for HTML tags in description area

This just feels better to me, but you don’t have to agree with me. If you have ideas for improvements or comments about where I went wrong, let me have it. I’ll also provide the PSD in case you want to shuffle things around yourself.