Maze of Minds » jQuery

Eye-Catching Navigation Menu with jQuery

Asta — Mon, 09 Jan 2012 11:15:29 +0000

In this short tutorial we are going to build a nice and eye-catching animated navigation menu with the help of jQuery. We will need hoverIntent and BackgroundPosition jQuery plugins, as well as sprite image for our menu items.

Source » Demo »

Let’s start with the markup.

The Markup

To keep semantic code our menu is organized as a simple unordered list:


  Articles
  Events
  Shop
  About
  Contact

Our list items will only be displaying images (with CSS sprite method) but we do not want to leave them blank because of search engines. So we add a span inside the anchor tag of each list item. We will hide those spans form the user’s view in our stylesheet. We also assign an id to each list item for later use in CSS and jQuery.

The CSS

We will use CSS sprite method for our menu items.

We load a single background image for all of our menu items and then give individual ones their own coordinates. The id that we assigned to each list item earlier allows us to target each item individually.

ul { list-style: none; margin: 0 auto; }
ul li a { display: block; height: 42px; background: url(../images/nav.png) 0 0 no-repeat; }
#articles a { background-position: 0 0; }
#events a { background-position: 0 -42px; }
#shop a { background-position:0 -84px; }
#about a { background-position:0 -126px; }
#contact a { background-position:0 -168px; }

Finally, let’s add some jQuery magic.

The jQuery

First, we include the latest version of jQuery library and necessary plugins in our html document:

hoverIntent jQuery plugin attempts to determine the user’s intent. It was derived and works like jQuery’s built-in hover. However, instead of immediately calling the onMouseOver function, it waits until the user’s mouse slows down enough before making the call. Thus it delays or prevents the accidental firing of animations.

The other jQuery plugin, BackgroundPosition, adds the ability to do background-position animations since animating multi-value properties like background-position is not supported in jQuery by default.

Next when the document is loaded we call hoverIntent method on our menu items. As with jQuery built-in hover, we need to define two functions. First will execute when the mouse pointer enters the element and the second when the mouse pointer leaves the element.

When the mouse pointer enters menu item we animate the horizontal position of its background image to the left. We repeat animation for several times to create a nice bouncing effect. When the mouse pointer leaves menu item we return its background image to the original position and again we repeat animation for several times to achieve a bouncing effect.

$(document).ready(function(){
  $('li').hoverIntent(
    function(){
      navitem = $(this);
      if (navitem.attr('id')==='articles'){ypos1=0;}
      else if (navitem.attr('id')==='events'){ypos1=-42;}
      else if (navitem.attr('id')==='shop'){ypos1=-84;}
      else if (navitem.attr('id')==='about'){ypos1=-126;}
      else {ypos1=-168;}
      navitem.children('a').stop().animate(
      {backgroundPosition:'-150px '+ypos1+'px'}, 220, 
      function(){
        navitem.children('a').animate( 
        {backgroundPosition:'-137px '+ypos1+'px'}, 64, 
        function(){
          navitem.children('a').animate( 
          {backgroundPosition:'-140px '+ypos1+'px'}, 32);
        });
      });
    }, 
    function(){
      navitem2 = $(this);
      if (navitem2.attr('id')==='articles'){ypos2=0;}
      else if (navitem2.attr('id')==='events'){ypos2=-42;}
      else if (navitem2.attr('id')==='shop'){ypos2=-84;}
      else if (navitem2.attr('id')==='about'){ypos2=-126;}
      else {ypos2=-168;}
      navitem2.children('a').stop().animate( 
      {backgroundPosition:'6px '+ypos2+'px'}, 220, 
      function(){
        navitem2.children('a').animate( 
        {backgroundPosition:'-3px '+ypos2+'px'}, 64, 
        function(){
          navitem2.children('a').animate( 
          {backgroundPosition:'0 '+ypos2+'px'}, 32);
        });
      });
    }
  );
});

By this point our animated navigation menu is finished. Feel free to modify it according to your needs and use it to spice up your own websites. :)

Plugins, Templates & Frameworks For Responsive Web Design

Tomas — Sat, 07 Jan 2012 16:26:15 +0000

In this post you will find useful frameworks and plugins which will help you to build responsive websites faster.

jQuery Plugins

Blueberry

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Response JS

Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images (or other media) progressively via HTML5 data attributes. Its object methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.

Fittext.js

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

FitVids.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Templates & Frameworks

320 and Up

‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed. Think of this as responsible responsive design. ‘320 and Up’ is a device agnostic, one web boilerplate.

Amazium

Responsive framework based on 960 grid system.

Foundation

An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

Inuit.css

Inuit.css framework is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.

The Constellation WordPress Theme

The Constellation theme is the perfect starting point for any WordPress project. It gives you the flexibility to provide bespoke styles for different devices, totally up-to-date HTML5 code which is fantastic for SEO, a flexible grid system on top of all the other goodness bundled in to the HTML5 boiler plate.

Reverie

Reverie Framework is an extremely versatile HTML5 WordPress framework based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of devices.

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

Simple Grid

