Cześć,
mam taki problem, że nie wiem jak zrobić efekt wysuwania się mini menu, gdy klikniemy na okrągły przycisk, u mnie to jest .bell (nie wiem jak to się nazywa profesjonalnie), umiem tylko zrobić tak, że się on pojawia tzn rośnie od prawego dolnego rogu swojego kontenera. Zrobiłem to za pomocą jquery a gdy chciałem go zrobić za pomocą czystego js'a to nie wyszukuje mi elementu za pomocą atrybutu style w celu dodania display: flex dla kontenera, bo bez tego divy, w których są umieszczone ikonki układają się pod sobą. Dodatkowo chciałem zrobić taki efekt, że gdy klikniemy w dzwoneczek to lewy border nie jest już półokręgiem (nie wiem jak to fachowo nazwać), wtedy wysuwa się menu i ładnie się z nim komponuje. W tym celu stworzyłem klasę dla .bell, w której umieściłem border-radius: 0 50% 50% 0 jednak w jquery mi nie działa, bo gdy ją dodaje poprzez kliknięcie to dodaje mi do .bell display:none i nie wiem skąd. Sorrka, że pewnie chaotycznie napisałem, ale mam nadzieję, że zrozumiecie mój problem :D
codepen: https://codepen.io/anon/pen/NLLWyb
<body>
<div class="bell"><i class="fas fa-bell rington"></i></div>
<div class="belt">
<div><i class="fas fa-user"></i></div>
<div><i class="fas fa-envelope"></i></div>
<div><i class="fab fa-facebook"></i></div>
<div><i class="fab fa-twitter"></i></div>
</div>
* {
margin: 0;
padding: 0;
}
body {
height: 200vh;
}
.bell {
position: fixed;
width: 50px;
height: 50px;
bottom: 40px;
right: 40px;
background-color: red;
border-radius: 50% 50% 50% 50%;
transition: .3s linear;
box-sizing: border-box;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.rington {
animation: rotate .5s linear infinite alternate-reverse both;
transform-origin: 50% 0;
transition: 1s linear;
}
@keyframes rotate {
0% {
transform: rotate(30deg);
}
100% {
transform: rotate(-30deg);
}
}
.belt {
position: fixed;
bottom: 40px;
right: 89px;
box-sizing: border-box;
display: flex;
width: 15%;
height: 50px;
background-color: #000;
border-radius: 25% 0 0 25%;
z-index: -1;
display: none;
}
.belt.active {
display: block;
}
.belt div {
width: 25%;
height: 50px;
background-color: red;
text-align: center;
line-height: 50px;
font-size: 20px;
}
.belt div:nth-child(1) {
border-radius: 25% 0 0 25%;
}
//jquery
$('.bell').on("click", function () {
$(".belt").toggle("active");
$(".belt").css({
"display": "flex"
})
})
//javascript
// var bell = document.querySelector(".bell");
// var belt = document.querySelector(".belt");
// bell.addEventListener("click", function () {
// belt.classList.toggle("active");
// belt.style.display = "flex";
// })
</script>