|
Tytuł: Tworzymy rozsuwane menu ! Wiadomość wysłana przez: Kongo on 23.12.2012, 15:52:08 Hej. W tym poradniku pokażę jak stworzyć własne rozsuwane menu. Mamy 2 opcje :
1. Część rozwijana pokazuje nam się po prawej/lewej stronie rozwijacza 2. Część rozwijana pokazuje nam się pod rozwijaczem Na początku należy dołączyć bibliotekę JavaScript - JQuery. Następnie zrobić 2 elementy - 1 z Id - menu_x, a 2 z Id - menu_x_content x - numer menu. Można zacząć od 1 tak jak ja to zrobię 2 element musi być div'em ! 2 div'owi warto nadać klasę - potem dowiecie się czemu. Ja dam menu_content Mamy taki kod (może nie do końca poprawny HTML'owo) : Kod: <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> Nijak jest to podobne do jakiegokolwiek menu. Dlatego teraz użyjemy stylu CSS.<a id="menu_1">Pokaż menu</a> <div class="menu_content" id="menu_1_content"> <a>Link 1</a> <a>Link 2</a> <a>Link 3</a> </div> A więc co należy zrobić - treść menu należy odpowiednio ukryć ,ale tak by nie przeszkadzała na stronie ;). Należy też jej nadać pozycję określoną, a linki w nim niech będą stawiane jako blok więc : Kod: <style type="text/css"> Kod CSS umieszczamy na górze strony ;).menu_content { position: absolute; top: -1000px; } .menu_content a { display: block; } </style> Super ! Linki zniknęły ,ale dalej nie rozwija się ;). Dlatego przechodzimy do strony JavaScript. Niestety jestem nowy na forum i nie wiem jaki jest poziom waszych umiejętności kodowania dlatego napiszę cały skrypt wraz z komentarzami gdyby ktoś chciał się pouczyć : Jeszcze zależy jaką chcecie wersje menu: Jeśli ma się pojawiać obok (po prawej stronie to ten kod jest poprawny. Kod: <script type="text/javascript"> Jeśli zaś chcecie by menu było pod to zastosujcie ten kod :function show_menu(number) { //Dobra lecim. Zobaczmy gdzie to jest ten link ,na który najeżdżamy : var a = $("#menu_"+number).offset(); //Okej mamy dokładną pozycję. Ale trzeba okreslić jak długi jest ten link :) var b = $("#menu_"+number).innerWidth() + a.left; //Mamy już ile od lewej powinno być to menu. Ustaw więc odpowiednio atrybuty ;) $('#menu_'+number+'_content').css({ top: a.top, left: b }); } function hide_menu(number) { //Ukryjmy - wywal go w pissssssstuuuuu ! $('#menu_'+number+'_content').css({ top: -1000+'px', left: 0+'px' }); } </script> Kod: <script type="text/javascript"> Super ! W końcu mamy napisaną funkcję. No ,ale na kij mi to skoro mi to nic nie daje ?function show_menu(number) { //Dobra lecim. Zobaczmy gdzie to jest ten link ,na który najeżdżamy : var a = $("#menu_"+number).offset(); //Okej mamy dokładną pozycję. Ale trzeba okreslić jak wysoki jest ten link :) var b = $("#menu_"+number).innerHeight() + a.top; //Mamy już ile od lewej powinno być to menu. Ustaw więc odpowiednio atrybuty ;) $('#menu_'+number+'_content').css({ top: b, left: a.left }); } function hide_menu(number) { //Ukryjmy - wywal go w pissssssstuuuuu ! $('#menu_'+number+'_content').css({ top: -1000+'px', left: 0+'px' }); } </script> A no nie daje bo nie wywołujemy funkcji więc do linku ,który odpowiada za pokazanie menu trzeba dać 2 nasłuchy - mouseOver i mouseOut więc mając kod : Kod: <a id="menu_1">Pokaż menu</a> zamieniamy go na :Kod: <a id="menu_1" OnMouseOver="show_menu(1);" OnMouseOut="hide_menu(1);">Pokaż menu</a> Cud, działa !No ,ale części z was może nie nie usatysfakcjonować takie menu. W takim razie przedstawiam parę efektów. Część 1 efektu wrzucamy na koniec funkcji show_menu czyli tuż pod Kod: top: a.top, Natomiast część 2 dajemy na koniec funkcji hide_menu ;)left: b }); w CZAS_TRWANIA należy dać jak długo ma się pojawiać (podajemy w milisekundach czyli 1000 = 1 sekunda ) Teraz efekty : 1. Pojawianie i zanikanie Cz. 1 : Kod: $('#menu_'+number+'_content').css({ opacity: '0.0' }); Cz. 2 :$('#menu_'+number+'_content').animate({ opacity: 1.0 }, CZAS_TRWANIA); Tutaj już trzeba zamienić cały kod funkcji. Wykasujcie kod użyty w tej funkcji i zastąpcie go tym : Kod: $('#menu_'+number+'_content').animate({ opacity: .0 }, { duration: CZAS_TRWANIA, complete: function(){ Tutaj też trzeba napisać jak długo ma zanikać ;)$('#menu_'+number+'_content').css({ top: -1000+'px', left: 0+'px' }); }}); Jeśli będziecie chcieli inne efekty - piszcie ,a dopiszę ;) PS: Nie wiem czy właśnie takie poradniki powinno się tu umieszczać ;) PS2: Jeśli ktoś nie do końca wie jak to ma wyglądać to tu ma kod : Kod: <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <style type="text/css"> .menu_content { position: absolute; top: -1000px; } .menu_content a { display: block; } </style> <a id="menu_1" OnMouseOver="show_menu(1);" OnMouseOut="hide_menu(1);">Pokaż menu</a> <div class="menu_content" id="menu_1_content"> <a>Link 1</a> <a>Link 2</a> <a>Link 3</a> </div> <script type="text/javascript"> function show_menu(number) { //Dobra lecim. Zobaczmy gdzie to jest ten link ,na który najeżdżamy : var a = $("#menu_"+number).offset(); //Okej mamy dokładną pozycję. Ale trzeba okreslić jak długi jest ten link :) var b = $("#menu_"+number).innerWidth() + a.left; //Mamy już ile od lewej powinno być to menu. Ustaw więc odpowiednio atrybuty ;) $('#menu_'+number+'_content').css({ top: a.top, left: b }); } function hide_menu(number) { //Ukryjmy - wywal go w pissssssstuuuuu ! $('#menu_'+number+'_content').css({ top: -1000+'px', left: 0+'px' }); } </script> Tytuł: Odp: Tworzymy rozsuwane menu ! Wiadomość wysłana przez: Silterss on 23.12.2012, 16:21:12 Tak na przyszłość poczytaj poniższe:
http://www.gimpuj.info/index.php/topic,19672.0.html http://www.gimpuj.info/index.php/topic,17422.0.html http://www.gimpuj.info/index.php/topic,1001.0.html Tytuł: Odp: Tworzymy rozsuwane menu ! Wiadomość wysłana przez: dree on 23.12.2012, 17:42:33 No dobra, wszystko fajnie. Ale przed wolałbym wiedzieć jak te menu wygląda. :)
|