Table of Contents

Vertical, sliding panel with auto-hide v2

Soon after I wrote about Vertical, sliding panel with auto-hide I had the idea for a more robust version which also works with animations that change the width of the panel such as jQuery's .hide()1)

So, for the fun of trying to figure out how it might work, here is a vertical panel, automatically sliding out of the right side, and disappearing upon a click or after the mouse pointer leaves the panel. Again, mouse movements are monitored by Brian Cherne's hoverIntent function which builds on the jQuery Javascript framework.

HTML

The main difference compared to my previous approach is that we basically use only 1 div (#rightPanel), but in order to avoid weird wrapping during animations we put all actual content of the panel into a second div (#rightPanelcontent) with a fixed width (see CSS).

<div id="rightPanel">
    <div id="rightPanelcontent">
        <h2>Right Panel</h2>
    </div>
</div>

CSS

#rightPanel{ border-left:1.3em solid white; width:0px; right:0; position:fixed; top:0px;
   height:100%; vertical-align:top; border-right:5px solid #800; color:black; 
   background-color:white; padding:0; overflow:hidden; }
 
#rightPanelcontent{ width:166px; padding: 2px; }
 
#rightPanel.expanded { border-left:1px solid #800; padding:5px; }

border-left:1.3em solid white; sets the width of the hot spot area which triggers the "opening" of the panel.

Javascript

We need to include jQuery and hoverIntent()2).

<script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript"
   src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>

And finally the Javascript to make things slide :-)

function collapsePanel() {
    if (rightpanel) {
        rightpanel = false;
        $('html').unbind('click');
        $('#rightPanel').animate({width: '0px'}, 666,
            function() {$('#rightPanel').toggleClass('expanded');}
        )
        $('#rightPanel').click(expandPanel);
    }
};
 
function expandPanel() {
    if (! (rightpanel)) {
        rightpanel = true;
        $('#rightPanel').unbind('click');
        $('#rightPanel').toggleClass('expanded');
        $('#rightPanel').animate({width: '180px'}, 666);
        $('html').click(collapsePanel);
    }
    return false;
};
 
var rightpanel = false;
 
$(document).ready(function() {
    /* expandPanel on click - good for mobile devices without mouse */
    $('#rightPanel').click(expandPanel);
    /* show+hide panel on mouse hover with intention */
    $('#rightPanel').hoverIntent({over: expandPanel,timeout: 700,out: collapsePanel});
});

Demo

Browser support

I quickly checked with the following browsers whether the panel works. Please note that the way the sliding mechanism is coded HTML form input fields (<input type="text"> etc.) are not supported/working because any click anywhere is supposed to hide the panel. Still, one might want to use <select> with a click-n-hold action. This works fine on major browsers.

Working reasonably well

Working somewhat OK

Not working at all

Disclaimer

I am not a programmer and I am not a web designer. There is probably still quite some room for improvement. Besides, it's not fool-proof, nor does it work flawlessly.

1)
Though, to use .show()/.hide() or other effects one probably would have to rewrite parts of the code I am presenting here.
2)
I am not sure if Brian Cherne appreciates hotlinking his code. I am showing it here in this way only to keep things simple. Please use cautiously.