So you’re not really into flash?
Don’t know how to code flash?
Don’t want to know how to code flash?
Love jQuery?
Well all this is pretty much me. Now a days most of the things you can do in flash, you can now do with jQuery; well somewhat. But that doesn’t stop us developers from trying right? One of our latest clients wanted a cool feature that I thought would be nicely shared with the rest of the web development community.
Let’s think of a box with rotating images inside. along with the images, we have a navigation menu that slides up / down while the images rotate. Pretty cool huh? well lets show you how I made this happen.
Lets begin with the Basics of what is needed:
1. JQuery/ custom js
2. css/html/images
Javascript
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"><!--mce:0--></script> <script src="bg-rotate-slide-up-js.js" type="text/javascript"><!--mce:1--></script> <script type="text/javascript"><!--mce:2--></script>
CSS
body{margin:0;padding:0;} #mainImageBox{position:relative;height:300px;margin-top:20px;margin-bottom:20px;margin-left:20%;} #mainImageBox img{float:left;position:absolute;margin:0;padding:0;border:1px solid #6a39b3;} #mainImageBox img.show{z-index:100} .snapShot{margin:0;padding:9px;left:0;position:absolute;top:0;z-index:0;} #mainImageBox #subNavBox{position:absolute;z-index:200;top:1px;left:1px;width:650px;height:300px;} #mainImageBox #subNavBox .sNavWrap{float:left;position:relative;bottom:0;background-color:#6a39b3;margin:0 0 0 20px;padding:0;font-size:12px;text-align:center;top:269px;} #mainImageBox #subNavBox .sNavWrap a{margin:0;padding:8px 10px;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#f9f9f9;text-decoration:none;text-align:center;display:block; text-transform:uppercase;font-weight:bold;} #mainImageBox #subNavBox .sNavWrap .sSub{border-top:1px solid #ddd;margin:0;padding:0;} #mainImageBox #subNavBox .sNavWrap .sSub a{display:block;margin:5px 0;padding:5px 0 8px 0;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#080808;text-decoration:none;text-align:center;display:block;text-transform:uppercase;font-weight:normal;} .clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}.clearfix:after {clear: both;content:' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}.clearfix {display: inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}
HTML
<!-- begin main image box --> <div id="mainImageBox"> <img class="snapShot show" src="one.jpg" alt="One" width="650" height="300" /> <img class="snapShot" src="two.jpg" alt="Two" width="650" height="300" /> <img class="snapShot" src="three.jpg" alt="Three" width="650" height="300" /> <!-- begin sub nav slide up box --> <div id="subNavBox" class="sNav"> <!-- list 1 --> <div class="sNavWrap"> <div class="sHead"> <a href="#">Header Link 1</a> <div class="sSub"> <a href="#">sub link for 1</a> <a href="#">sub link 2 for 1</a> <a href="#">sub link 3 for 1</a></div> </div> </div> <!-- list 2 --> <div class="sNavWrap"> <div class="sHead"> <a href="#">Header Link 2</a> <div class="sSub"> <a href="#">sub link for 2</a> <a href="#">sub link 2 for 2</a> <a href="#">sub link 3 for 2</a></div> </div> </div> </div> <!-- end sub nav slide up box --></div> <!-- end main image box -->
Building off of a carousel foundation I found, I stripped down to the bare minimum and ran from there. Here is all the Javascript written for this example:
Javascript (bg-rotate-slide-up-js.js)
$(document).ready(function(){ /***************************************************************************** dealing with the navigation *****************************************************************************/ $(".sSub").each(function(){ var newWidth = $(this).width(); $(this).prev().css("width",newWidth); $(this).css("display","none"); //alert( 300 - $(this).height() ); }); // Deal with Sub Nav $(".sNavWrap").hover(function(){ // I Loath you IE fix if ($.browser.msie && $.browser.version.substr(0,1)<8){var minusPX = "33";} else{var minusPX = "32";} var newHeight = (300 - $(this).children().children(".sSub").height() ) - minusPX +"px"; //alert(newHeight); $(this).animate({ top: newHeight }, 300, function() { $(this).children().children(".sSub").show(); }).stop(true, true); $(this).children().children(".sSub").slideDown(300); },function(){ $(this).animate({ top: '269px' }, 300, function() { $(this).children().children(".sSub").hide(); }).stop(true, true); $(this).children().children(".sSub").slideUp(300); }); }); // END THE DOM /***************************************************************************** dealing with the rotating images *****************************************************************************/ function mainImageFlow() { // set the opacity of image(s) to 0 (can't see them) $('#mainImageBox img').css({opacity: 0.0}); // set the first image to be seen $('#mainImageBox img:first').css({opacity: 1.0}); // set the function for 'mainImageGallery' to run every 3 seconds. setInterval('mainImageGallery()',3000); } function mainImageGallery() { // if the images have no class (class='show') then show the first one anyway var current = ($('#mainImageBox img.show')? $('#mainImageBox img.show') : $('#mainImageBox img:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('sNav'))? $('#mainImageBox img:first') :current.next()) : $('#mainImageBox img:first')); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show'); $("#subNavBox").removeClass('show'); }
OR
Download the zip file
Update: Per your requests, here is an updated script and CSS code that gives your menu an animated scrolling effect. This code has also been cleaned up quite a bit from the previous version.
$(document).ready(function(){ /***************************************************************************** dealing with the navigation *****************************************************************************/ $(".sSub").each(function(){ var newWidth = $(this).width(); $(this).prev().css("width",newWidth); //$(this).css("display","none"); //alert( 300 - $(this).height() ); }); // Deal with Sub Nav $(".sNavWrap").hover(function(){ // I Loath you IE fix if ($.browser.msie && $.browser.version.substr(0,1)<8){var minusPX = "33";} else{var minusPX = "32";} var newHeight = $(this).height() - minusPX +"px"; //alert(newHeight); $(this).stop().animate({ bottom: newHeight }, 'slow') }, function(){ $(this).stop().animate({ bottom: '0' }, 'slow') }); }); // END THE DOM /***************************************************************************** dealing with the rotating images *****************************************************************************/ function mainImageFlow() { // set the opacity of image(s) to 0 (can't see them) $('#mainImageBox img').css({opacity: 0.0}); // set the first image to be seen $('#mainImageBox img:first').css({opacity: 1.0}); // set the function for 'mainImageGallery' to run every 3 seconds. setInterval('mainImageGallery()',3000); } function mainImageGallery() { // if the images have no class (class='show') then show the first one anyway var current = ($('#mainImageBox img.show')? $('#mainImageBox img.show') : $('#mainImageBox img:first')); //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('sNav'))? $('#mainImageBox img:first') :current.next()) : $('#mainImageBox img:first')); //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000); //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show'); $("#subNavBox").removeClass('show'); }
And the modified CSS:
body{margin:0;padding:0;} #mainImageBox{position:relative;height:300px;margin-top:20px;margin-bottom:20px;margin-left:20%; overflow: hidden;} #mainImageBox img{float:left;position:absolute;margin:0;padding:0;border:1px solid #6a39b3;} #mainImageBox img.show{z-index:100} .snapShot{margin:0;padding:9px;left:0;position:absolute;top:0;z-index:0;} #mainImageBox #subNavBox{position:absolute;z-index:200;bottom:0;left:0;width:650px; height: 30px;} #mainImageBox #subNavBox .sNavWrap{float:left;position:relative;bottom: 0;background-color:#6a39b3;margin:0 0 0 20px;padding:0;font-size:12px;text-align:center;} #mainImageBox #subNavBox .sNavWrap a{margin:0;padding:8px 10px;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#f9f9f9;text-decoration:none;text-align:center;display:block; text-transform:uppercase;font-weight:bold;} #mainImageBox #subNavBox .sNavWrap .sSub{border-top:1px solid #ddd;margin:0;padding:0;} #mainImageBox #subNavBox .sNavWrap .sSub a{display:block;margin:5px 0;padding:5px 0 8px 0;font-size:12px;font-family:Arial, Helvetica, sans-serif;color:#080808;text-decoration:none;text-align:center;display:block;text-transform:uppercase;font-weight:normal;} .clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}.clearfix:after {clear: both;content:' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}.clearfix {display: inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}
Tags: CSS, html, jQuery, jQuery examples, jQuery HTML, jQuery tutorial
Comment By: senshikaze
March 4th, 2010 at 4:26 pm
cool stuff.
Comment By: Majid Al-Aydeross
May 9th, 2010 at 4:29 am
Definitely an eye-opener to the possibilities jQuery has to offer, thanks for sharing
Comment By: egollas
August 16th, 2010 at 6:09 pm
How can I change the slide up effect. Animation speed does not change. How can I change Duration and Easing in the animation? any help will be appreciated
Comment By: Kelly
February 17th, 2011 at 5:28 am
Hello I wanted to know if you thought there would be any problems with using this code with images being pulled from the database and or flash files .. Example is that I want to creat ad banners that will rotate every 30 seconds with them being placed in the db I will be able to control how often they show and I would like to give the client a choice between flash ads and just graphic banners for their ads…
Comment By: nb3
March 15th, 2011 at 11:53 pm
I know this is old…but I’m wondering the same thing as egollas. The menu just sorta jumps up, it doesn’t slide. How can I make it slide? (And fade at the same time would be nice too, but slide is what I’m after).
Comment By: nnelson
March 17th, 2011 at 11:06 am
@Kelly: This works fine with images being pulled in from a database, since all the images would be pulled in before page load. You would have to test any flash content yourself, but I don’t see any problem with it.
@egollas and nb3: We posted an updated script above to give a scrolling animation to the menus. Let us know how it works for you.
Comment By: email marketing
June 2nd, 2011 at 3:29 am
In fact I was really impressed by the basic needed source code of CSS and JavaScript provided in this blog for beginning but it was noticed that the simple slideUp() method gradually changes the height, for selected elements, from visible to hidden.
Comment By: Annie
August 14th, 2011 at 4:00 pm
The new sliding animation effect is great compared to the original. Thanks for updating the script and providing the code for all of us to use.