Question

I’m trying to create something that works like this but doesn’t have any submenus. When I click on a navigation item the background image changes and the content slides out like this (this is what the test site is suppose to look like) with all manner of content inside the box.

I’m very beginner when it comes to jQuery and would like some help on where to start. I’ve looked for tutorials everywhere but nothing this specific. If anyone could point me in the right direction, or a template I can learn from that would be great.

Answer 1

What you’re looking for is the jquery animate function.

$(document).ready(function() {
    $('#buttonID').click(function() {
        $('#divToSlide').animate({width: 'toggle'});
    });
});

You can find more info here:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

As for the changing background, you can use jquery to set the css background property when clicked

var $backgroundURL = www.imageURL.com/image.jpg;
$('#divToChange').css({'background-image':'url("'+$backgroundURL'")'});

The complete code will look something like this:

$(document).ready(function() {
    $('#buttonID').click(function() {
        $('#divToSlide').animate({width: 'toggle'});
        var $backgroundURL = www.imageURL.com/image.jpg;
        $('#divToChange').css({'background-image':'url("'+$backgroundURL'")'});
    });
});