[inne][AJAX][JavaScript]animowane menu Opcje

[interu58]

Witam,

Poszukuje podpowiedzi w jaki sposób mogę zrobić takie pojawiające się menu jak to ze strony poniżej. Chodzi o menu z ikonkami.
http://strategaresearch.pl/
Zaglądałem w kod źródłowy i próbowałem napisać coś podobnego, ale niestety za słaby jestem i mi to kompletnie nie chce działać.

[kamilo818]

Chodzi Ci o menu : Badania Jakościowe, Ilościowe, Kontakt, Panel, aktualności ?
Po najechaniu myszką podświetlenie ikony i rozszeżająca się linia na dole?

Jeśli tak to chyba lepiej zrobić tą animacje za pomocą css.
Coś takiego:

html:

[PHP] pobierz, plaintext 
<div class="kafel">
   <div id="ikona"></div>
   <span id="nazwa">Kontakt</span>
   <hr id="linia">
   <span id="opis">Jakiś opis...</span>
</div>
[PHP] pobierz, plaintext 

css:

[PHP] pobierz, plaintext 
.kafel{
       cursor:pointer;
       width:200px;
       height:150px;
}
.kafel #ikona{
       margin:auto;
       width:80px;
       height:80px;
       background-image:url('tutaj link do tła') no-repeat;
       background-size:cover;
}
.kafel:hover #ikona{
       background-image:url('tutaj link do tła po najechaniu myszką') no-repeat;
}
hr#linia{
       width:80px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
hr#linia:hover{
       width:160px;
       color:red;
}
[PHP] pobierz, plaintext 

Jeśli chodzi o animację ikony to można coś takiego zrobić:

[PHP] pobierz, plaintext 
<div id="ikona">
      <img src="link do obrazka przed najechaniem myszką" id="back"/>
      <img src="link do obrazka po najechaniu myszką" id="top"/>
</div>
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
#ikona{
     position:relative;
}
#ikona img{
      position:absolute;
      top:0;
      left:0;
      width:100%;
     height:100%;
}
#ikona img#top{
    opacity:0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.kafel:hover #ikona img#top{
    opacity:1;
}
[PHP] pobierz, plaintext 

Ten post edytował kamilo818 30.10.2014, 10:19:22

[interu58]

dzięki. ale bardziej chodziło mi o to, że to menu się pojawia po załadowaniu strony i jak to zrobić, żeby była taka animacja niż o to co się dzieje po najechaniu myszką. oraz jak ustawić te elementy na konkretnej pozycji. w przypadku tej strony chyba zastało to zrobione za pomocą "data-x", "data-y", ale jak ja zapisuje to w podobny sposób to mi nie działa. wszystkie pozycje menu ustawiają mi się jedna pod druga a nie obok siebie na konkretnej wysokości strony.

[kamilo818]

Czyli tobie chodzi nie jak zrobić takie menu tylko jak zrobić żeby ono tak się pojawiało.

Może coś w tym stylu.

[PHP] pobierz, plaintext 
 
jQuery(document).ready( function(){
    jQuery('.kafel').slideUp();
} );
 
[PHP] pobierz, plaintext 

Jeśli chodzi o ustawienie elementów to to są divy w lini. Jak tobie wyświetlają sie jeden pod drugim to musisz zmienic ne display:inline-block;

[interu58]

Hmm...wrzuciłem sobie ten Twój kod odnośnie menu i coś tu nie działa.
Generalnie ikonki/obrazki nie wyświetlają się - trzeba zmienić
#ikona img{
position:absolute;

na relative


zmiana obrazka po najechaniu muszką nie działa zupełnie.

<img src="link do obrazka przed najechaniem myszką" id="back"/>
<img src="link do obrazka po najechaniu myszką" id="top"/> ----> sprawia, ze obrazek który jest przed najechaniem myszą staje się większy, a nie się zamienia na inny. nie zachodzi tez żadna zamiana przy użyciu myszki.

nie rozumiem po co to rozdzielenie kafla i ikon, w sensie, ze mi to nie działa poprawnie.

Przerobiłem kod na taki:
<div id="kafel">
<a href="#kontakt" title="kontakt">
<div id="ikona">
<img src="kontakt.png" id="back"/>
</div>

