如何停止按钮移动

Question

我有一个按钮，当按下时，应该在两个方向上扩展它背后的元素(.nav，其中包含.work和.contact)。但是，我好像不能把按钮放在中间。

$(function() {
  var nav = $('.nav');
  var button = $('.nav button');
  button.on('click', function(){
    nav.toggleClass('active');
    if(nav.hasClass('active'))
      button.text('');
    else
      button.text('');
  });
});

html {
  background: #f1f1f1;
}
.nav {
  display: block;
  margin: auto;
  margin-top: 80px;
  margin-bottom: 200px;
  background: #ccc;
  color: black;
  text-align: center;
  width: 350px;
  height: 330px;
  transition: width 0.5s;
}
.nav.active {
  width: 1000px;
  transition: width 0.5s;
}
.navigation button {
  position: absolute;
  width: 350px;
  Height: 350px;
  margin: 0 auto;
  display: block;
  background-color: #2e0513!important;
  background: url(TransplantAltFontbackgroundvector.png) 12px 15px;
  background-repeat: no-repeat;
  background-size: 325px 325px;
  border: none;
  transition: 0.5s ease-in-out;
}
.navigation.active button {
  transform: scale(1.1);
  transition: 0.5s ease-in-out;
}
.navigation:hover button {
  box-shadow: 0px 0px 20px black;
  transform: scale(1.01);
  transition: 0.1s ease-in-out;
}
.navigation.active:hover button {
  box-shadow: none!important;
  transform: scale(1.1)!important;
  transition: 0.5s ease-in-out;
}
.navigation button img {
  position: relative;
  right: 30px;
  bottom: 40px;
}
.work,
.contact {
  position: relative;
  visibility: hidden;
}
.work a {
  font-family: arapey;
  font-size: 30px;
  font-style: italic;
  text-decoration: none;
}
.contact a {
  font-family: arapey;
  font-size: 30px;
  font-style: italic;
  text-decoration: none;
}
.nav.active > .work {
  visibility: visible!important;
  display: table;
  margin: auto;
  position: relative;
  float: left;
  left: 125px;
  top: 150px;
}
.nav.active > .contact {
  visibility: visible!important;
  display: table;
  margin: auto;
  position: relative;
  float: right;
  right: 125px;
  top: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <div class="nav">
    <button>
    </button>
    <div class="work">
      <A HREF="#work">work</A>
    </div>
    <div class="contact">
      <A HREF="#contact">contact</A>
    </div>
  </div>
</div>

Answer 1

设置导航栏样式为position: relative。然后，将一个类(或者只是添加样式，应该也可以)切换到执行以下操作的按钮:

button.my-pressed-class {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

这应该保持它在中间。

编辑:请记住，您已经在悬停按钮上设置了转换。只是，当按钮具有上述类时，将translateX添加到悬停，以避免它在悬停时四处移动。

Answer 2

添加。navigation的相对位置和。nav的绝对位置的左值

$(function() {
  var nav = $('.nav');
  var button = $('.nav button');
  button.on('click', function(){
    nav.toggleClass('active');
    if(nav.hasClass('active'))
      button.text('');
    else
      button.text('');
  });
});

html {
  background: #f1f1f1;
}
.navigation {
   position: relative;
}
.nav {
  display: block;
  margin: auto;
  margin-top: 80px;
  margin-bottom: 200px;
  background: #ccc;
  color: black;
  text-align: center;
  width: 350px;
  height: 330px;
  transition: width 0.5s;
  position: absolute;
  left: 100px;
}
.nav.active {
  width: 1000px;
  transition: width 0.5s;
}
.navigation button {
  position: absolute;
  width: 350px;
  Height: 350px;
  margin: 0 auto;
  display: block;
  background-color: #2e0513!important;
  background: url(TransplantAltFontbackgroundvector.png) 12px 15px;
  background-repeat: no-repeat;
  background-size: 325px 325px;
  border: none;
  transition: 0.5s ease-in-out;
}
.navigation.active button {
  transform: scale(1.1);
  transition: 0.5s ease-in-out;
}
.navigation:hover button {
  box-shadow: 0px 0px 20px black;
  transform: scale(1.01);
  transition: 0.1s ease-in-out;
}
.navigation.active:hover button {
  box-shadow: none!important;
  transform: scale(1.1)!important;
  transition: 0.5s ease-in-out;
}
.navigation button img {
  position: relative;
  right: 30px;
  bottom: 40px;
}
.work,
.contact {
  position: relative;
  visibility: hidden;
}
.work a {
  font-family: arapey;
  font-size: 30px;
  font-style: italic;
  text-decoration: none;
}
.contact a {
  font-family: arapey;
  font-size: 30px;
  font-style: italic;
  text-decoration: none;
}
.nav.active > .work {
  visibility: visible!important;
  display: table;
  margin: auto;
  position: relative;
  float: left;
  left: 125px;
  top: 150px;
}
.nav.active > .contact {
  visibility: visible!important;
  display: table;
  margin: auto;
  position: relative;
  float: right;
  right: 125px;
  top: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <div class="nav">
    <button>
    </button>
    <div class="work">
      <A HREF="#work">work</A>
    </div>
    <div class="contact">
      <A HREF="#contact">contact</A>
    </div>
  </div>
</div>