• 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

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
291 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 (121,300 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ź 201 wizyt
–1 głos
1 odpowiedź 139 wizyt
pytanie zadane 22 czerwca 2018 w JavaScript przez Laik1004 Nowicjusz (160 p.)
0 głosów
1 odpowiedź 149 wizyt
pytanie zadane 10 września 2016 w JavaScript przez bugs55 Obywatel (1,090 p.)

89,777 zapytań

138,385 odpowiedzi

309,501 komentarzy

59,681 pasjonatów

Advent of Code 2022

Top 15 użytkowników

  1. 1088p. - Argeento
  2. 1032p. - nidomika
  3. 1024p. - rucin93
  4. 1020p. - Michal Drewniak
  5. 1014p. - Łukasz Eckert
  6. 1006p. - Mikbac
  7. 988p. - TheLukaszNs
  8. 963p. - JMazurkiewicz
  9. 960p. - adrian17
  10. 945p. - Jarosław Roszyk
  11. 941p. - Hubert Chęciński
  12. 920p. - Mawrok
  13. 914p. - overcq
  14. 859p. - ssynowiec
  15. 848p. - Adam Salamon
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...