SG is prepared for 4 distinct ranges of screen size: screens 720px, screens 720px, screens than 985px, and screens than 1235px. This means that people visiting your site will receive a layout that’s tuned to the size of their browser window.

The 1140 grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

The Goldilocks Approach

CSS and HTML boilerplate Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.

Gridpak – The Responsive Grid Generator

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

BluCSS

BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you’re working on your next project, you don’t have to worry about the essentials. With BluCSS, you can be up and running in less than a minute. One feature that stands out in this framework is responsive image functionality. Just apply any “blu_” class to an image, same as any other element, and the image will automatically be resized according to the browser width.

Create a Filterable Portfolio Powered by jQuery

Asta — Wed, 24 Aug 2011 18:16:11 +0000

In this tutorial I will show you how to create a filterable portfolio using jQuery. The idea is to display all of your work in a single page that would have a filtering option allowing visitors to filter portfolio items by category. Limiting your portfolio to a single page helps to display all the portfolio items quickly and effectively and the filter makes it easy to navigate.

To filter portfolio items we will use Quicksand plugin. Additionally, we will need Easing Plugin to give advanced easing options and PrettyPhoto plugin to view full-size protfolio items.

The beautiful photos used in the demo are from the portfolio of fashion and beauty photographer Yulia Gorbachenko.

Source » Demo »

The Markup

Say we have a number of photos in our portfolio and they can be classified in these categories: Beauty, Hannah, On Fire, Traction, Wavelength or Hair. Let’s create a category filter to navigate through our photos. A simple unordered list will perfectly work:


  All
  Beauty
  Hannah
  On Fire
  Traction
  Wavelength
  Hair

We assign classes equal to the category name to each list item for later use in jQuery. Additionally, we add one more list item “All” to view all portfolio items. We also assign the class "current" to this item because we want to show all portfolio items in the default view.

Now when we have our filter let’s move on and create one more list to hold our portfolio items:

...

Each list item contains the thumbnail image with an anchor tag around it. The anchor’s href attribute defines the URL of the full-size image and the rel attribute is necessary for the PrettyPhoto plugin that we will use later.

You may have also noticed that every list item has data-id and data-type attributes. Both are necessary for the Quicksand plugin. data-id is a unique identifier and data-type defines the category to which the portfolio item is assigned. Note that data-* is a perfectly valid HTML5 attribute.

The CSS

This isn’t a tutorial on CSS, so I won’t go into great detail about how to style the gallery. You can see my stylesheet in the source files attached to this post. I would just like to note that I have used several selectors and properties that are not supported in the earlier versions of IE.

The jQuery

First, we include the latest version of jQuery library and necessary plugins in the head of our document. For the prettyPhoto plugin we also need to include prettyPhoto stylesheet that comes with the plugin:

Next, when the document is loaded we initialize the prettyPhoto plugin. The prettyPhoto plugin accepts a number of parameters so you can easily customize it:

$(document).ready(function(){
  $(".portfolio a[rel^='prettyPhoto']").prettyPhoto({
    theme:'light_square',
    autoplay_slideshow: false,
    overlay_gallery: false
  });

Then we add some code to handle the Quicksand plugin:

var $portfolioClone = $(".portfolio").clone();
$(".filter a").click(function(e){
  $(".filter li").removeClass("current");
  var $filterClass = $(this).parent().attr("class");
  if ($filterClass == "all") {
    var $filteredPortfolio = $portfolioClone.find("li");
  } else {
    var $filteredPortfolio = $portfolioClone.find("li[data-type~="+$filterClass+"]");
  }

Quicksand works by comparing two collections of items and replacing them with a nice shuffling animation. By appending .clone() to our portfolio list and assigning it to $portfolioClone, we get a copy of the original list items that we will use later.
Once the link in the category filter is clicked, we want to remove the class current from the list item that has it and to determine which link has been clicked by taking the class value and assigning it to the $filterClass. In the case if the “All” link has been clicked, we want to show all of the portfolio items. Otherwise, we want to show only those list items that have data-type attribute with a value containing $filterClass.

    $(".portfolio").quicksand( $filteredPortfolio, {
      duration: 800,
      easing: 'easeInOutQuad'
    }, function(){
      $(".portfolio a[rel^='prettyPhoto']").prettyPhoto({
        theme:'light_square',
        autoplay_slideshow: false,
        overlay_gallery: false
      });
    });
    $(this).parent().addClass("current");
    e.preventDefault();
  })
});

Finally, we call quicksand. $filteredPortfolio which was assigned in the if statement contains filtered portfolio items that are to be displayed instead of the original portfolio items. We can also specify how long the animation will take, the easing type for the animation (don’t forget to include jQuery Easing Plugin for this) and other optional parameters. As the last argument we include a callback function to apply prettyPhoto on newly cloned portfolio items as well.

In the last lines of code we add the class current to the parent of the clicked link and call preventDefault() to prevent the browser jump to the link anchor.

With that our filterable portfolio is finished. I hope you enjoyed the tutorial and find it useful! I tried to explain everything as best as I can and if you have any questions, please feel free to ask.