Love in an Elevator

There are many tabs, accordions, scrollers, carousels etc for jQuery but what if I fancy something different. Navigation along the left hand side with an arrow that scrolls between the options and content that slides up and down to match the selected tab. Simple.

Getting Started

A quick prototype sketch

The original idea was to use an unordered list, with list items as the titles and append an extra list item to act as the slider. An onclick event on each of the list items will then trigger a function to slide the appended list item over the top of the clicked element. Using CSS and images, the appended list item would be positioned absolutely to allow the movement up and down and give it a higher z-index than the other elements to overlay them. A background image of an arrow and slightly larger width would also help the effect.

Damn you IE7
So it almost works, only that creating an extra element at the start of the navigation and setting the z-index of a value between the other background li's and the anchor link doesn't work. It's something to do with the stacking order of IE7. Bugger. A quick change to use a div tag instead of a list doesn't help so a better solution is needed.

The solution
The final version moves the anchor link outside of the div and uses CSS to position it back over the its old parent. Although hacky, this fixes the z-index issue but now the css hover doesn't work as the div is covered by the anchor. An extra hover event is required on the anchor to find the div before it and add and remove a hover class to change the background image.

JavaScript

 
$(function() {
   var $menu   = $("#slidingMenu");
   var $moving = $('
<div></div>
 
').addClass('move').css({top:'0px'});
   $menu.append($moving)
      .find('div').each(function(){
             $(this).find('span')
                    .insertAfter($(this))
                    .bind('click',function(){
                        var $elem = $(this);
                        var i = $elem.attr('id').substr(2);
                        $moving.stop(true).animate({
                           top : ((i-1) * 78)+'px'
                        }, 400);
                        $('#slideyContent').stop(true).animate({
                           top : -((i-1)*233)+'px'
                        },400);
                     })
                     .hover(function(){ $(this).prev().addClass('hover'); },
                            function(){ $(this).prev().removeClass('hover');
                     });
        });
});
 

Demo

Here is a working, un-skinned demo of the JavaScript Elevator.