Strona wykorzystuje ciasteczka (cookies). Dzięki cookies nasz serwis działa poprawnie. Treść polityki cookies znajduje się tutaj.

Animowane menu nawigacyjne

Forum dyskusyjne poświęcone zagadnieniom związanym z językami JavaScript, VBScript i podobnym

Moderator: Grupa pościgowa ;-)

Animowane menu nawigacyjne

Postprzez Ender » 21 listopada 2014, o 18:48

Witam.
Na swojej stronie zrobiłem animowane menu. Wykonałem je według opisu zamieszczonego w książce "JavaScript i jQuery - nieoficjalny podręcznik". Na moim komputerze działa prawidłowo, natomiast, gdy oglądam stronę w Internecie (http://www.galeriamodelarska.pl) widzę, że menu najpierw jest widoczne w postaci listy, dopiero po chwili ustawia się w zakładki jedna obok drugiej. Przeglądając różne strony w Internecie nigdy takiego efektu nie zauważyłem.

<!DOCTYPE html>
<html>
<head>
...
<script src="skrypty_js/jquery-1.6.3.min.js"></script>
<script src="skrypty_js/nav1.1.min.js"></script>
<script src="skrypty_js/ready.js"></script>
...
</head>
<body>
...
<div id="menu">
<ul id="menuul">
<li><a href="#">Lotnicza</a>
<ul>
<li><a href="lotnicza_p.php">Plastik</a></li>
<li><a href="lotnicza_k.php">Karton</a></li>
</ul>
</li>
<li><a href="#">Morska</a>
<ul>
<li><a href="morska_p.php">Plastik</a></li>
<li><a href="morska_k.php">Karton</a></li>
<li><a href="#">Żaglowce</a>
<ul>
<li><a href="morska_zaglowce_p.php">Plastik</a></li>
<li><a href="morska_zaglowce_k.php">Karton</a></li>
<li><a href="morska_zaglowce_d.php">Drewno</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Kolejowa</a>
<ul>
<li><a href="kolejowa_tabor.php">Tabor</a></li>
<li><a href="#">Makiety</a>
<ul>
<li><a href="kolejowa_makiety_z.php">Foto</a></li>
<li><a href="kolejowa_makiety_f.php">Filmy</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Pancerna</a>
<ul>
<li><a href="pancerna_p.php">Plastik</a></li>
<li><a href="pancerna_k.php">Karton</a></li>
</ul>
</li>
<li><a href="dioramy.php">Dioramy</a></li>
<li><a href="makiety.php">Makiety</a></li>
<li><a href="figurki.php">Figurki</a></li>
<li><a href="#">Motoryzacja</a>
<ul>
<li><a href="motoryzacja_samochody.php">Samochody</a></li>
<li><a href="motoryzacja_ciezarowki.php">Ciężarówki</a></li>
<li><a href="motoryzacja_motocykle.php">Motocykle</a></li>
</ul>
</li>
<li><a href="#">Almanach</a>
<ul>
<li><a href="budowa.php">Budowa</a></li>
<li><a href="historia.php">Historia</a></li>
<li><a href="oryginaly.php">Oryginały</a></li>
<li><a href="farby.php">Farby</a></li>
</ul>
</li>
</ul>
</div>
Chciałbym mieć taki efekt, że zmienia się tylko zawartość strony, a menu pozostaje nieruchome.
Będę bardzo wdzięczny za radę.
Pozdrawiam.
Ender
Ender
Jeszcze się uczę
Jeszcze się uczę
 
Posty: 34
Dołączył(a): 23 kwietnia 2013, o 20:46

Re: Animowane menu nawigacyjne

Postprzez jan127 » 15 grudnia 2014, o 10:59

Nie wiem czy problem został rozwiązany ale u mnie menu ładuje się prawidłowo
jan127
Zanim zapytam poszukam odpowiedzi
Zanim zapytam poszukam odpowiedzi
 
Posty: 6
Dołączył(a): 1 grudnia 2014, o 09:48

Re: Animowane menu nawigacyjne

Postprzez Ender » 15 grudnia 2014, o 18:20

Witam i dziękuję za zainteresowanie.
Problem nie jest rozwiązany. Wyłączyłem opcję automatycznego dołączania skryptu zliczającego. Pomogło to o tyle, że na lżejszych stronach jest już wszystko dobrze. Natomiast na stronie www.galeriamodelarska.pl/farby.php, która ma około 400 kB, nadal widać przy ładowaniu pionową listę.

Na innym forum doradzono mi, żeby wstawić skrypty przed </body> i usunąć wywołanie funkcji ready. Ale dalszej poprawy nie było. Testowałem w czterech przeglądarkach (Firefox, Chrome, Opera i IE9). Efekt wszędzie podobny.

W tej chwili stan jest taki: skrypty są w sekcji HEAD i wyłączone jest automatyczne dołączanie skryptu zliczającego.
Pozdrawiam.
Ender
Ender
Jeszcze się uczę
Jeszcze się uczę
 
Posty: 34
Dołączył(a): 23 kwietnia 2013, o 20:46

Re: Animowane menu nawigacyjne

Postprzez platekr » 16 grudnia 2014, o 23:48

U mnie głóna strona wyświetla się w mgnieniu oka i bez żadnych opóźnień na listy. Natomiast ta z farbami faktycznie ma problem z menu, które ładuje się z opóźnieniem. Może po prostu dla stylu #menu ustalić stałą predefiniowaną szerokość i wysokość w arkuszu stylów i będzie ok? Chodzi mi o min-width, min-height, max-width, max-height. Teraz w momencie ładowania strony style są ustalane do zawartości menu, która jeszcze nie istnieje, bo jest generowana programowo w jquery. Dlatego można to poprawić ustalając wielkość już w CSSie na docelową wielkość menu. Daj znać czy pomogło (jakby mogło nie;-).
pozdrawiam,
Rafal Platek
cream.software
http://www.creamsoft.com
Avatar użytkownika
platekr
Administrator forum
Administrator forum
 
Posty: 1744
Dołączył(a): 8 września 2002, o 22:48
Lokalizacja: Myslenice, Poland

Re: Animowane menu nawigacyjne

Postprzez Ender » 10 stycznia 2015, o 09:37

Zmian w css jeszcze nie robiłem. Próbuje znaleźć przyczynę tego, że tak się dzieje.
Przestałem korzystać z ssl (usunąłem przekierowanie .htaccess z serwera i od pewnego czasu testuję w czterech przeglądarkach w najnowszych wersjach: Firefox, IE11, Chrome i Opera. W Firefoxie i IE11 jest dobrze, natomiast Chromie i Operze www.galeriamodelarska.pl/farby.php dalej wyswietla się nieprawidłowo.
Wysłałem zapytanie do serwisu serwera, czy przyczyna nie leży po stronie serwera i otrzymałem odpowiedź, że przyczyna musi być programistyczna.
Pozdrawiam.
Ender
Ender
Jeszcze się uczę
Jeszcze się uczę
 
Posty: 34
Dołączył(a): 23 kwietnia 2013, o 20:46

Re: Animowane menu nawigacyjne

Postprzez platekr » 10 stycznia 2015, o 16:24

I mają rację. Jest tak jak napisałem. W momencie renderowania strony, przeglądarka nie wie jeszcze jaki będzie docelowy wymiar menu, bo jest generowane programowo. Zdefiniuj sztywno wymiary w menu w CSS i będziesz miał problem rozwiązany. Innymi słowy najlepsze rozwiązanie jest najprostsze. To się nazywa brzytwa Ockhama stosowana ;)
pozdrawiam,
Rafal Platek
cream.software
http://www.creamsoft.com
Avatar użytkownika
platekr
Administrator forum
Administrator forum
 
Posty: 1744
Dołączył(a): 8 września 2002, o 22:48
Lokalizacja: Myslenice, Poland

Re: Animowane menu nawigacyjne

Postprzez Ender » 11 stycznia 2015, o 09:52

Dołożyłem:
#menuul {
min-width: 0;
max-width: 1074px;
min-height: 0;
max-height: 28px;
wcześniej zrobiłem to samo z #menu, ale też bez efektu.
Ta strona ma dodatkowy arkusz stylów. Przeniosłem go na koniec sekcji HEAD. Dalej nie ma efektu.
Pozdrawiam.
Ender
Ender
Jeszcze się uczę
Jeszcze się uczę
 
Posty: 34
Dołączył(a): 23 kwietnia 2013, o 20:46

Re: Animowane menu nawigacyjne

Postprzez platekr » 11 stycznia 2015, o 12:41

Dlaczego min-width jest 0 ? Ustaw wszystko na wartości docelowe. Tj. min- max- oraz same width i height.

Jak to nie pomoże, a wątpię... to może spróbuj objąć to, w czym renderowane jest menu nowym DIV i dla niego ustawić na sztywno wymiar.
pozdrawiam,
Rafal Platek
cream.software
http://www.creamsoft.com
Avatar użytkownika
platekr
Administrator forum
Administrator forum
 
Posty: 1744
Dołączył(a): 8 września 2002, o 22:48
Lokalizacja: Myslenice, Poland

Re: Animowane menu nawigacyjne

Postprzez Ender » 17 stycznia 2015, o 20:16

Rozumiem, że trzeba ograniczyć maksymalny wymiar znacznika <ul>, w którym jest lista. Po co w takim razie wstawiać min.
Ale zrobiłem tak jak pisałeś. Objąłem listę znacznikiem <nav> i w arkuszu dodałem:
nav {
min-width: 1074px;
max-width: 1074px;
min-height: 28px;
max-height: 28px;
}
Wcześniej próbowałem też bez min. Tak i tak jest bez zmian.
Z javascriptu jestem jeszcze zielony. Jak będzie wyglądał script po usunięciu wywołania funkcji ready:
$(document).ready(function() {
$("#menuul").navPlugin({
'itemWidth': 100,
'itemHeight': 25,
'navEffect': 'slide',
'speed': 250
})
});
Pozdrawiam.
Ender
Ender
Jeszcze się uczę
Jeszcze się uczę
 
Posty: 34
Dołączył(a): 23 kwietnia 2013, o 20:46

Re: Animowane menu nawigacyjne

Postprzez Ender » 27 czerwca 2015, o 09:04

Problem jest nieaktualny. Zrobiłem nawigację z samym css.
Pozdrawiam.
Ender
Ender
Jeszcze się uczę
Jeszcze się uczę
 
Posty: 34
Dołączył(a): 23 kwietnia 2013, o 20:46


Powrót do Języki JavaScript i VBScript

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników

cron