在gmaps上方浮动滑动切换菜单

Question

我正在尝试在gmaps之上创建一个浮动菜单而没有任何运气。我可以用css做基本的但是现在我试图使用绝对和固定定位。

HTML     

<div id="toggleSettings"><i class="fa fa-cogs"></i></div>
<div id="toggle"></div>

CSS

#toggle {
  width: 200px;
  height: 130px;
  background-color: #ddd;
}

#toggleSettings {
  position: absolute;
  font-size: 24px;
  background-color: #ddd;
  padding: 8px;
  top: 20px;
  left: 0;
}

的jQuery

$("#toggleSettings").on('click', function() {
  $("#toggle").toggle("slide");
});

这是我的jsfiddle。

以下图像显示了所需的行为。

闭

开放

Answer 1

我认为这可能对你有帮助 - http://jsfiddle.net/16cn9gs9/4/

您尚未定位#toggle div。所以我绝对定位它并添加了两个用于切换的类。

CSS：

#toggle {
  width: 200px;
  height: 130px;
  background-color: #ddd;
  position: absolute;
  top: 20px;
  left: -200px;
}
#toggle.slide1 {
  left: 0px;
}

#toggleSettings {
  position: absolute;
  font-size: 24px;
  background-color: #ddd;
  padding: 8px;
  top: 20px;
  left: 0;
}
#toggleSettings.slide2 {
  left: 200px
}

JS：

$("#toggleSettings").on('click', function() {
  $("#toggle").toggleClass("slide1");
  $("#toggleSettings").toggleClass("slide2");
});

您也可以添加过渡以实现平滑滑动。希望这会有所帮助。