如何停止移動按鈕

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>