Menu "Garage doors"

A very beautiful menu, implemented with the help of Jquery, comparable only with the menus implemented on the flash.
This menu works by changing the background-position of the overlayed image layers.

So, let's begin.
To begin with, we will need a background (bottom layer):

Image of the very "garage door" (middle layer):


And the image of the "doorway (top layer):


Create the menu frame itself in html:

< ul id = "menuback" >
< li class = "shutter" id = "shutter1" > <a class = "link" href = "# 1"> Link 1 </ a > </ li >
< li class = "shutter" id = "shutter2" > <a class = "link" href = "# 2"> Link 2 </ a > </ li >
< li class = "shutter" id = "shutter3" > <a class = "link" href = "# 3"> Link 3 </ a > </ li >
< li class = "shutter" id = "shutter4" > <a class = "link" href = "# 4"> Link 4 </ a > </ li >
</ ul >

')
When css or javascript is disabled, the menu will look like a normal list of links, that is, it will still perform its main function.

Design the menu with css:

* {margin: 0px; padding: 0px; }
body {background: # c1c1c1; }
a {outline-style: none; }

ul # menuback {
margin: 50px auto;
list-style: none;
background: url (../ images / menu-bg.jpg);
width: 800px;
overflow: auto;
}

ul # menuback li.shutter {
width: 200px;
height: 100px;
display: block;
float: left;
}

ul # menuback li # shutter1 {
background: url (../ images / shutter-africanplains.jpg) no-repeat;
}
ul # menuback li # shutter2 {
background: url (../ images / shutter-reptiles.jpg) no-repeat;
}
ul # menuback li # shutter3 {
background: url (../ images / shutter-aviary.jpg) no-repeat;
}
ul # menuback li # shutter4 {
background: url (../ images / shutter-arcticzone.jpg) no-repeat;
}

a.link {
width: 200px;
height: 100px;
display: block;
background: url (../ images / window.png) no-repeat bottom center;
text-indent: -9999px;
}

And finally, give him life with jQuery.

By itself, jQuery cannot fully work with the background position in css, so we use a small one-kilo byte plugin for it.

< script type = "text / javascript" src = "js / jquery-1.2.6.min.js" > </ script >
<script type = "text / javascript" src = "js / jquery.backgroundPosition.js" > </ script>

<script type = "text / javascript" >
$ ( document ) .ready ( function () {

// Set css in Firefox (Required to use the backgroundPosition js)
$ ( '# shutter1' ) .css ({backgroundPosition: '0px 0px' });

// Animate the shutter
$ ( ".link" ) .hover ( function () {
$ ( this ) .parent (). animate ({backgroundPosition: '(0px -100px)' }, 500);
}, function () {
$ ( this ) .parent (). animate ({backgroundPosition: '(0px 0px)' }, 500);
});
});
</ script >

Update: the menu in IE6 does not work correctly due to improper processing of transparency in png images.
To fix this glitch we use the following css code (I apologize if I used this hack incorrectly):

<! - [if lt IE 7]>
<style type = "text / css">
a.link {
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = 'images / window.png', sizingMethod = 'scale');
background: url (images / blank.gif) no-repeat bottom center;
}
</ style>
<! [endif] ->

You can view or download the result of our work (together with the source code for the images) below.
Thanks for attention!

My blog - Chernev.ru
View result (demo)
Download source
Source (English)