22

If you’re working on a responsive layout website with navigation that contains too many links to display either horizontally or vertically on smaller screens, you may need to implement a technique where only few links are visible by default and a drop-down is added for the rest of the links.

Once you go through the toughest exercise of deciding which links should be visible at all times, here is a way to execute the design.

HTML

Here is a pretty simple navigation using an unordered list and some anchor tags. Nothing special except an extra <li class=”show-more”> element that will be hidden on wide screens and class “hide” added to the list items you will be hidden on smaller screens.

The <ul> element also has a helper class “clearfix” added to it, so our nav bar can take care of all the floats.

Related Posts:

25

I really enjoy working with jQuery UI, however in some case the UI is not as intuitive.

Here is an example:

Let’s say you have a radio input set where you’re asking your users to select one of the options. If you style radio inputs as buttons with a “check” icon, your buttonset will look something like this by default:

There is a clear difference between checked and unchecked state, however the users don’t know that until they select one of the options. They may simply ignore the selection thinking all options are pre-selected, or they may try to check the one that doesn’t apply.

Better Solution

In some cases it would help to change the icon based on the state of the button. For example, you could use the “close” icon for un-checked state and switch it to “check” icon for the checked state. Click around the example below:

Here is a little code snippet that makes this happen. Please refer to comments for details.

21

When working with jQuery UI tabs it is really easy to dynamically add tabs. You just use tabs “add” method as specified in the documentation: .tabs( ‘add’ , url , label , [index] ). But there is no method for dynamically adding a close button so the tabs can be removed. Here is a quick little script I wrote to do just that.

17

Progressive enhancement allows everyone to access the basic content and functionality of a given web site using any browser or Internet connection, while also providing those with a more advanced browsers an enhanced version of the site.

Here is an example on how to enhance a starndard navigation bar with AJAX.

Scenario

[flickr id=”5822529950″ thumbnail=”medium” overlay=”true” size=”medium” group=”” align=”left”] Let’s assume that #header, #navigation and #footer are same on every page and #mainconent, and #sidebar inside the #content are changing on every page.

Problem
The site will have a music player that clients can choose to use while browsing the site. And if they do, we don’t want the music to be interupted as they move from page to page.

Solution
Use unobtrusive javascript and AJAX to load content and update the URL using hash in case someone wants to bookmark loaded content.

Javascript/jQuery

We’ll use jQuery to bind a click event to the navigation links and use load function to load contents of the clicked page.

09

When working with jQuery UI tabs it is really easy to dynamically add tabs. You just use UI’s “add” method as specified in the documentation: .tabs( ‘add’ , url , label , [index] ). But there is no method for dynamically adding a close button so the tabs can be removed. Here is a quick little script I wrote to do just that.