Untitled

<!DOCTYPE html>

 <html>

 <head>
 <meta charset="UTF-8">
 <title>A Slide In Dashboard</title>

 <link href="../_css/site.css" rel="stylesheet">

 <style>

 #dashboard {

 width: 70px;
 opacity:0.6;

 background-color: rgb(110,138,195);

 padding: 20px 20px 0 20px;

 position: absolute;

 left: -92px;
    z-index: 100;
}

#dashboard img {

margin-bottom: 20px;

order: 1px solid rgb(0,0,0);
}

</style>

<script src="/_js/jquery-1.7.2.min.js">
</script>

<script src="_js/jquery-1.6.3.min.js"></script>


<script src="_js/jquery.easing.1.3.js"></script>


<script src="_js/jquery.color.js"></script>


<script>

$(document).ready(function()
{


$('#dashboard').hover(
 function(){

 $(this).stop().animate({ opacity:1.0}, 800);
 {
   left: '0' ,
   backgroundColor: 'rgb(255,255,255)'


 }
  500,
  'easeInSine'
  ); // end animate
 },


function() {
   $(this).stop().animate({ opacity:0.3 }, 800;
   {
      left: '-92px'
      backgroundColor: 'rgb(110,138,195)'
},
1500,
 'easeOutBounce'
  ); // end animate
    }
  ); // end hover
 }); // end ready

</script>

</head>

<body>

<div class="wrapper">
<div class="header">

<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p>
</div>

<div id="dashboard">
<img src="../_images/small/blue_h.jpg" width="70" height="70" alt="blue">
<img src="../_images/small/green_h.jpg" width="70" height="70" alt="green">
<img src="../_images/small/orange_h.jpg" width="70" height="70" alt="orange">

<img src="../_images/small/purple_h.jpg" width="70" height="70" alt="purple">
<img src="../_images/small/red_h.jpg" width="70" height="70" alt="red">
<img src="../_images/small/yellow_h.jpg" width="70" height="70" alt="yellow">
</div>

<div class="content">
<div class="main">
<h1>Slide in Dashboard</h1>
<p>Mouse over the blue stripe on the left edge of this page</p>
</div>
</div>
<div class="footer">
<p>JavaScript & jQuery: The Missing Manual, by <a href="http://sawmac.com/">David      McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
</div>
</div>

</body>

</html>