How to Add a Selected Class to a Sub-menu

I haven't created any blog-worthy code contributions in Rails yet (hopefully soon), but I have something that I think is pretty cool to help people who have multi-level, navigation menu user interfaces...say that tens time fast. It's common UX practice to inform the user what page they are on through some sort of visual mechanism - i.e. you're on the 'Contact Us' page and the 'Contact Us' link is underlined or styled in a way that differentiates itself from other navigational items. This is simple to accomplish in Rails. You can set a variable in your controller and pass it down to your view to discern the current page. Then it's as simple as attaching a {:class => selected_class} on your anchor tag where selected_class is the variable set in your controller. Simple enough. What about when you have sub-menus that contain individual links there as well? Well, you can keep passing down the current page from your controller to your view, but at a certain point your navigation menu code becomes scattered with duplicative logic. I believe I've found a simple solution to this.

The first image is part of our in-house metrics navigation menu. The second image is an expanded view of the sub-menu that lies within each top-level menu item. Each top-level menu item has its own controller, which passes down the variable selected_class to layout view, where the navigation lives. I do a simple check above each top-level menu item to determine which controller I'm currently working with.
It looks like this:

The class 'active' is a style set in the CSS to differentiate your top-level item from the others. Now to set an additional style to whichever sub-menu item is currently also selected (as shown with the green background of 'Avg Star'), I wrote a simple jQuery function to scrape the current page's URL and check it against all the sub-menu anchor tags and their href attribute values. Once it finds the sub-menu item with the same href value as the current URL, I add a class onto the element.
The code looks like this:

There are three blocks of code that run on DOM ready. The first is a .click() handler that reveals the sub-menu hiding below each top-level navigation item. The second is a command that does what the first handler does for the currently selected top-level navigation item (that was set by selected_class). The last finds the currently selected top-level item and looks through it's sub-menu to place the additional .active class for the specific page we're on.
For some context, here is what the source HAML code looks like:

Hopefully that was straightforward enough to understand. I know it's pretty dry, but maybe you can think of another use for the code or be inspired to create something better. If you have questions or can think of a more efficient way, shoot me an email (

Also, if you're a Ruby on Rails developer or an ambitious programmer looking to learn Rails, check out our jobs page or drop us a note at I've been working here for a little over 3 months now and I can honestly say that the grass over here is at green as it looks.

Front-End Developer and Ruby on Rails Newbie

On the Cusp: Where Web Design/UI is Headed

by Dan DeMeyere - @dandemeyere

Front-End development has seen some very interesting trends lately. Designers are pushing the boundaries of the experience a website can deliver with the look and feel. Better yet, the best are being done without Flash and utilizing CSS3 (and soon HTML5) - which translates into cross browser/device compatibility. For some specificity, here is what I am seeing:

Emotional Graphical Design

White/negative space has been a very useful tool for designers to avoid clutter and gaudy colors/graphics. It was also easier for developers to create considering in the past Front-End engineers would work with designers to create the user-facing portion of a website. This is where I think there is a dynamic shift occurring that is leading to an emotional push in design. I'm seeing a lot more graphic designers who are capable of using CSS/HTML/jQuery to create a website that is pixel perfect to the design they created. Why I think this is important is because what appears in Photoshop and what shows up inside a browser are different in appearance and how you experience them. The scrolling, re-sizing of the browser window and other subtle things like hover and active states for buttons can be lost in translation between mock-up and implementation. Some developers don't have an eye for this level of detail so if it wasn't in the mock-up, improvisation probably occurs and rest assured the developer will be choosing the path of least resistance for completion, which typically means the design suffers. All the examples I have listed below contain a certain personal feel to them (cozy colors, custom font, etc.) and a lot of the design is made possible through text-shadows, jQuery DOM manipulation, and other enhancements such as custom font APIs. Have a look for yourself:

  • Example 1 - Personal portfolio of designer/developer
  • Example 2 - Custom search field and layered design
  • Example 3 - Embossed effect (most likely created with CSS text/box shadow)

Designing Software-like User Interfaces

UI design is progressing to a uniform experience across all platforms. It's not uncommon to see a website's UI in a browser that would be identical on an iPhone as its own app or an Adobe AIR desktop app.

  • Example 1 - try to tell me if this snapshot was taken from a website, a mobile app, or software app?

Consistent user experience is essential for brand recognition and ubiquitous usability. Allowing users to be proficient in navigating and using the functionality of your website on any device is very important so I wouldn't be surprised if start-ups begin designing their website, iPhone/iPad, and other device apps right from beginning.

Homepage Design

Recent developments in A/B testing have resulted in a higher statistical knowledge of important metrics about your website (heat maps, click-throughs, conversion rates) and in result companies are serving up multiple versions of the homepage and letting the numbers decide the best layout, color combination, and copy. The trend I'm seeing is a consistent formula - main content area below the header that stretches the entire width of the layout, then equal size blocks (less tall) below that contain important sub-components of a website to learn more about the product. Call to action on top with 1 sentence pitch, then supporting items below. The navigation bars are being hidden or reduced to appeal as a more simple site to avoid overwhelming the user. Essentially, homepages are becoming marketing landing pages. Even our new homepage uses this layout to some extent.

  • Example 1 - A visual representation of what I'm talking about.

Finally, another interesting link I wanted to share. This trend is in its infancy, but I believe the next iteration we'll see is designers/developers creating new ways of displays form data. Horizontal signup forms, smarter validation with jQuery, and other usability enhancements.

Snapshots courtesy of

Front-End Developer and Ruby on Rails Newbie