Moving menu buttons on the left side

Good morning.

After reading about the floating menu https://help.forumotion.com/t94216-have-problem-with-floating-menu#608155, i did something like this you can see in my forum http://kathighths.forumgreek.com/forum .

My question is, how can i make the navigation menu buttons to move like the menu on this site? http://e-school.forum.st/forum

Thank you!

Hi,

Try adding this to AP > Display > Colors > CSS

Code:

#tipkice li a:hover {
padding-left: 15px;
}

Thank you very much!!! It's working!

Are there any other tricks for this kind of menu?

I like this one http://inspectelement.com/articles/spin-those-icons-with-css3/

Demo = > http://inspectelement.com/demos/css3/iconspin/

I pasted on the CSS this code:
li a span {
-webkit-transition: -webkit-transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
}
li a:hover span {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}

But it did not work. what am i doing wrong?

Use this one.

HTML

Code:


<ul class="socialicons">
<li><a href="http://www.facebook.com/group.php?gid=109940839029894" title="Η ομάδα μας στο Facebook"><img src="http://cdn1.iconfinder.com/data/icons/inside/PNG/032x032/icontexto-inside-facebook.png"></a></li>
<li><a href="http://www.youtube.com/user/kathighths#p/u" title="Το κανάλι μας στο youtube"><img src="http://cdn1.iconfinder.com/data/icons/inside/PNG/032x032/icontexto-inside-youtube.png">
</a></li><li><a href="http://tinychat.com/kathighths" title="ΒίντεοΔιάσκεψη"><img src="http://cdn1.iconfinder.com/data/icons/iconshockrealvista/png/DIS/32/webcam_32.png"></a></li>
<li><a href="http://kathighths.forumgreek.com/contact" title="Επικοινωνήστε μαζί μας"><img src="http://cdn1.iconfinder.com/data/icons/musthave/32/Mail.png"></a></li>
</ul>

CSS

Code:

ul.socialicons{
    list-style: none;
    margin:0px;
    padding:0px;
    position:fixed;
    left:0px;
    top:250px;
}
ul.socialicons li{
    padding-bottom:4px;
    padding-left:15px;
}
ul.socialicons li img{
    opacity:0.5;
    transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
}
ul.socialicons li img:hover{
    opacity:1.9;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}

Demo > http://movingagain.forumcroatian.com/forum

Remoce the opacity if you don't wont it.

Replace all your previus floating menu codes with mine.

For one more time: THANK YOU!!!!!

The code works perfect.
The only issue now is which one to use, i like them both!!

Second. Is better. Solved?

Yes, solved!