<span id="nazwa">kontakt</span>
<hr id="linia">

</a>
</div>

i to niby działa, poza tym, że mam 4 pozycje w menu i pierwsza ma zawsze większy obrazek od pozostałych - nie wiem czym to jest spowodowane.
no i nie działają te zmiany po najechaniu myszką o których wspominałem.

[kamilo818]

Nie możesz zmienić na relative bo nie będą sie wyświetlały jeden pod drugim.
Kod pisany z palca wiec może się zdarzyć że coś nie zadziała. To jest przedstawienie schematu...
Ale wydawaje się że powinno działać poprawnie... i działa. Dla pewności wrzuciłem

http://page4u.waw.pl/test.php

Wiadomo musisz go podrasować dla swoich potrzeb. Ale sam mechanizm działa poprawnie

[interu58]

No faktycznie. Działa. Ale jak wrzucam na moją stronę to już nie działa. w sensie ta animacja nie przechodzi płynnie od lewej do prawej. tylko wszystkie kwadraty pojawiają się na raz od góry do dołu. Próbowałem zmieniać ustawienia css ale bez skutku. Wygląda to kiepsko. Może to kwestia innych skryptów umieszczonych na stronie - mogą one ze sobą kolidować?
Ja to menu mam umieszczone w zakładce oferta. Można ten skrypt przerobić tak żeby się uruchamiał po przewinięciu (wybraniu z menu"oferta") strony do zakładki oferta? Strona jest zrobiona jako "one page site" stąd pisze o przewijaniu.

[kamilo818]

Może nie masz biblioteki jQuery dołączonej?
w head

[PHP] pobierz, plaintext 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
[PHP] pobierz, plaintext 

Możesz to zrobić żeby się odpliło przy przewijaniu strony.
W przykładzie: jesli scroll bedzie na wysokosci równej badz większej niz 120 px to menu sie pokaże

[PHP] pobierz, plaintext 
	$(window).scroll(function () {
		if ($(this).scrollTop() > 120) {
		$('.kafel').each(function(){
			$(this).fadeIn(i+100);
			i=i+400;
		});		   
		} 
	});
[PHP] pobierz, plaintext 

wynik: http://page4u.waw.pl/test.php

Ten post edytował kamilo818 2.11.2014, 10:11:00

[interu58]

Mam dołączoną jQuery:) okazało się, że nie zauważyłem, ze mam jeszcze jeden skrypt pod tego samego diva.

Mi ten link, który podałeś nie działa. Nie pojawia się menu po przesunięciu suwaka.

Próbowałem przerobić to na kod, który by uruchamiał ta animacje po wybraniu z menu zakładki oferta, wyszło mi coś takiego:

<script>
$('.kafel').hide();
$(document).ready( function(){
var t = $("#oferta").offset().top;

$(document).scroll(function () {
if ($(this).scrollTop() + 300 >= t ) {
$('.kafel').each(function(){
$(this).fadeIn(i+100);
i=i+400;
});
}
});


});

</script>

ale i tak nie działa. w sensie animacja uruchamia się tak samo jak do tej pory. masz może jakiś pomysł gdzie jest błąd?

[kamilo818]

[PHP] pobierz, plaintext 
$(window).scroll(function () {
    if ($(this).scrollTop() > 120) {
      $('.kafel').each(function(){
        $(this).fadeIn(i+100);
        i=i+400;
      });	
    }
});
[PHP] pobierz, plaintext 

To musi działać.
funkcja odczytuje ci czy strona jest scrollowana. Jesli ta strona jest scrollowana i wysokość scrolla jest poniżej 120 px to odpala sie animacja każdego elemenu .kafel.

na http://page4u.waw.pl/test.php działa 100%.

Pokaż wiecej kodu.
Albo wrzuć sobie to do odzielnego pliku - same menu. Zobaczysz czy działa. Jak działa to masz problem z innym elementem kodu.

[interu58]

Tak działa, miałem problem z innym skryptem, którego zapomniałem usunąć. Ale ten link, który przesłałeś wcześniej nie działał Wielkie dzięki.