JavaScript menu rozwija submenu i submenu rozwija submenu.

pytanie zadane 15 lutego 2016 w JavaScript przez uRTLy Bywalec (2,420 p.)

witam chciałbym zrobic tak aby po najechaniu na przycisk który w sumie jest divem bylo cos takiego

    || PRZYCISK ||

ZALOGUJ || ZAREJESTRUJ     // i po najechaniu kolejno na zaloguj lub zarejestruj wysuwaja sie inputy.

LOGIN   ||     LOGIN_rej

HASLO ||    HASLO_rej

BUTTON_logowania || EMAIL_rej

i tak dalej co tam jeszcze sobie zazycze w tym rejestrowaniu. hmm i nie wiem w sumie jak to zrobic, potrzebowalbym aby sie przykleilo do lewej krawedzi tego diva no i jakos konkretnie to zakodowac zeby pierońsko nie znikało. Macie jakies pomysly/wskazówki?

tak, ogladalem pana Zelenta i tak wiem co to hover/mousover.

5 odpowiedzi

odpowiedź 15 lutego 2016 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 15 lutego 2016 przez uRTLy

Najlepsza

Będzie Ci potrzebny EventListener reagujacy na 'mouseover':

https://developer.mozilla.org/en-US/docs/Web/Events

W HTML sobie utwórz wszystkie te menusy i ustaw tam gdzie mają być poprzez CSS. Następnie wszystkie submenusy ukryj (w CSS 'display: none'). I w EventListenerze po najechaniu na odpowiedni element menu możesz wybrać jedną z dwóch opcji:

1. W JS ustawiać 'display: block' (lub inline-block, w zależności jakiego konkretnego zachowania oczekujesz)

2. W JS dodawać utworzoną w CSS klasę, która ma zapisany atrybut 'display: block' (lub inline-block)

Gdy zabierzesz myszkę z określonych elementów, to musisz usunąć odpowiadające im EventListenery (bo, gdy najedziesz na element ponownie, to stworzy się kolejny Listener, a to nie jest dobre). Poza tym, musisz zrobić EventListenery reagujące na zdarzenie 'mouseout' - w nich ustaw, że dany element ma znikać (ustaw 'display: none' lub usuń klasę CSS, która pokazuje dany element).

Jeśli chcesz aby to było animowane (nie takie 0/1, czyli ukryj/pokaż), to albo zaprzęgnij sobie jQuery (aby użyć m.in: fadeIn/fadeOut), albo próbuj w JS robić przemieszczanie się DIVa z położenia bazowego do położenia, w którym chcesz aby ten DIV ostatecznie się znalazł. Do tego odpowiednie zapisy w CSS dla jakiejś animacji.

komentarz 15 lutego 2016 przez Comandeer Guru (601,570 p.)

Wszystko, o czym piszesz, można zrobić w CSS (transition). Poza tym: raczej powinno zmieniać się stan elementu (klasę) niż bawić bezpośrednio stylami przez JS.

odpowiedź 15 lutego 2016 przez Schizohatter Nałogowiec (39,600 p.)

Oczywiście można to zrobić w samym CSS. I powinno. Jestem na telefonie i nie chce dużo pisać, więc po prostu wpisz w Google "css submenu" i znajdziesz mnóstwo przykładów.

komentarz 15 lutego 2016 przez Comandeer Guru (601,570 p.)

Np. tutaj jest fajnie opisane: http://www.forumweb.pl/porady-i-tutoriale-www/css-menu-rozwijane,48799

komentarz 15 lutego 2016 przez uRTLy Bywalec (2,420 p.)

no myslalem ze trzeba w jquery bo pod hoverem na tym przycisku mam poprostu animacje przycisku zmienia kolory i takie tam pierdoły :)

komentarz 15 lutego 2016 przez Comandeer Guru (601,570 p.)

Ale tutaj nie ma nic nadzwyczajnego. Ładnie ostylowane :hover z CSS i nie trzeba ani linijki JS.

komentarz 15 lutego 2016 przez uRTLy Bywalec (2,420 p.)

hmm wedlug tego poradnika wszystko jest w pionowo..wiesz moze ktorej wlasciwosci css uzyc zeby wszystkie nastepne submenu i szly z prawej przycisku ?? daje float right ale tylko troche przesuwa , a nie jest przyklejone do prawej PRZYCISKU .

komentarz 15 lutego 2016 przez Comandeer Guru (601,570 p.)

Mozna pobawić się pozycjonowaniem i przesunąć na prawo przez left: 100%.

komentarz 15 lutego 2016 przez Czort Nałogowiec (32,500 p.)

Trzeba też pamiętać, że na urządzeniach dotykowych :hover nie chce działać, także minimum js się przyda.

komentarz 15 lutego 2016 przez uRTLy Bywalec (2,420 p.)

dzięki wielkie Comandeer już to mam :D tylko dziwi mnie czemu musze w top i left wpisywać minusowe wartosci zeby szlo do góry:o czy np top:100% to 100%: od topa w dół? w każdy razie już drugi raz mnie uratowałeś:)

komentarz 15 lutego 2016 przez Comandeer Guru (601,570 p.)

@Czort :hover tam działa albo nie – loteria. Ale fakt, dla ekranów dotykowych można dorzucić jakiś mały skrypcik JS.

czy np top:100% to 100%: od topa w dół?

Tak.

komentarz 16 lutego 2016 przez Schizohatter Nałogowiec (39,600 p.)

