创建类似于Google地图左侧导航的滑动面板

Question

我需要编写一个与Google Map完全相同的左侧面板

例如，当我按箭头时，它将最小化左侧面板。

因此，当我点击箭头时，它会再次出现，我的内容将向右移动。

任何帮助？

Answer 1

实施起来非常简单。当然，我的实现将是丑陋的，但你只需要改变CSS。完整代码在这里：http://jsfiddle.net/YDukt/ HTML如下所示：

<div id='leftSide'>
    Something here from google
</div>
<div id='click'>
    >
</div>

使用Javascript：

$('#click').click(function()
{
    $("#leftSide").animate({width:'toggle'},500);       
});

丑陋的CSS：

#leftSide
{
     height: 500px;
     width: 200px;
     background: black;
     float: left;
     display: none;    
     color: white;
     font-size: xx-large;
}
#click
{
     height: 25px;
     width: 25px;
     background: aqua;
     float: left; 
     margin-top: 20px;
}