创建类似于谷歌地图左侧导航的滑动面板[关闭]

Question

我需要编写一个与 Google 地图一模一样的左侧面板

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

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

有什么帮助吗？

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