Dla ekranów dotykowych można dać :target, aczkolwiek pojawi się problem przy wielopoziomowym menu - wtedy przydałoby się już użyć :has z "selectors level 4" lub ekwiwalentu w JS (jQ? $("selector:not(> child:target)").

Niemniej racja - warto napisać linijkę JS, ale też tylko do przypinania klasy "expanded" i nic więcej.

odpowiedź 15 lutego 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

odpowiedź 15 lutego 2016 przez shimizu Obywatel (1,650 p.)
edycja 15 lutego 2016 przez shimizu

odpowiedź 15 lutego 2016 przez gab123 Mądrala (5,230 p.)

Można to zrobić za pomocą Jquery i CSS. Elementow które maja się rozkladac ustawić w css display:none ;

Potem w jquery dac taka linjke

('#zaloguj').mouseenter(function(){
$('#login').css('display:block');
$('#lhaslo').css('display:block');
});
('#zaloguj').mouseoutr(function(){
$('#login').css('display:none);
$('#lhaslo').css('display:none');
});

Mam nadzieje ze pomoglam

komentarz 15 lutego 2016 przez Czort Nałogowiec (32,500 p.)

Do czegoś takiego ładować całe jquery to lekkie przegięcie.

komentarz 15 lutego 2016 przez gab123 Mądrala (5,230 p.)
edycja 15 lutego 2016 przez gab123

Być morze ale zawsze będzie to wymowka by pouczyć się jquery .Po za tym można to tez zrobić z samym javascriptem.

komentarz 15 lutego 2016 przez Comandeer Guru (601,570 p.)

I właśnie tak powstają przeinżynierowane rozwiązania, gdzie do prostego efektu zaciągane jest 6 libów w JS, bo przecież można…

Takie coś można machnąć w samym CSS, jQuery jest typową armatą na muchę.

komentarz 15 lutego 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

Powiem coś na temat JQUERY, taka krótka anegdotka. W nd pisał do mnie kumpel robił sobie losowe kafelki i użwał fullscreen.js czy jakoś tak. Oczywiście on nie ma zielonego pojęcia o frontcie, więc użył BOOTSTRAP i JQUERY. I pisał do mnie, jak jest classList, jak się dodaje atrybuty etc. Oczywiście wszystko JQUERY. Nie miałem o tym zielonego pojęcia. Jednakże, szybkie wpisanie np"google classList JQUERY", oddawało odpowiedż na moje pytanie, zwracając dokumentacje JQUERY. Jaki jest z tego morał? Jeżeli znasz czysty JS, to odnalezienie odpowiedzi nie sprawi problemu. Gdy jednak nie znasz, to już może stanowić problem. Oczywiście przy innych frameworkach (np:node.JS), wyższa reguła się nie sprawdza. Dlatego zawsze mnie bawi pytanie na rozmowach (Zna pan JQUERY? Tak, znam. Nie używam lub wyjątkowych sytuacjach używam) . Pytanie: Jakie ma pan w tym doświadczenie, pozostawie bez odpowiedzi.

2. Jeżeli mamy możliwością manipulacje klasą czyli: add.Class, nie używajmy fadeIn i fadeOut bo potem widzę taki piękny style, liczący opacity :D.

komentarz 15 lutego 2016 przez writen Nałogowiec (29,060 p.)

Wy się dzieci nauczcie najpierw pisać po polsku, a dopiero później bierzcie się za programowanie.

(gab123) Morze jest szerokie i głębokie, a (ShiroUmikaze) NodeJs to nie framework.

Być morze ale zawsze będzie to wymowka by pouczyć się jquery .Po za tym można to tez zrobić z samym javascriptem.

Każda wymówka, by się nie uczyć jQuery to DOBRA wymówka.

komentarz 16 lutego 2016 przez uRTLy Bywalec (2,420 p.)

Co takiego złego jest w tym jquery?

komentarz 16 lutego 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

Nie każdą wersję jądra obsługuje IE.

Optymalizacja leży i kwiczy, świetnie to widać to na starszych urządzeniach mobilnych (np: moja komórka lumia 520 - ruski rok czekam)

Zobacz ile obszaru danych ładujesz bez sensu przez request. Zobacz, ile linijek ma jądro.

Slidery i inne pierdoly, z daleka można wyczuć jak są napisane w jQuery, tymbardziej jak jest BootStrap.

komentarz 16 lutego 2016 przez uRTLy Bywalec (2,420 p.)

To jak wygląda komercyjne robienie stron taki front end na czym robią? Piszą od nowa wszystko po swojemu?

komentarz 16 lutego 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

To zależy od klienta i specyfikacji projektu. No i czasu do deadline'u ;).

komentarz 16 lutego 2016 przez Comandeer Guru (601,570 p.)

Nie każdą wersję jądra obsługuje IE.

Akurat jQuery jest ociężały dlatego, że obsługuje IE6+. Stąd jest podział na gałąź 1.x, ze wsparciem dla wszystkich IE, oraz 2.x, lżejszą, bez tego wsparcia.

Co do projektów komercyjnych: 98% dalej używa jQuery, bo to tzw. industry standard, a taki Angular i tak go ma pod spodem.

Natomiast w takich przypadkach nie ma sensu używać jQuery jeśli można to spokojnie zrobić nawet bez linijki JS. Inna rzecz, że przy większych rzeczach wypada mieć warstwę abstrakcji na DOM. Z tym, że warstwa abstrakcji != jQuery.