如何在向上方向切換一個div

Question

我正在製作一個迷你菜單，並且使用了引導切換來創建它。我想要的是迷你菜單應該向上而不是向下切換。我發佈了我的代碼。如果這可以用不同的方法實現，請告訴。

.mini-menu 
 
{ 
 
    position: absolute; 
 
    background-color: white; 
 
    border: 1px solid lightgrey; 
 
    padding-top: 15px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    padding-bottom: 15px; 
 
    margin-left: -200px; 
 
    width: 200px; 
 
} 
 

 
.button-carrier 
 
{ 
 
    position: fixed; 
 
    top: 85%; 
 
    left: 75%; 
 
} 
 
.button-round { 
 
    border: none; 
 
    cursor: pointer; 
 
    color: white; 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 50%; 
 
    font-size: 22px; 
 
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .4); 
 
    background: #2196F3; 
 
} 
 

 
.button-round { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.button-round:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 5px; 
 
    height: 5px; 
 
    background: rgba(255, 255, 255, .5); 
 
    opacity: 0; 
 
    border-radius: 100%; 
 
    transform: scale(1, 1) translate(-50%); 
 
    transform-origin: 50% 50%; 
 
} 
 

 
@keyframes ripple { 
 
    0% { 
 
    transform: scale(0, 0); 
 
    opacity: 1; 
 
    } 
 
    20% { 
 
    transform: scale(25, 25); 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: scale(40, 40); 
 
    } 
 
} 
 

 
.button-round:focus:not(:active)::after { 
 
    animation: ripple 1s ease-out; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="button-carrier"> 
 
    <div class="mini-menu collapse"> 
 
     <a href="#" >HOME</a> 
 
     <br /> 
 
     <a href="#" >HOME</a> 
 
     <a href="#" >HOME</a> 
 
     <br /> 
 
    <a href="#" >HOME</a> 
 
    <a href="#" >HOME</a> 
 
     <br /> 
 
    <a href="#" >HOME</a> 
 
    </div> 
 
     <button class="button-round" data-toggle="collapse" data-target=".mini-menu"><i class="fa fa-bars"></i></button> 
 
    </div>

Answer 1

也許你希望是這樣的。

.mini-menu { 
 
    right: 100%; 
 
    width: 200px; 
 
    bottom: 0; 
 
    position: absolute; 
 
} 
 

 
.mini-menu.collapsing { 
 
    position: absolute; 
 
} 
 

 
.mini-menu .inner { 
 
    padding-top: 15px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    padding-bottom: 15px; 
 
    background-color: white; 
 
    border: 1px solid lightgrey; 
 
} 
 

 
.button-carrier { 
 
    position: fixed; 
 
    bottom: 15%; 
 
    left: 75%; 
 
} 
 

 
.button-round { 
 
    border: none; 
 
    cursor: pointer; 
 
    color: white; 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 50%; 
 
    font-size: 22px; 
 
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .4); 
 
    background: #2196F3; 
 
} 
 

 
.button-round { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.button-round:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 5px; 
 
    height: 5px; 
 
    background: rgba(255, 255, 255, .5); 
 
    opacity: 0; 
 
    border-radius: 100%; 
 
    transform: scale(1, 1) translate(-50%); 
 
    transform-origin: 50% 50%; 
 
} 
 

 
@keyframes ripple { 
 
    0% { 
 
    transform: scale(0, 0); 
 
    opacity: 1; 
 
    } 
 
    20% { 
 
    transform: scale(25, 25); 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    transform: scale(40, 40); 
 
    } 
 
} 
 

 
.button-round:focus:not(:active)::after { 
 
    animation: ripple 1s ease-out; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="button-carrier "> 
 
    <div class="mini-menu collapse"> 
 
    <div class="inner"> 
 
     <a href="#">HOME</a> 
 
     <br /> 
 
     <a href="#">HOME</a> 
 
     <a href="#">HOME</a> 
 
     <br /> 
 
     <a href="#">HOME</a> 
 
     <a href="#">HOME</a> 
 
     <br /> 
 
     <a href="#">HOME</a> 
 
    </div> 
 
    </div> 
 
    <button class="button-round" data-toggle="collapse" data-target=".mini-menu"><i class="fa fa-bars"></i></button> 
 
</div>