Animowane menu nawigacyjne
Moderator: Grupa pościgowa ;-)
Posty: 10
• Strona 1 z 1
Animowane menu nawigacyjne
przez 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ę.
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ę.
- Ender
- Jeszcze siÄ™ uczÄ™
- Posty: 34
- Dołączył(a): 23 kwietnia 2013, o 20:46
Re: Animowane menu nawigacyjne
przez 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
- Posty: 6
- Dołączył(a): 1 grudnia 2014, o 09:48
Re: Animowane menu nawigacyjne
przez 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.
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.
- Ender
- Jeszcze siÄ™ uczÄ™
- Posty: 34
- Dołączył(a): 23 kwietnia 2013, o 20:46
Re: Animowane menu nawigacyjne
przez 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;-).
- platekr
- Administrator forum
- Posty: 1737
- Dołączył(a): 8 września 2002, o 22:48
- Lokalizacja: Myslenice, Poland
Re: Animowane menu nawigacyjne
przez 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.
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.
- Ender
- Jeszcze siÄ™ uczÄ™
- Posty: 34
- Dołączył(a): 23 kwietnia 2013, o 20:46
Re: Animowane menu nawigacyjne
przez 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 
- platekr
- Administrator forum
- Posty: 1737
- Dołączył(a): 8 września 2002, o 22:48
- Lokalizacja: Myslenice, Poland
Re: Animowane menu nawigacyjne
przez 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.
#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.
- Ender
- Jeszcze siÄ™ uczÄ™
- Posty: 34
- Dołączył(a): 23 kwietnia 2013, o 20:46
Re: Animowane menu nawigacyjne
przez 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.
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.
- platekr
- Administrator forum
- Posty: 1737
- Dołączył(a): 8 września 2002, o 22:48
- Lokalizacja: Myslenice, Poland
Re: Animowane menu nawigacyjne
przez 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
})
});
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
})
});
- Ender
- Jeszcze siÄ™ uczÄ™
- Posty: 34
- Dołączył(a): 23 kwietnia 2013, o 20:46
Re: Animowane menu nawigacyjne
przez Ender » 27 czerwca 2015, o 09:04
Problem jest nieaktualny. Zrobiłem nawigację z samym css.
- Ender
- Jeszcze siÄ™ uczÄ™
- Posty: 34
- Dołączył(a): 23 kwietnia 2013, o 20:46
Posty: 10
• Strona 1 z 1
Powrót do Języki JavaScript i VBScript
Kto przeglÄ…da forum
Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników
Nowości
Mapa
Zestawienie
RSS