Question

我有一个浮动操作菜单（JQuery + CSS）：

HTML：

def reverse(m:Map[Int,Set[String]])={
  var rm = scala.collection.mutable.Map[String,Set[Int]]()
  m.keySet foreach { k=>
      m(k) foreach { e =>
         rm.update(e,(rm.getOrElse(e, Set()) + k))                                                        
      }
  }
  rm
}

Javascript / JQuery：

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div id="hamburger" class="waves-effect waves-light">
    <div id="wrapper">
      <span class="icon-bar" id="one"></span>
      <span class="icon-bar" id="two"></span>
      <span class="icon-bar" id="thr"></span>
    </div>
  </div>

  <div id="btnExit" class="hamburger-nav">
    <span class="floatingmenu_label">Exit</span>
    <img style="width: 24px; height: 24px;" src="https://www.iconfinder.com/data/icons/small-n-flat/24/pencil-128.png">
  </div>
  <div id="btnUsers" class="hamburger-nav">
    <span class="floatingmenu_label">Users</span>
     <img style="width: 24px; height: 24px;" src="https://www.iconfinder.com/data/icons/small-n-flat/24/pencil-128.png">
  </div>
  <div id="btnJobs" class="hamburger-nav">
    <div class="floatingmenu_label">Jobs</div>
     <img style="width: 24px; height: 24px;" src="https://www.iconfinder.com/data/icons/small-n-flat/24/pencil-128.png">
  </div>
  <div id="btnFilters" class="hamburger-nav">
    <span class="floatingmenu_label">Filters</span>
     <img style="width: 24px; height: 24px;" src="https://www.iconfinder.com/data/icons/small-n-flat/24/pencil-128.png">
  </div>
  <div id="btnReports" class="hamburger-nav">
    <span class="floatingmenu_label">Reports</span>
     <img style="width: 24px; height: 24px;" src="https://www.iconfinder.com/data/icons/small-n-flat/24/pencil-128.png">
  </div>

CSS：

  $('#hamburger').click(function() {
    $('#hamburger').toggleClass('show');
    $('.hamburger-nav').toggleClass('show');
  });

到目前为止一切正常。

但是当我添加bootstrap.css css时，它会搞砸了。

.floatingmenu_label {
  width: 150px;
  text-align: right;
  padding-right: 10px;
  position: absolute;
  left: -160px;
  color: #454545;
  white-space: nowrap;
}

#btnExit.show {
  -webkit-transform: translateY(-125%);
  transform: translateY(-125%);
}

#btnUsers.show {
  -webkit-transform: translateY(-250%);
  transform: translateY(-250%);
}

#btnJobs.show {
  -webkit-transform: translateY(-375%);
  transform: translateY(-375%);
}

#btnReports.show {
  -webkit-transform: translateY(-500%);
  transform: translateY(-500%);
}

#btnFilters.show {
  -webkit-transform: translateY(-625%);
  transform: translateY(-625%);
}

#hamburger {
  z-index: 10;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  bottom: 10%;
  right: 5%;
  background-color: #FF5722;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 2px 2px 10px rgba(10, 10, 10, 0.3);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#hamburger .icon-bar {
  display: block;
  background-color: #FFFFFF;
  width: 22px;
  height: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#hamburger .icon-bar+.icon-bar {
  margin-top: 4px;
}

.hamburger-nav {
  z-index: 9;
  position: fixed;
  bottom: 10.5%;
  right: 5.5%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #f9f9f9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  visibilty: hidden;
  opacity: 0;
  box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.48);
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

#hamburger.show {
  box-shadow: 7px 7px 10px 0px rgba(0, 0, 0, 0.48);
}

#hamburger.show #wrapper {
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

#hamburger.show #one {
  -webkit-transform: translateY(6px) rotateZ(45deg) scaleX(0.9);
  transform: translateY(6px) rotateZ(45deg) scaleX(0.9);
}

#hamburger.show #two {
  opacity: 0;
}

#hamburger.show #thr {
  -webkit-transform: translateY(-6px) rotateZ(-45deg) scaleX(0.9);
  transform: translateY(-6px) rotateZ(-45deg) scaleX(0.9);
}

.hamburger-nav.show {
  visibility: visible;
  opacity: 1;
}

这里是一个小提琴，但它现在有效。要使其正常工作，只需删除左侧的bootstrap.min.css：Fiddle

在同时包含bootstrap.css的同时，是否可以帮助我完成这项工作？

提前致谢！

工作：

不工作：

编辑：终于找到了罪魁祸首：

在bootstrap.css中有

这个类：

<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.min.css" type="text/css">

超越了我的班级。我只是重命名了我的课程，一切都恢复正常。在Chrome中，右键单击元素（按钮） - ＆gt;检查元素 - ＆gt; styles选项卡显示影响所选元素的每个类。非常有用！

Answer 1

我认为在Bootstrap CSS上面编写自定义CSS总是好的做法。

有几种方法可以解决这个问题，无论是纯粹通过CSS还是添加一些HTML包装然后应用CSS。我会给你纯CSS解决方案。

要将子元素相对于父元素居中，请使用

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

如果您将其应用于.hamburger-menu > img和#hamburger > #wrapper，您最终会得到您想要实现的目标。

编辑：与文字标签相同的情况除外，您只想在Y轴而不是X轴上进行变换。

浮动操作菜单不使用Bootstrap CSS

1 个答案: