[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