Vertical, sliding panel with auto-hide

The template "red" as distributed by LionWiki features a vertical panel on the right side which appears when the mouse is moved close to the red bar on the very right. It works with only CSS code and basically uses :hover to make the panel appear.

#rightPanel { border-left:15px solid white; width:5px; right:0px; position:fixed; height:100%; 
   top:0px; overflow:hidden; vertical-align:top; background-color:#CC3333; color:#CC3333; }
 
#rightPanel:hover { width:180px; border-left:1px solid #CC3333; background-color: white; }

Here, border-left:15px creates the "hot" area. When the mouse pointer is moved over it the :hover triggers and shows the full #rightPanel. I don't know of any on-line demo page but one can see it in action at http://jsfiddle.net/uLGut/.

This approach is a neat idea. However, I wanted to avoid 2 shortcomings:

• It uses width to make the panel "disappear". This effectively squeezes all content to the width of a few pixels, leading to all sorts of weird behavior.¹⁾
• The :hover always triggers. Even if the mouse pointer is only quickly moved over the hot spot area the panel will show and hide. This is particularly annoying since the panel is on the right side where e.g. the scroll bars are.

My approach uses the jQuery Javascript framework and Brian Cherne's hoverIntent function (which extends jQuery).

.hoverIntent() "works like (and was derived from) jQuery's built-in hover. However, instead of immediately calling the onMouseOver function, it waits until the user's mouse slows down enough before making the call." ²⁾ With ".hoverIntent()" the panel will be shown only when the mouse pointer is moved to hot spot area and stays there.

Since we are already using Javascript and jQuery, we can also use jQuery's .fadeIn() and .fadeOut() to animate the panel. Besides showing a cool effect this has the advantage that the width of the panel is not changed when it slides in or out.

The HTML code for the panel is simple.

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

#rightPanel,#rightPanelHandle { position:fixed; right:0; height:100%; top:0px; vertical-align:top; }
 
#rightPanelHandle{ border-left:1.3em solid white; width:5px;
   background-color:#800; color:#800; padding:0px;  }
 
#rightPanel{ width:180px; border-left:1px solid #800; 
   background-color:#eee; padding:5px 5px 5px 10px; display: none; }

Here, again, border-left:1.3em solid white; sets the width of the hot spot area.

We need to include jQuery and hoverIntent()³⁾.

<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 expandPanel() {
    $('#rightPanelHandle').toggle(false);
    $('#rightPanel').fadeIn('slow');
    /* hide the panel also on any click */
    $('html').click(collapsePanel);
};
 
function collapsePanel() {
    $('#rightPanelHandle').toggle(true);
    $('#rightPanel').fadeOut('slow');
    $('html').unbind('click');
};
 
$(document).ready(function() {
    /* expandPanel on click, too - good for mobile devices without mouse */
    $('#rightPanelHandle').click(expandPanel);
    /* show panel on mouse hover */
    $('#rightPanelHandle').hoverIntent({
        over: expandPanel,
        timeout: 700,
        out: function() {return true;}
    });
    /* hide panel when leaving panel */
    $('#rightPanel').hoverIntent({
        over: function() {return true;},
        timeout: 700,
        out: collapsePanel
    });
});

• http://jsfiddle.net/YpPwm/10/

I am not a programmer and I am not a web designer. There is probably quite some room for improvement. Besides, it's not fool-proof, nor does it work flawlessly. Browsers of mobile devices are known to act strangely.