Table of Contents

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:

Hover with intention

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." 2) 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.

Update 2011-08-04 In the meantime I came up with an approach which I think is a bit simpler and more robust. It seems to work better than what I presented here.

HTML

The HTML code for the panel is simple.

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

CSS

#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.

Javascript

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

<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
    });
});

Demo

Disclaimer

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.

1)
However, this can be easily avoided by putting the contents of the panel into a div with fixed width, just like I did in Vertical, sliding panel with auto-hide v2.
2)
Quoted from the hoverIntent web page.
3)
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.