So I am working on a html slide out to move a form off screen while it is not needed. So far I have it sliding out while the mouse is over it. I would like to change it over to a toggle of some sort in the future.
HTML Code:
<div id="navigation"> <div class="home"> <div id="foo"> <img id="toggleTab" src="images/show.gif"> <table> <tr> <td collspan="2">Test form</td> </tr> <tr> <td>data</td> <td><input type="text" id="test" name="test"></td> </tr> <tr> <td>Start date:</td> <td><input type="date" id="test" name="test"></td> </tr> <tr> <td>End date:</td> <td><input type="date" id="test2" name="test2"></td> </tr> </table> </div> </div> </div>
Javascript/Jquery Code:
$(function() { $('#navigation #foo').parent().stop().animate({'marginLeft':'-229px'},200); $('#navigation > .home').hover( function () { $('#foo',$(this)).parent().stop().animate({'marginLeft':'0px'},200); }, function () { $('#foo',$(this)).parent().stop().animate({'marginLeft':'-229px'},20 } ); });
And the CSS:
body { padding:0px; margin:0px; } #navigation { position:fixed; top:0px; left:0px; width:0px; outline:1px dotted red; z-index:100; } .home { position:absolute; } #toggleTab { position:absolute; top:0px; left:229px; z-index:99; } table { background-color:#CCCCCC; z-index:100; } td { white-space:nowrap; }