MSP
July 21st, 2008, 06:20 AM
http://css-tricks.com/wp-content/csstricks-uploads/garagemenuexample.jpg
Right out of the box, jQuery provides the animate function, which allows us to morph some CSS attributes over time. Things like opacity, font-size, width, length, and position are all supported. There are a couple of notable limitations to this function though, and one of those is “background-position”.
Thankfully, there is a plugin to help with this, the Background-Position Animation Plugin (http://www.corrupt-system.de/jquery/backgroundPosition/) by Alexander Farkas. (direct link to JS (http://www.corrupt-system.de/jquery/backgroundPosition/jquery.backgroundPosition.js)). With this, we can do some fun stuff!
We are going to build a “Garage Door” style menu, where an image “slides up” to reveal another image behind it.
View Demo (http://css-tricks.com/examples/GarageDoorMenu/) Download Files (http://css-tricks.com/examples/GarageDoorMenu.zip)
1. Creating the image needed
We are going to need three different types of images here. First is a background image for the entire menu itself. This is going to be one big image for the entire menu which will be the imagery which is “revealed” when the door opens. Check out my Photoshop file:
http://css-tricks.com/wp-content/csstricks-uploads/menu-background-example.jpg
Notice my guides. I have these set up as a visual reference to what the “viewable area” is going to be within the garage frame. Note that the Photoshop files are included in the download for your reference.
Second, we’ll need to create the garage doors which we will call the “shutters”. These need to be separate graphics as each one will need to be animated separately. I made a separate template for this, so I could again use guides to keep things as close to centered and nicely spaced as possible.
http://css-tricks.com/wp-content/csstricks-uploads/shutter-template.png
Lastly, we need a window which will act as the garage frame. This is the nice touch that really ties the whole idea together. Since this is going to be the top-most layer, we will apply this to the anchor links themselves, so that they can be clickable with unique URLs.
http://css-tricks.com/wp-content/csstricks-uploads/window.png
2. Writing the HTML markup
Of coure, no matter how fancy we want to get with our menus, the markup should be clean and semantic so that with CSS and/or JavaScript disabled, the menu still looks and behaves like a menu.
Here is the menu markup:
Link 1 (http://www.myspacepros.com/forum/#1)
Link 2 (http://www.myspacepros.com/forum/#2)
Link 3 (http://www.myspacepros.com/forum/#3)
Link 4 (http://www.myspacepros.com/forum/#4)
We have classes and ID’s applied all over, as we will need those hooks to do the styling and behaviors we want. But with CSS turned off, we have a very functional menu still:
http://css-tricks.com/wp-content/csstricks-uploads/cssturnedoff.png
3. The CSS
Here I’ll show you the whole CSS file, and then point out a few things below:
* { 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;}We use the hard star-selector reset for cross-browser consistency. This is especially important in this example as differences in the margin and padding values for lists are common across different browsers.
The menu background is applied to the UL itself. Then each list item is set to a specific width and height (that of our window) and floated to the left (for a horizontal menu). The ID values on the LI items are used to apply the separate background graphics only. The anchor links, as I mentioned above, will be the top-most layer and thus use the window overlay. These will need to be set as a block level element, have with and height applied, and use text-indent to kick the text off the page.
4. The jQuery JavaScript
First things first, we include the latest version of jQuery on our page, as well as the plugin I linked to at the top of this article. Then we can write the jQuery JavaScript needed to make the garage door effect happen.
The first statement above is to account for a Firefox quirk actually. Just need to reset that background-position to 0px 0px.
Then we bind the “hover” event to each page element with the class of “link”. Remember we applied that class to each anchor link in the markup. We could have just used “a” as the target here, but that is dangerous as it is likely there will be more anchor links on any page this is actually used, so better to target a specific class. So when the hover event occurs over a page element with a class of “link”, jQuery finds the parent element, and does the background-position animation on that element. In our case, the LI element, with the unique shutters. Using the call-back function of the hover event (e.g. when the mouse leaves the area) we can animate the shutter back into position.
And there we have it, a nice looking menu with a pretty neat animated effect!
View Demo (http://css-tricks.com/examples/GarageDoorMenu/) Download Files (http://css-tricks.com/examples/GarageDoorMenu.zip)
Special Thanks
Special thanks to Toby Pitman (http://www.tobypitman.com/) for the orginal concept for this idea. Toby helped out another reader having a problem with background image animation on this thread (http://css-tricks.com/forums/viewtopic.php?f=4&t=351&p=1709&hilit=toby#p1709). The basis for this example is from the example he posted there.http://css-tricks.com/images/CakeMail-468x60_1.gif (http://www.cakemail.com/?r=css-tricks)
http://feeds.feedburner.com/~f/CssTricks?i=mXUEyJ (http://feeds.feedburner.com/~f/CssTricks?a=mXUEyJ) http://feeds.feedburner.com/~f/CssTricks?i=huOgBj (http://feeds.feedburner.com/~f/CssTricks?a=huOgBj) http://feeds.feedburner.com/~f/CssTricks?i=LjGajj (http://feeds.feedburner.com/~f/CssTricks?a=LjGajj)
http://feeds.feedburner.com/~r/CssTricks/~4/341565488
More... (http://feeds.feedburner.com/~r/CssTricks/~3/341565488/)
Right out of the box, jQuery provides the animate function, which allows us to morph some CSS attributes over time. Things like opacity, font-size, width, length, and position are all supported. There are a couple of notable limitations to this function though, and one of those is “background-position”.
Thankfully, there is a plugin to help with this, the Background-Position Animation Plugin (http://www.corrupt-system.de/jquery/backgroundPosition/) by Alexander Farkas. (direct link to JS (http://www.corrupt-system.de/jquery/backgroundPosition/jquery.backgroundPosition.js)). With this, we can do some fun stuff!
We are going to build a “Garage Door” style menu, where an image “slides up” to reveal another image behind it.
View Demo (http://css-tricks.com/examples/GarageDoorMenu/) Download Files (http://css-tricks.com/examples/GarageDoorMenu.zip)
1. Creating the image needed
We are going to need three different types of images here. First is a background image for the entire menu itself. This is going to be one big image for the entire menu which will be the imagery which is “revealed” when the door opens. Check out my Photoshop file:
http://css-tricks.com/wp-content/csstricks-uploads/menu-background-example.jpg
Notice my guides. I have these set up as a visual reference to what the “viewable area” is going to be within the garage frame. Note that the Photoshop files are included in the download for your reference.
Second, we’ll need to create the garage doors which we will call the “shutters”. These need to be separate graphics as each one will need to be animated separately. I made a separate template for this, so I could again use guides to keep things as close to centered and nicely spaced as possible.
http://css-tricks.com/wp-content/csstricks-uploads/shutter-template.png
Lastly, we need a window which will act as the garage frame. This is the nice touch that really ties the whole idea together. Since this is going to be the top-most layer, we will apply this to the anchor links themselves, so that they can be clickable with unique URLs.
http://css-tricks.com/wp-content/csstricks-uploads/window.png
2. Writing the HTML markup
Of coure, no matter how fancy we want to get with our menus, the markup should be clean and semantic so that with CSS and/or JavaScript disabled, the menu still looks and behaves like a menu.
Here is the menu markup:
Link 1 (http://www.myspacepros.com/forum/#1)
Link 2 (http://www.myspacepros.com/forum/#2)
Link 3 (http://www.myspacepros.com/forum/#3)
Link 4 (http://www.myspacepros.com/forum/#4)
We have classes and ID’s applied all over, as we will need those hooks to do the styling and behaviors we want. But with CSS turned off, we have a very functional menu still:
http://css-tricks.com/wp-content/csstricks-uploads/cssturnedoff.png
3. The CSS
Here I’ll show you the whole CSS file, and then point out a few things below:
* { 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;}We use the hard star-selector reset for cross-browser consistency. This is especially important in this example as differences in the margin and padding values for lists are common across different browsers.
The menu background is applied to the UL itself. Then each list item is set to a specific width and height (that of our window) and floated to the left (for a horizontal menu). The ID values on the LI items are used to apply the separate background graphics only. The anchor links, as I mentioned above, will be the top-most layer and thus use the window overlay. These will need to be set as a block level element, have with and height applied, and use text-indent to kick the text off the page.
4. The jQuery JavaScript
First things first, we include the latest version of jQuery on our page, as well as the plugin I linked to at the top of this article. Then we can write the jQuery JavaScript needed to make the garage door effect happen.
The first statement above is to account for a Firefox quirk actually. Just need to reset that background-position to 0px 0px.
Then we bind the “hover” event to each page element with the class of “link”. Remember we applied that class to each anchor link in the markup. We could have just used “a” as the target here, but that is dangerous as it is likely there will be more anchor links on any page this is actually used, so better to target a specific class. So when the hover event occurs over a page element with a class of “link”, jQuery finds the parent element, and does the background-position animation on that element. In our case, the LI element, with the unique shutters. Using the call-back function of the hover event (e.g. when the mouse leaves the area) we can animate the shutter back into position.
And there we have it, a nice looking menu with a pretty neat animated effect!
View Demo (http://css-tricks.com/examples/GarageDoorMenu/) Download Files (http://css-tricks.com/examples/GarageDoorMenu.zip)
Special Thanks
Special thanks to Toby Pitman (http://www.tobypitman.com/) for the orginal concept for this idea. Toby helped out another reader having a problem with background image animation on this thread (http://css-tricks.com/forums/viewtopic.php?f=4&t=351&p=1709&hilit=toby#p1709). The basis for this example is from the example he posted there.http://css-tricks.com/images/CakeMail-468x60_1.gif (http://www.cakemail.com/?r=css-tricks)
http://feeds.feedburner.com/~f/CssTricks?i=mXUEyJ (http://feeds.feedburner.com/~f/CssTricks?a=mXUEyJ) http://feeds.feedburner.com/~f/CssTricks?i=huOgBj (http://feeds.feedburner.com/~f/CssTricks?a=huOgBj) http://feeds.feedburner.com/~f/CssTricks?i=LjGajj (http://feeds.feedburner.com/~f/CssTricks?a=LjGajj)
http://feeds.feedburner.com/~r/CssTricks/~4/341565488
More... (http://feeds.feedburner.com/~r/CssTricks/~3/341565488/)