Rotated Background with Slide Up Menu using JQuery and CSS

03 March

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
<!--mce:0-->
<!--mce:1-->
<!--mce:2-->
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>
    <!-- begin sub nav slide up box -->
<div 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 &amp;&amp; $.browser.version.substr(0,1)&lt;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 &amp;&amp; $.browser.version.substr(0,1)&lt;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: Web Development