Recent News
Copyright © 2014 THAT Agency . All Rights Reserved.
410 Evernia Street, Suite 118, West Palm Beach, FL 33401
Tel: (561) 832-6262 | Fax: (561) 832-7707

Rotated Background with Slide Up Menu using JQuery and CSS

03 Mar Rotated Background with Slide Up Menu using JQuery and CSS

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.

bg-rotate-slideup-nav-closed
Check out the Demo

Lets begin with the Basics of what is needed:

1. JQuery/ custom js
2. css/html/images

Javascript


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





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');
}

bg-rotate-slideup-nav-open
Check out the Demo

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;}
8 Comments
  • senshikaze
    Posted at 16:26h, 04 March

    cool stuff.

  • Majid Al-Aydeross
    Posted at 04:29h, 09 May

    Definitely an eye-opener to the possibilities jQuery has to offer, thanks for sharing :)

  • egollas
    Posted at 18:09h, 16 August

    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

  • nb3
    Posted at 23:53h, 15 March

    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).

  • nnelson
    Posted at 11:06h, 17 March

    @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.

  • email marketing
    Posted at 03:29h, 02 June

    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.

  • Annie
    Posted at 16:00h, 14 August

    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.

  • domain
    Posted at 05:18h, 22 October

    Very soon this web site will be famous amid all blogging and site-building visitors, due to it’s pleasant posts