Building an Awesome Navigation Menu with jQuery: Part 2

This is the second part of a two-part series that will help you build a complex sliding menu, enhanced with modal windows. Click here to read Part 1 of Building an Awesome Navigation Menu with jQuery

This second part will cover building a modal window and coding its behavior. If you don’t know what I already explained, please go back to the first article here and come back once you finish that one. However, if XHTML, CSS and jQuery are your friends, you may pick things up as we go, so just go ahead and read this part of the tutorial.

Let me remind you the concept we described in the previous article. We have a horizontal menu with a few categories. Each category has multiple subcategories and each such subcategory may contain a random number of products. For easier and faster movement of users thorough the site, we won’t reload the page once a subcategory is clicked. Instead, we will display all products in a modal window.

Here’s a screenshot of the menu and one simple modal window.

How does the modal work?

Read more

Building an Awesome Navigation Menu with jQuery: Part 1

Do you need to build a navigation interface that has to handle hundreds of product links? All grouped in categories, subcategories? Perhaps even containing thumbnails? If the answer is yes, here’s a usability path to avoid :

1. select categories, wait for a page to load
2. select a subcategory, wait for another page to load
3. check out products
4. click to go to desired product

The typical web user only wants to click once or twice to get to the product they want. And if clicks are unavoidable, make sure page loads are minimized! The more clicks and the more page loading they have to go through, the higher the risk they will get lost and never come back to your site. The good news is that you can achieve a good navigation menu that reduces page reloads.

This article is an in-depth tutorial on how you can achieve an expandable navigation menu using valid xhtml coding, valid css and a bit of javascript.
Read more

Usability Tips: How to Properly Handle Images in your Site

One of the most important aspects of the overall feel of a website comes from the pictures that lie within it. It is great that you can provide great layouts, interesting and enhanced navigation, valuable content, but all of the above will be worthless if the pictures you insert next to your content are:

• of awful, low quality
• displayed in the worst way possible

Read more

The Ultimate Navigation with CSS level 3

Please note that this article is targeted at web designers and developers who are well versed in xHTML/CSS.

Update: A demo of this method can be found here: The Ultimate Navigation CSS Level3 Demo – by Bogdan Pop

One of the toughest tasks in the process of developing your web applications or web sites is choosing the best navigation system. Let’s face it, the easier people get around in your website, the more delighted they are.  With this in mind, you have been reading articles on user interface design, layout, and by now you are  implementing breadcrumb trails and other list handling techniques, such as the ones described in taming lists article at A List Apart. Everything evolved and now you implement drop down menus. But does this really work on big websites?

Read more