0
Ich versuche eine schwimmende Navigationsleiste zu erstellen, die ungefähr 10 Tasten haben würde. Auf einigen Bildschirmen passen sie in alle gut auf einige gehen sie aus. Ich versuche herauszufinden, ob es eine Möglichkeit ist, andere als Medienabfragen zu machen.Größe und Platzierung der Symbole basierend auf der Bildschirmgröße
body{
font-family: 'Roboto';
text-align: center;
background: #f1f1f1;
}
h3{
color: #555;
}
#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: #db4437;
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: 40px;
height: 40px;
border-radius: 50%;
position: fixed;
z-index: 300;
transform: scale(0);
cursor: pointer;
}
.nd1{
background: #d3a411;
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: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;
}<div id="container-floating">
<div class="nd4 nds" data-toggle="tooltip" data-placement="left" data-original-title="[email protected]"><img class="reminder">
<p class="letter">C</p>
</div>
<div class="nd3 nds" data-toggle="tooltip" data-placement="left" data-original-title="Reminder"><img class="reminder" src="//ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/ic_reminders_speeddial_white_24dp.png" /></div>
<div class="nd1 nds" data-toggle="tooltip" data-placement="left" data-original-title="[email protected]"><img class="reminder">
<p class="letter">E</p>
</div>
<div id="floating-button" data-toggle="tooltip" data-placement="left" data-original-title="Create" onclick="newmail()">
<p class="plus">+</p>
<img class="edit" src="http://ssl.gstatic.com/bt/C3341AA7A1A076756462EE2E5CD71C11/1x/bt_compose2_1x.png">
</div>
</div>
Ich würde sagen, "umgekehrt" ist 'javascript' aber Medienabfrage ist viel handlicher. – threeFatCat