Search code examples
javascriptjquerymouseeventjquery-events

How do I make my mouse-based slide-out dock?

Here is my current code, http://jsfiddle.net/HRZ3D/2/ with it I have been unable to do the following,

  1. Make the 10px side of the dock appear upon mouseover to an area 10px wide starting at the side of the window
  2. Make that edge of the dock clickable so as to make the dock's content then appear afterwards, or otherwise disappear if the mouse moves away
  3. Make the docks content then disappear again, once the mouse has re-clicked the dock's edge.
  4. If I can get all this to work, I hope to be able to animate it in a way that the dock looks to actually slide out of the side of the screen. I don't know why my current code is incapable of at least doing the first three things in that sequence and would greatly appreciate help with this.
Solution

  • I updated the CSS and modified the jQuery.

    See: http://jsfiddle.net/Kai/LrsGc/

    Hopefully that gets you close enough to where you need to be. :)