Using sprite images

written by Web designers London on October 16, 2012 in Tutorials and Web design with 3 comments

Create a responsive navigation

In this post you will learn how to create a responsive navigation. Now with more and more people viewing websites on all different media devices, it is important you cater for the millions of smart phone users.

In this tutorial we will looking at a standard web page layout that when viewed on a smaller screen size the main navigation disappears and is replaced with a menu drop down icon, that when clicked displays the navigation. Take a look at what we will be creating here.

So lets get started, firstly we will start with the HTML mark up before the HEAD tag we need to insert the jQuery code. We are linking to the latest jQuery code.

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

<script>
$(function(){
var nb = $(


3 Responses to “Using sprite images

  1. Hey dude, nice looking site you got here! Got a comment here!

    You see your classes dribbble, etc…. What you can do is copy the attributes into a new class .social li a {} then on each dribbble, etc… class you have background-position:-43px 0;

    Same goes for your hover states, if the difference is always the same in the amount they have to move you can amalgamate that into one class also, i.e. .social li a { background-position-y:-42px;} these changes will turn that 100-200 lines into 20 to 50 max.

    nice one dude!

    • Cheers Dude! Feel free mate ;)

      Cheers for that one Andre! It does make sense, I will get round to updating it soon.

      I remember your OCD for code! Which I fully respect!… (*Note to anyone reading this Andre is a PHP ledge! So any Hard core coding needed, he is your man! http://www.peartreefigtree.com/ )

      Your Coding and guidance has helped me greatly where I am today, and of course Lee’s :)


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>