0
플로팅 내비게이션 막대는 항상 하나의 버튼 만 표시하고 클릭하면 나머지 버튼이 열리는 곳에서 수행하려고합니다. 부트 스트랩 붕괴 및 붕괴 쇼 클래스를 사용하고 있습니다. 이걸로 첫 번째 버튼을 클릭하면 휴식을 표시하고 다시 클릭하면 최소화해야하고 그 아래에있는 다른 버튼을 표시하지 않는 것처럼 작동해야합니다. 아래 코드가 있습니다.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