So I’ve been browsing through the css awards site admiring some of the beautiful designs and found a particular menu type in one of them that i wanted to recreate. You can see the site i mention here, 36 Creative. This tutorial is going to show you how to create the same animated menu style with particular ease utilising a little bit of JQuery. I don’t know who will read this so I will just explain everything I do including what certain CSS values do etc to make this accessible to everyone.
First lets look at the Finished Version
If you’d like to follow along then I’ve made the source files available for you to download.
The zip file includes;
- • index.html – The HTML file itself
- • style.css – The CSS file
- • Jquery-1.6.2.min.js – The JQuery Library
- • jquery.backgroundPosition.js – a plugin for JQuery
- • images folder – includes PNG’s for all the background images for the menu items
- • PSD folder – The PSD that i created the background items with so that you can make your own
As you can see within the head I have linked to the JQuery library and the background position plug-in for JQuery. You can find out more about this plug-in here. http://plugins.jquery.com/project/backgroundPosition-Effect
I am linking to the Google CDN version of JQuery as it speeds up delivery in a live environment but for the purposes of this exercise you could just link to the local file I included within the source files.
Also linked within the header file are the style.css file that we are using and the scripts.js file where we will be writing our code.
The next step is to create the HTML structure of the menu itself. Its a very basic un-ordered list containing each of the menu items and links, That is it!
I’ve given the unordered list an ID of nav and then created a list item for each of the menu links/items I will be creating. Each of the list items has its own ID to show where it will be linking but also so that we can set seperate background images for each link item. The un-ordered list is all contained within a container div so that we can centre (center for you US of A people) the menu on the page.
That’s all of the HTML you need for this menu.
The Css is where we make things look really good. The CSS file can be found within the source file I’ve included for you to download above.
We first start by using a little bit of a CSS reset which you should always do. It makes sure that *all* broswers start at the same point and you don’t get any odd layout issues due to certain browsers adding margins and padding as it pleases.
The body tag just includes a background colour but obviously this is completely up to you I just chose black as it fits in with the Photoshop files I had created. The #container as i said is used to just to help centralise the design you do this by setting a width and then setting the margins to auto, this will centre the div between two equal margins depending on your resolution or size of the browser window you have open.
ul#nav is the ul with the ID of nav that we created within the HTML file. A 50px margin is applied to the top just to move it away from the top of the page and then auto margins again to centralise the nav bar within the container again using the same principles as we did to centre the container div. I’ve set a width of 520px as each of my menu item images are 130px’s wide so to cater for four menu items the nav bar must be 520px wide. Overflow:hidden isn’t really needed within this tag I just forgot to delete it out after i tried something else.
ul#nav li targets each of the list items within the nav bar. You want to set the positioning as float:left this will allow your menu items to sit side by side and also remove any link formatting using list-style:none, this will remove those pesky bullet points that appear after every <li> tag. Background position is set to 0px 0px, I will explain this further later on in the tutorial.
Next we set the background image for each of the menu items, we are utilising the ID tags that we gave each of the links within nav list in the HTML file. Again I have included these images for you to use within the tutorial source files at the top of this page. Each image has the menu text included within the image hence why we haven’t written any link text within the HTML file.
ul#nav li a allows us to style the links within the nav list. We set the width value according to the width of the individual menu background images we are using, they are 130px wide. The height is set at 40px, this is half of the actual height of the included images, this is so we only see either the top half or the bottom half of the image when we use the background position value, again I will explain this further later on in the tutorial. Overflow:hidden is set here to make sure that the height of 40px is adhered to and that anything over this isn’t visible, without this you may still see the bottom half of the menu image which will ruin the effect. Background-repeat is set to no-repeat, this does exactly what it says and stops the background image from repeating.
ul#nav li a:hover lets us style how the menu links will look when we hover our mouse over them as you can see the only value within is the background position one that we’ve been seeing throughout. After you have got this far you could open the index.html file and the menu items would work and their background images would change when you roll your mouse over them.
The transition is achieved while only using one image and the background position statement. To explain this further and how it works we have to look back at what we did. We created a box half the height of the background images and then set our background position to 0 0 this sets the “co-ordinates” or X and Y position of the background image to the top left of the png file, this only allows the top half of the image to be seen and you can probably guess that the bottom half of the image is what we see when we put our mouse over the link item. By moving background-position to 0px -40px we move the background image “up” or on its Y axis by 40px this then means that only the bottom half of the image is in view and that is how we create our basic link transition.
The last line within that CSS file we shall leave for now until we have written our code.
JQuery and the code
We are using the background-position plugin that i showed you at the top of this page to target the background-position values which wouldn’t be possible with just the standard JQuery library, there are better plugins that allow you to hook into many CSS values but for the purpose of this exercise we only need this one piece of functionality.
You want to put all this code within your scripts.js file. We only want to run this script once the page has loaded so we are only calling our transition function(s) within the $(document).ready which does exactly what it sounds like. It waits for the document or your web page to have fully loaded before running the contained functions.
The next part of the code is where we set up what will happen when we mouse over the menu items. We again target just links with the nav menu using $(“ul#nav li a”) then we call the .hover method. .hover works like an if statement and basically has two states which tells the browser what to do if the mouse is hovering over the item you have targeted and then also what do if the mouse then exits or isn’t over the item you have targeted. You can use two functions within the parenthesis of the hover method to specify what these actions are.
Our first function uses the .animate method to specify that we want to animate the background position value. We set the value of 0 -40px again to set where we want the image position to be which as you remember is the blue background which forms the active state of the link. the number of 200 is the speed in milliseconds of how long the transition will take to go from a position of 0 0 to 0 -40px. This time value is the essence of this effect and essentially just slows down the default link transition to a speed that your eyes can see. we also use .stop(true, true) to stop the effect looping if we were to move the mouse over the menu quickly.
The second function within our hover method just sets the image position back to 0 0 once the mouse moves out of the link area so that the menu item is essentially not active anymore, again we animate this and set a time value so that the transition is smooth and visible.
That is all there is to it, if you reload the index file within your browser now you should see the transition working. Its a basic effect but it really does add a lot to your design and engages your users a lot more.