如何停止移动按钮

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>