• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wysuwające się mini menu i nie działający kod JavaScript

VPS Starter Arubacloud
0 głosów
368 wizyt
pytanie zadane 15 września 2018 w JavaScript przez kameleon Użytkownik (590 p.)

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>

 

3 odpowiedzi

0 głosów
odpowiedź 15 września 2018 przez pablop76 VIP (123,060 p.)
wybrane 15 września 2018 przez kameleon
 
Najlepsza

Najprostsze rozwiązania są najlepsze.

Baza to Twojego problemu mogła by być taka:

<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>
.bell {
position: fixed;
width: 50px;
height: 50px;
bottom: 40px;
right: 40px;
background-color: red;
border-radius: 50%;
transition: .3s linear;
box-sizing: border-box;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.belt {
position: fixed;
bottom: 40px;
box-sizing: border-box;
display: flex;
width: 15%;
height: 50px;
background-color: #000;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
z-index: -1;
right: -300px;
  transition: all 1s;
}

.active {
right: 98px;
}

.borderL{
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
var bell = document.querySelector(".bell");
var belt = document.querySelector(".belt");

bell.addEventListener("click", function () {
belt.classList.toggle("active");
this.classList.toggle("borderL");
});

Element jest przesunięty ujemnym right poza obszar widoku i po kliknięciu na button przywracana jest jego właściwa pozycja.

komentarz 16 września 2018 przez kameleon Użytkownik (590 p.)

Czy o takie coś chodzi? z  tym, że tutaj nie wiem jak zsynchronizować border-radius ze zwijaniem się paska

codepen: https://codepen.io/anon/pen/NLLNyV

komentarz 16 września 2018 przez StOcK Mądrala (6,100 p.)
Do transition dodaj delay.

Transition: 1s linear 2s

Czyli po 2 sekundach przekształci coś z prędkością 1s
komentarz 16 września 2018 przez kameleon Użytkownik (590 p.)
nic to nie da :/
komentarz 16 września 2018 przez StOcK Mądrala (6,100 p.)

Jak to nie działa? https://codepen.io/anon/pen/aaaWYJ

komentarz 16 września 2018 przez kameleon Użytkownik (590 p.)
Źle użyłem transition i działa, dzieki:D
+1 głos
odpowiedź 15 września 2018 przez Grzegorz :> Dyskutant (8,050 p.)

Ja bym to zrobił inaczej, skoro chcesz, by menu wysuwało się od lewej strony dzwoneczka, musisz zanimować szerokość elementu .belt.

Zadeklaruj dla belt:
width:0;
A w jQuery daj:
$('.belt').animate({
width: '15%'
}, 500);

Jest to tylko pogląd jak ja bym to zrobił :^)

PS. Nie wiem dlaczego zadeklarowałeś dwa razy display dla elementu .belt:
 

.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;
       }

Ah, jeszcze taka wskazówka co do border-radius :^)

Jeśli chcesz by obiekt był okręgiem, wystarczy, że zadeklarujesz:
border-radius: 50%;

Pozdrawiam :^)
 

komentarz 15 września 2018 przez kameleon Użytkownik (590 p.)

Z animation w jquery miałem problemy, więc to zrobiłem w css keyframes i się w 50% udało, bo ładnie animacja działa jak się wysuwa pasek ale jak się chowa to po prostu znika i nie mam pomysłu jak to wykombinować aby ładnie sie chował pasek.

  @keyframes move {
            0% {
                width: 0;
                height: 50px;

            }

            100% {
                width: 15%;
                height: 50px;

            }
        }

        .belt.active {
            animation: move .5s linear both;
        }

Zadeklarowałem dwa razy display po to aby ładnie ten pasek najpierw zrobić  i już później nie usunąłem flexa :p

komentarz 15 września 2018 przez Grzegorz :> Dyskutant (8,050 p.)

Nie wiem czy o to Ci chodziło, ale zrobiłem takie cos:
do css dodalem:

.hide {
            animation: hide .5s linear both;
        }

        @keyframes hide {
            0% {
                width: 15%;
            }
            100% {
                width: 0;
            }
        }

a do funkcji dodalem jedną linijke i wygląda tak:

$('.bell').on("click", function() {

            $(".belt").toggleClass("active");
            $('.belt').addClass('hide');
        });


Kod z pewnością nie jest idealny i dałoby się to zrobić inaczej, ale ważne, że działa. A czy działa jak Ty chcesz musisz ocenić sam :^)
 

komentarz 15 września 2018 przez kameleon Użytkownik (590 p.)
A to na pewno będzie działało, bo jak doda się klase hide do belt to później przy wysuwaniu nie będzie się ona gryzła z klasą move?
komentarz 15 września 2018 przez Grzegorz :> Dyskutant (8,050 p.)
Sprawdzilem i dziala o ile nie będziesz klikał przed wykonaniem animacji, bo jak widac, klasa hide 'zakłada' ze animacja wykonala sie prawidlowo. Dlatego tez napisalem ze kod idealny nie jest :^)
komentarz 15 września 2018 przez kameleon Użytkownik (590 p.)
oki, dzięki za pomoc ;)
0 głosów
odpowiedź 15 września 2018 przez StOcK Mądrala (6,100 p.)
edycja 15 września 2018 przez StOcK

Codaj do css klase .bell.active, w nim ustaw border 0 50% 50% 0

A w JS zamist toggle użyj toggleClass

https://codepen.io/anon/pen/EeePRY

komentarz 15 września 2018 przez kameleon Użytkownik (590 p.)
Tak zrobiłem i nie działa, bo po dodaniu klasy .bell.active w stylach liniowych dodaje mi display:none i znika mi caly przycisk z dzwoneczkiem.

Racja, już zaczynam przesiąkać jquery. Ale to nic nie daje. Gdy zmieniam jaki ma być wybrany element - w query selector - na sam div to dopiero mi wyszukuje visual atrybut style. Nawet nie działa, gdy użyję nth-child
komentarz 15 września 2018 przez StOcK Mądrala (6,100 p.)
Ale w JS wywal w ogóle .toggle() bo to ono zmienia atrybut display.

Pokombinuj troszkę: toggleClass(), w css: opacity, visibility oraz transition.

Podobne pytania

0 głosów
1 odpowiedź 223 wizyt
–1 głos
1 odpowiedź 167 wizyt
pytanie zadane 22 czerwca 2018 w JavaScript przez Laik1004 Nowicjusz (160 p.)
0 głosów
1 odpowiedź 175 wizyt
pytanie zadane 10 września 2016 w JavaScript przez bugs55 Obywatel (1,090 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...