Question

我有一个按钮，当按下该按钮时，应该在两个方向上展开其背后的元素（.nav，其中包含.work和.contact）。但是，我似乎无法将按钮保持在中心位置。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何停止按钮移动

2 个答案: