Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

Wysuwane menu - kwestia chowania.

jquery

Najlepsza odpowiedź zonic, 30 grudnia 2015 - 21:16

Możesz kombinować z toggleClass();
https://jsfiddle.net/Zonicpl/ya8ph7zn/

Chociaż ja zamiast zmieniać z display:none na display:block polecam zmieniać wysokość lub szerokość. Wtedy mamy efekt wysuwania.

Przejdź do postu


5 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
Snake_

    Nowy użytkownik

  • 18 postów
    • Czas spędzony online: 1d 1h 42m 14s
3
Neutralna

Napisano 30 grudnia 2015 - 18:14

#1

Witajcie,

Stwierdziłem, że potrzebuję do pewnego projektu wysuwanego menu, nie chcę jakichś gotowców z internetu, bo trening czyni mistrza!

Więc przejdę do sedna.

Z racji iż nigdy nie miałem styczności z JS wymodziłem najprostsze kilka linijek:

$(".button").click(function() {	
	$("p").slideToggle("slow");
	var rozwiniete = $("p").addClass("view-display");
	return rozwiniete;	
})

Została mi kwestia chowania, co powinienem dalej zrobić?

 

Takie mini demo: http://snake.xaa.pl/...pdown-menu.html


  • 0

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 30 grudnia 2015 - 21:16   Najlepsza odpowiedź

#2

Możesz kombinować z toggleClass();
https://jsfiddle.net/Zonicpl/ya8ph7zn/

Chociaż ja zamiast zmieniać z display:none na display:block polecam zmieniać wysokość lub szerokość. Wtedy mamy efekt wysuwania.


  • 1

Snake_

    Nowy użytkownik

  • 18 postów
    • Czas spędzony online: 1d 1h 42m 14s
3
Neutralna

Napisano 30 grudnia 2015 - 23:03

#3

Poradziłem sobie ze .slideToggle(); i .hide();, nie mniej jednak dzięki za "lekcję".


Użytkownik Snake_ edytował ten post 30 grudnia 2015 - 23:05

  • 0

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 30 grudnia 2015 - 23:22

#4

hide i show ;)


  • 0

karolgorecki

    Nowy użytkownik

  • 17 postów
    • Czas spędzony online: 18h 15m 56s
15
Dobra

Napisano 04 stycznia 2016 - 19:22

#5

Jeśli nie musisz mieć wspracia dla starszych przeglądarek to lepiej zrobić przez toggleClass.
Animację lepiej zrobić w CSS np. poprzez transform (lepsza wydajność zwłaszcza na mobile).

 

Przykłady http://tympanus.net/...ts/elastic.html


  • 1

unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 05 stycznia 2016 - 08:23

#6

Zdecydowanie lepiej jest tak jak pisze karolgorecki


  • 0

webDeveloper






Podone tematy Collapse


Również z jednym lub większą ilością słów kluczowych: jquery

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych