0
私は浮動小数点のナビゲーションバーを取得しようとしているところでは、常に1つのボタンだけを表示し、クリックすると残りの部分が開きます。私はブートストラップの折りたたみと折り畳みショークラスを使用しています。これにより、最初のボタンをクリックすると残りの部分が表示され、もう一度クリックすると、そのボタンの下に他のボタンが表示されないようになります。下はそのコードです。浮動ボタンをHTMLで
#presentation {
width: 480px;
height: 120px;
padding: 20px;
margin: auto;
background: #FFF;
margin-top: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: all 0.3s;
border-radius: 3px;
}
#presentation:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
transition: all 0.3s;
transform: translateZ(10px);
}
#floating-button {
width: 55px;
height: 55px;
border-radius: 50%;
background: gray;
position: fixed;
bottom: 30px;
right: 30px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
}
.plus {
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
animation: plus-out 0.3s;
transition: all 0.3s;
}
#container-floating {
position: fixed;
width: 70px;
height: 70px;
bottom: 30px;
right: 30px;
z-index: 50px;
}
#container-floating:hover {
height: 400px;
width: 90px;
padding: 30px;
}
#container-floating:hover .plus {
animation: plus-in 0.15s linear;
animation-fill-mode: forwards;
}
.edit {
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
display: block;
right: 0;
padding: 0;
opacity: 0;
margin: auto;
line-height: 65px;
transform: rotateZ(-70deg);
transition: all 0.3s;
animation: edit-out 0.3s;
}
#container-floating:hover .edit {
animation: edit-in 0.2s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
@keyframes edit-in {
from {
opacity: 0;
transform: rotateZ(-70deg);
}
to {
opacity: 1;
transform: rotateZ(0deg);
}
}
@keyframes edit-out {
from {
opacity: 1;
transform: rotateZ(0deg);
}
to {
opacity: 0;
transform: rotateZ(-70deg);
}
}
@keyframes plus-in {
from {
opacity: 1;
transform: rotateZ(0deg);
}
to {
opacity: 0;
transform: rotateZ(180deg);
}
}
@keyframes plus-out {
from {
opacity: 0;
transform: rotateZ(180deg);
}
to {
opacity: 1;
transform: rotateZ(0deg);
}
}
.nds {
width: 55px;
height: 55px;
border-radius: 50%;
position: fixed;
z-index: 300;
transform: scale(0);
cursor: pointer;
}
.nd1 {
background: gray;
right: 40px;
bottom: 120px;
/* animation-delay: 0.2s;
animation: bounce-out-nds 0.3s linear;*/
animation-fill-mode: forwards;
}
.nd3 {
background: #3c80f6;
right: 40px;
bottom: 180px;
/* animation-delay: 0.15s;
animation: bounce-out-nds 0.15s linear;*/
animation-fill-mode: forwards;
}
.nd4 {
background: #ba68c8;
right: 40px;
bottom: 240px;
/* animation-delay: 0.1s;
animation: bounce-out-nds 0.1s linear;*/
animation-fill-mode: forwards;
}
.nd5 {
background-image: url('https://lh3.googleusercontent.com/-X-aQXHatDQY/Uy86XLOyEdI/AAAAAAAAAF0/TBEZvkCnLVE/w140-h140-p/fb3a11ae-1fb4-4c31-b2b9-bf0cfa835c27');
background-size: 100%;
right: 40px;
bottom: 300px;
animation-delay: 0.08s;
animation: bounce-out-nds 0.1s linear;
animation-fill-mode: forwards;
}
@keyframes bounce-nds {
from {
opacity: 0;
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes bounce-out-nds {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0);
}
}
#container-floating:checked {
margin-top:0;
opacity:1;
}
#container-floating:hover .nds {
animation: bounce-nds 0.1s linear;
animation-fill-mode: forwards;
}
#container-floating:hover .nd3 {
animation-delay: 0.08s;
}
#container-floating:hover .nd4 {
animation-delay: 0.15s;
}
#container-floating:hover .nd5 {
animation-delay: 0.2s;
}
.letter {
font-size: 23px;
font-family: 'Roboto';
color: white;
position: absolute;
left: 0;
right: 0;
margin: 0;
top: 0;
bottom: 0;
text-align: center;
line-height: 40px;
}
.reminder {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
line-height: 40px;
}
.profile {
border-radius: 50%;
width: 40px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 20px;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="container-floating">
<div id="floatingnav" class="collapse show">
<div class="nd1 nds" data-toggle="tooltip" data-placement="left">
<i id="locateplace" class="fa fa-search fa-stack-1x fa-inverse fa-2x" style="top:12px" ng-click="navMenuController($event);" role="button" tabindex="0"></i>
</div>
<div class="nd3 nds" data-toggle="tooltip" data-placement="left">
<i id="locateplace" class="fa fa-search fa-stack-1x fa-inverse fa-2x" style="top:12px" ng-click="navMenuController($event);" role="button" tabindex="0"></i>
</div>
<div class="nd4 nds" data-toggle="tooltip" data-placement="left">
<i id="locateplace" class="fa fa-search fa-stack-1x fa-inverse fa-2x" style="top:12px" ng-click="navMenuController($event);" role="button" tabindex="0"></i>
</div>
</div>
<div id="floating-button" data-toggle="collapse" data-target="#floatingnav" data-placement="left">
<i id="legend" class="fa fa-tasks fa-stack-1x fa-inverse fa-2x" style="top:12px" role="button" tabindex="0"></i>
</div>
</div>
あなたの問題は何ですか？メインボタンが**クリックされていないときに表示するには、他のボタンが必要です**。あなたが「他のボタンを*表示していない」と言ったら、それは*上の*ですか？または、それらは実際にメインボタンの下に表示されるはずですか？ – kmartin
最初のボタンをクリックすると内側のdivが展開され、他のアイコンが表示されます。最初のアイコンをもう一度クリックすると、divが崩壊するはずです。 – SNT