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)